localStorage와 sessionStorage 알아보기

브라우저에 데이터를 저장하는 방법으로 localStorage와 sessionStorage 두 방법이 있다.

두 저장소의 차이점으로는, 둘 다 새로고침을 해도 브라우저에 데이터가 남는다.

다만, 창을 닫으면 session storage는 데이터가 사라지는 반면 local storage는 창을 닫아도 브라우저에 여전히 데이터가 남아있는 특징이 있다.

localStorage는 브라우저 전체에서 공유되는 반면, sessionStorage는 같은 브러우저 탭 내부에서만 데이터가 공유된다.

기본적인 사용법은 두 스토리지 모두 같다.

sessionStorage.setItem("key1", 123);
const value = sessionStorage.getItem("key1");
console.log(value); // 123

removeItem("key1"); // 제거
sessionStorage.getItem("key1"); // null

sessionStorage.setItem("key1", 3);
sessionStorage.setItem("key2", 2);
sessionStorage.setItem("key3", 1);


sessionStorage.clear(); // 초기화

sessionStorage.setItem("key1", 1);
sessionStorage.length; // 1
console.log(sessionStorage); // Storage {key1: '1', length: 1}

위에서는 sessionStorage를 사용하였지만, localStorage를 사용해도 동일하게 작동한다.

스토리지에 저장된 값은 개발자 도구에서 확인할 수 있다.

 

일반 객체처럼 값을 할당하고 접근할 수도 있다.

localStorage.test = "Hi";
console.log(localStorage.test, localstorage["test"]); // Hi Hi

 

⛈ 스토리지의 key, value 값은 모두 문자열이다. 따라서 문자열이 아닌 값을 저장하고 사용하기 위해서는 JSON.stringify, JSON.parse 메서드를 사용해야 한다.

 

storage에서 하나의 웹 URL를 기준으로 데이터가 할당되는데, 이 웹 사이트를 판별하는 기준으로 Origin(protocol, domain, port)가 같으면 같은 웹 사이트로 판별해 데이터가 공유된다.

 

 

 

https://ko.javascript.info/localstorage

localStorage와 sessionStorage