[Javascript] localStorage와 sessionStorage

● localStorage와 sessionStorage의 공통점

    - 웹 브라우저에서 클라이언트 측 데이터를 저장하는 데 사용되는 웹 스토리지 메커니즘

 

● localStorage와 sessionStorage의 차이점

	localStorage	sessionStorage
유지 기간	· 영구적으로 데이터 저장 · 브라우저를 닫아도 데이터 유지	· 세션 기간 동안 데이터 저장 · 브라우저 세션 유지 동안만 데이터 유지(닫으면 유지  끝)
액세스	· 동일한 도메인 내 모든 페이지에서 액세스 가능	· 세션 간 데이터 공유 불가 · 동일한 세션 내에서만 액세스 가능
저장 형식	· 브라우저의 로컬 파일 시스템에 데이터 저장	· JavaScript 객체 형식으로 데이터 저장
저장 용량	· 도메인당 5MB 제한	· 브라우저마다 상이 · 일반적으로 5MB이상은 가능

 

● 메서드

    - setItem(key) : 주어진 키에 해당 값을 입력

 

localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

 

    - getItem(key) : 주어진 키에 해당하는 값을 조회

 

const dataFromLocalStorage = localStorage.getItem('key');
const dataFromSessionStorage = sessionStorage.getItem('key');

 

    - removeItem(key) : 주어진 키에 해당하는 항목을 삭제

 

localStorage.removeItem('key');
sessionStorage.removeItem('key');

 

    - clear() : 스토리지에서 모든 항목을 삭제

 

localStorage.clear();
sessionStorage.clear();

 

    - key(index) : 지정된 인덱스에 해당하는 키를 반환

 

const loclKeyAtIndex = localStorage.key(0);
const sessionKeyAtIndex = sessionStorage.key(0);

 

    - length : 스토리지에 저장된 항목의 개수 반환

 

const localStorageLength = localStorage.length;
const sessionStorageLength = sessionStorage.length;