웹 스토리지(Web Storage) 중 로컬 스토리지(Local Storage)에 대해 간략하게 정리하는 글이다.
로컬 스토리지는 클라이언트의 브라우저에서 관리하는 저장소인데 세션 스토리지(Session Storage)와 차이점이 있다면 웹 페이지의 세션이 만료되면 데이터가 지워지는 세션 스토리지와 다르게 로컬 스토리지는 세션과 관계없이 만료일이 따로 없어 직접 삭제하지 않으면 영속성이 보장된다. 물론 동일한 PC에서 동일한 브라우저일때 보장이 되고 같은 웹사이트를 여러 창으로 띄웠을 때 창 별로 데이터를 관리하는 세션 스토리지와 다르게 로컬 스토리지는 창 간에 데이터가 공유되는 차이점도 있다.
✔︎ Local Storage 사용방법
1. 데이터 저장
로컬 스토리지에 저장되는 데이터는 기본적으로 key - value 형식의 pair로 저장된다.
localStorage.setItem("key", value);
localStorage.setItem("key", 1); // "1" 로 저장됨
localStorage.setItem("key", "1"); // "1" 로 저장됨
localStorage.setItem("key", {value : 1}); // "[object Object]" 로 저장됨
localStorage.setItem("key", JSON.stringify({value : 1})); //'{"value":1}' 로 저장됨value 로 들어가는 값들은 모두 숫자형, 문자열 관계 없이 문자열로 저장된다. 객체도 마찬가지로 그대로 넣게되면 '[object Object]' 로 들어가기 때문에 객체를 넣어야 한다면 value값을 JSON.stringify로 감싸서 문자열로 직렬화하여 저장해야 한다.
2. 데이터 호출
localStorage.getItem("key");
//value 가 객체인 경우
JSON.parse(localStorage.getItem("key"));로컬 스토리지에서 데이터를 사용할 때는 getItem 함수에 인자로 key 값을 넣어주면 사용이 가능하다. 앞서 설명한거처럼 불러오는 값들이 모두 문자열이므로 value가 객체인 경우 JSON.stringify로 감싸서 문자열로 저장했다면 불러올때는 JSON.parse를 사용하여 다시 객체로 만들어서 사용해야 한다.
3. 데이터 삭제
//해당 키 값의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제
localStorage.clear();데이터 삭제는 removeItem 함수를 사용하여 특정 key값을 인자로 넘겨주면 해당 key 값에 해당하는 key 와 value만 지울수도 있고 clear함수 사용시 localStorage의 모든 key-value 데이터가 삭제된다.
