[자바스크립트 문법] localStorage

웹 스토리지의 localStorage

클라이언트 단, 브라우저에서 데이터를 저장할 수 있는 기술을 웹 스토리지라고 한다.
브라우저에서 여러 탭이나 창을 닫으면 저장해 둔 데이터도 함께 소멸된다. 반면, 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유된다. 즉, 탭/창을 닫아도 데이터는 브라우저에 그대로 남아 있다. 이외에도 다음과 같은 특이점이 있다.
- 동일한 컴퓨터의 동일한 브라우저에서만 데이터 영속성을 가진다.
- 오직 string 데이터 타입만 지원한다.

localStorage의 기본 API

localStorage.setItem("key", "value")  //키에 데이터 쓰기
localStorage.getItem("key")  //키로부터 데이터 읽기
localStorage.removeItem("key")  //키의 데이터 삭제
localStorage.clear();  //모든 키의 데이터 삭제
localStorage.length;  //저장된 키,값 쌍의 갯수

크롬에서 확인해보기

크롬 [개발자도구] > 탭에서 [Application(애플리케이션)] 을 열어보자. 왼쪽 사이드바에 다양한 저장용량이 있다.

[로컬 스토리지]의 [file://]를 클릭해보면, 쌓여졌거나 빈 창을 볼 수 있다. 아직 비어있다면, 저장하기 시작하면 해당 창에 보이게 된다.