자바스크립트 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 (Local vs Session Storage)

자바스크립트 전체 링크

참고

- 오브젝트 순회하기

- 로컬 스토리지 유효기간 설정하기

- 모든 페이지의 로컬 스토리지 변경 감지하기 (useLocalStorage)

 

로컬 스토리지를 이용하면 간단히 데이터를 저장할 수 있다.

 

setItem(key, value)로 값을 저장하고, getItem(key)로 값을 읽는다.

let [key1, value1] = ["blood", "strawberry"];

localStorage.setItem(key1, value1);

let item1 = localStorage.getItem(key1);

console.log(item1); // strawberry;

 

로컬 스토리지에 배열이나 오브젝트를 저장하면, 그대로 문자열로 저장된다.

let key2 = "java";
let value2 = [{id : 1, name : "script"}, {id : 2, name : "the hutt"}];

localStorage.setItem(key2, value2);

let item2 = localStorage.getItem(key2);

console.log(item2);

 

올바른 사용법은 JSON.stringify로 문자열로 만든 후, parse로 파싱을 하는 것이다.

let key2 = "java";
let value2 = [{id : 1, name : "script"}, {id : 2, name : "the hutt"}];

localStorage.setItem(key2, JSON.stringify([...value2]));

let item2 = JSON.parse(localStorage.getItem(key2));

console.log(item2);

 

저장된 값을 지우고 싶다면 removeItem을 사용한다.

존재하지 않는 key라면 null을 반환하게 된다.

localStorage.removeItem(key1);

item = localStorage.getItem(key1);

console.log(item1); // undefined;

 

모든 저장소를 reset하고 싶다면 clear() 메서드를 사용한다.

localStorage.clear();

 

로컬 스토리지의 값을 순회하는 방법은 오브젝트 순회와 동일하다.

---

Session Storage

 

세션 스토리지는 로컬 스토리지와 사용 방법이 완전히 동일하다.

다만 세션 스토리지에 저장된 데이터는 페이지를 닫으면 사라진다. 

실제 아래와 같이 테스트를 해보면, 새로고침을 할 경우에는 저장된 데이터가 남아있으나,

페이지를 새로 열면 로컬 스토리지만 데이터가 남아있다.