Local Storage
글을 들어가며...
프론트엔드 프로그램을 개발할 때, 자바스크립트를 이용하여 사용자의 입력을 브라우저가 닫혀도 기억하고 싶은 경우가 있다. 이 때 자바스크립트에서 window.localStorage를 사용하면 사용자의 입력을 key/value 쌍으로 저장할 수 있다. 따라서 todo list 어플리케이션에서 사용자가 입력한 todo를 저장하고 싶을 때, 또는 사용자가 설정한 테마를 저장하고 싶을 때 local storage를 사용하면 된다.
브라우저의 저장소, Local Storage
local storage는 Web Storage API 2가지 방법중 하나이다.
Weg Storeage API는 브라우저에서 쿠키를 사용하는 것보다 직관적으로 key/value 쌍으로 데이터를 안전하게 저장할 수 있는 메커니즘을 제공한다.
local storage는 Window.localStorage 속성을 통해서 사용할 수 있는데, 정확히 말하면 이를 지원하는 브라우저에서 window 객체는 localStorage 속성을 포함한 WindowLocalStorage 객체를 구현하기 때문이다.
따라서 해당 속성에 접근하면 Storage객체의 인스턴스를 생성하게 되고, 그걸 사용해 데이터 항목을 추가, 회수, 제거할 수 있다. 왜냐하면Storage는 특정 도메인을 위한 로컬 저장소의 접근 경로이기 때문이다.
Local Storage Vs. Session Storage
Local Stoarge
- 현재 도메인의
Storage객체에 접근하여 로컬 스토리지에 데이터를 추가, 회수, 제거할 수 있다. - 데이터를 서버로 전송하지 않는다.
- 저장 공간이 쿠키보다 크고, 세션 스토리지보다도 크다.
- 유효기간 없이 데이터를 저장하여 브라우저를 닫았다 열어도 데이터가 남아있다. 따라서 자바스크립트를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
Session Storage
- 현재 도메인의
Storage객체에 접근하여 로컬 스토리지에 데이터를 추가, 회수, 제거할 수 있다. - 데이터를 서버로 전송하지 않는다.
- 저장 공간이 쿠키보다 크지만, 로컬 스토리지보단 작다.
- 세션에 한정(브라우저 또는 탭이 닫힐때 까지만)하여 데이터를 저장한다.
즉 로컬 스토리지와 세션 스토리지의 큰 차이점은 데이터의 유효기간에 존재한다.
따라서 세션 스토리지도 위에서 설명한 로컬 스토리지와 마찬가지로, window 객체에 sessionStorage속성이 포함된 WindowSessionStorage 객체가 존재하기 때문에, Window.sessionStorage 속성으로 사용 가능하다.
Local Storage 사용법
항목 추가 Storage.setItem
현재 도메인의 로컬 Storage 객체에 접근하여, Storage.setItem 를 사용해 항목 하나를 추가한다.
localStorage.setItem('pizza', '20000');항목 읽기 Storage.getItem
현재 도메인의 로컬 Storage 객체에 접근하여, Storage.getItem 를 사용해 key에 일치하는 항목을 읽어온다.
const pizzaPrice = localStorage.getItem('pizza');항목 제거 Storage.removeItem
현재 도메인의 로컬 Storage 객체에 접근하여, Storage.removeItem 를 사용해 key에 일치하는 항목을 삭제한다.
localStorage.removeItem('pizza');항목 전체 제거 Storage.clear
현재 도메인의 로컬 Storage 객체에 접근하여, Storage.clear 를 사용해 로컬 스토리지에 저장된 모든 항목을 제거한다.
localStorage.clear();