웹 스토리지의 localStorage
클라이언트 단, 브라우저에서 데이터를 저장할 수 있는 기술을 웹 스토리지라고 한다.
브라우저에서 여러 탭이나 창을 닫으면 저장해 둔 데이터도 함께 소멸된다. 반면, 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유된다. 즉, 탭/창을 닫아도 데이터는 브라우저에 그대로 남아 있다. 이외에도 다음과 같은 특이점이 있다.
- 동일한 컴퓨터의 동일한 브라우저에서만 데이터 영속성을 가진다.
- 오직 string
데이터 타입만 지원한다.
localStorage의 기본 API
localStorage.setItem("key", "value") //키에 데이터 쓰기
localStorage.getItem("key") //키로부터 데이터 읽기
localStorage.removeItem("key") //키의 데이터 삭제
localStorage.clear(); //모든 키의 데이터 삭제
localStorage.length; //저장된 키,값 쌍의 갯수
크롬에서 확인해보기
크롬 [개발자도구] > 탭에서 [Application(애플리케이션)] 을 열어보자. 왼쪽 사이드바에 다양한 저장용량이 있다.
[로컬 스토리지]
의 [file://]
를 클릭해보면, 쌓여졌거나 빈 창을 볼 수 있다. 아직 비어있다면, 저장하기 시작하면 해당 창에 보이게 된다.
'JavaScript' 카테고리의 다른 글
[자바스크립트 문법] addEventListener 이벤트 등록하기 (0) | 2023.11.17 |
---|---|
[자바스크립트 문법] filter()메소드와 forEach() 반복문 (0) | 2023.11.16 |
[자바스크립트 문법] DOM Method (0) | 2023.11.14 |
[자바스크립트 예제 #04] Math.random으로 로렘입숨 Lorem ipsum 만들기 (0) | 2023.11.13 |
[자바스크립트 문법] var, let, const 차이점 (0) | 2023.11.13 |