자바스크립트 localStorage, sessionStorage 사용방법

자바스크립트 localStorage, sessionStorage 사용방법

localStorage는 무엇이냐? 데이터를 저장하는 브라우저의 공간의 일종이라고 생각하면 된다.

페이지의 프로토콜과 URL 별로 저장이 된다. 

(http://www.aaa.com) 과 (https://www.aaa.com) 은 서로 별게의 localStorage를 사용하게 된다는점을 유념해야 한다.

 

localStorage는 브라우저상에서 데이터가 직접 지우지 않는한 만료되지 않고 ,

localStorage와 비슷한 녀석이 sessionStorage 란 녀석이 있는데,

이 아이는 브라우저 페이지를 닫을때마다 사라진다는점이 다르다.

 

사용하는 방법을 알아보자

1. localStorage

 

localStorage에 name이라는 키값에 kim이라는  항목을 추가했다.

localStorage.setItem('name','kim');

 

항목을 읽어 들이는 방법은 다음과 같다.

const name = localStorage.getItem('name');

 

항목의 삭제

localStorage.removeItem('name');

 

항목의 전체제거

localStorage.clear();

 

2. sessionStorage

문법자체는 localStorage와 다를게 없다.

앞서 말한것처럼 sessionStorage는 브라우저 페이지 세션이 종료되면 삭제 딘다는것이다.

탭이나 브라우저가 열려있는 동안 계속 지속된다.

새로고침을 해도 sessionStorage는 유지된다.

탭이나 창을 닫으면 세션이 종료되고 개체가 지워지면서 sessionStorage는 종료 된다.

 

sessionStorage.setItem('name','kim');

const name = sessionStorage.getItem('name');

sessionStorage.removeItem('name');

sessionStorage.clear();