Web Storage에는 Local Storage와 Session Storage가 있다.
로컬 스토리지 vs 세션 스토리지
두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있다.
세션 스토리지 : 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러 개의 세션 스토리지에 데이터가 격리 되어 저장되며, 탭이나 창이 닫힐 때 데이터가 소멸 된다.
로컬 스토리지 : 반면 로컬 스토리지는 브라우저에 그대로 남아있다. 단, 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당 된다.
기본 API
(세션 스토리지는 localStorage를 바꿔쓰면 된다)
// 키에 데이터 쓰기
localStorage.setItem("key", value);
// 키로 부터 데이터 읽기
localStorage.getItem("key");
// 키의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제
localStorage.clear();
// 저장된 키/값 쌍의 개수
localStorage.length;주의 사항
오직 문자형 데이터 타입만 지원한다
숫자형 데이터를 입력한 경우, 본래 숫자가 아닌 문자가 나오게 됨.
해결 방법
JSON 형태로 데이터를 읽고 쓴다
> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}