웹 스토리지

🔖 웹 스토리지

웹 스토리지 객체(Web Storage Object)는 로컬스토리지(localStorage)와 세션스토리지(sessionStorage) 두가지가 있다.

이 두 스토리지는 키(Key)-값(Value) 형태로 데이터를 저장하여 사용하는 저장소이다.

🧑🏻‍💻 스토리지에 키-값 형태로 데이터를 저장해서 무엇에 사용하느냐?

우리는 브라우저를 사용할 때 페이지를 새로고침하거나, 다시 실행해도 입력하던 데이터가 사라지지 않고 남아있는 경우를 본적 있을 것이다.

🧑🏻‍💻 쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데 왜 다른 저장소를 사용하는 것일까?

• 쿠키와 다르게 웹 스토리지는 네트워크 요청 시 서버로 전송되지 않는다.
• 쿠키보다 더 많은 정보를 보관할 수 있다.
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 모든 과정(저장, 삭제 등)은 모두 자바스크립트 내에서 수행이 된다.
• 도메인.프로토콜.포트로 정의 되어 있는 오리진(origin)에 묶여있어, 이 오리진(origin)이 다르면 데이터에 접근할 수 없다.

➤ 제공하는 함수

• setItem(key, value) - 키, 값 쌍을 보관
• getItem(key) - 키에 해당하는 값을 가져옴
• removeItem(key) - 키와 해당 값을 삭제
• clear() - 모든 것을 삭제
• key(index) - 인덱스에 해당하는 키를 가져옴
• length - 저장된 항목의 개수를 가져옴

🔖 localStorage

• 오리진(origin)이 동일한 경우 모든 탭과 창에서 데이터 공유
• 브라우저 또는 OS가 재시작하더라도 데이터는 파기되지 않음

// 로컬 스토리지 저장
localStorage.setItem('localStorage', 'true')

위의 함수를 브라우저의 콘솔을 열어 실행 후 아래 함수를 브라우저를 열고 닫기 전후로 실행해 보자.

alert(localStorage.getItem('localStorage'))

// 'true'

열고 닫기 전후로 실행된 알러트 창에는 'true'가 표시될 것이다.

열고 닫기 전 후로 동일한 오리진(origin)이기 때문에 공유되기 때문이다.

➤ 일반 객체처럼 사용하기

// 키 설정
localStorage.first = 1;

// 키 얻기
alert(localStorage.first); // 1

// 키 삭제
delete localStorage.first

➤ 키 순회

localStorage는 '키'를 사용해 값을 설정하고 삭제하고 값을 가져올 수 있다.

🧑🏻‍💻 그렇다면 key하나의 값이 아닌 전체는 어떻게 가져올 수 있을까?

스토리지 객체는 iterable객체가 아니기때문에 반복문을 사용해야한다.

좋지 않은 방법1

// 좋지 않은 방법1
for(let i = 0, i < localStorage.length; i++) {
	let key = localStorage.key(i);
    alert(`${key}: ${localStorage.getItem(key)}`);
}

좋지 않은 방법2

// 좋지 않은 방법2
for(let key in localStorage) {
	alert(key); // getItem, setItem 등 내장 필드까지 다 출력됨
}

괜찮은 방법1

// 괜찮은 방법1__
for(let key in localStorage) {
	if(!localStorage.hasOwnProperty(key)) {
    	continue; // getItem, setItem등은 건너띈다.
    }
}

괜찮은 방법2

// 괜찮은 방법2
let keys = Object.keys(localStorage);
for(let key of keys) {
	alert(`${key}: ${localStorage.getItem(key)}`);
}

🔖 sessionStorage

sessionStorage는 localStorage에 비해 자주 사용되지 않는다. 동일한 함수를 사용하지만 제한이 크기 때문이다.

• sessionStorage는 현재 떠 있는 탭 내에서만 유지된다.
  같은 페이지라도 다른 탭에 있으면 저장하는 저장소가 다르기 때문이다.
• 페이지를 새로고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열때는 사라진다.

sessionStorage는 오리진(origin)뿐만 아니라 브라우저 탭에도 종속되어 있기 때문에 localStorage보다 자주 사용되지 않는다.

➤ sessionStorage사용방법

localStorage완전히 동일하며 localStorage 대신 sessionStorage를 사용해 주면 된다.

// 로컬 스토리지 저장
sessionStorage.setItem('sessionStorage', 'true')

위의 함수를 브라우저의 콘솔을 열어 실행 후 다른 탭을 열어서 아래 함수를 실행해 보자.

alert(sessionStorage.getItem('sessionStorage'))

// None

🔖 출처

https://ko.javascript.info/localstorage