localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다.
localStorage vs sessionStorage
webStorage에는 로컬스토리지와 세션스토리지가 있다. 두개의 차이는 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 차이가 있다.
세션스토리지는 웹페이지의 세션이 끝날 때, 저장된 데이터가 지워지는 반면 로컬스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
브라우저가 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션스토리지에 데이터가 서로 격리되어 저장되고, 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸한다.
반면, 로컬스토리지의 경우 여러 탭이나 창의 데이터가 서로 공유되고, 탭이나 창을 닫아도 데이터는 그대로 저장되어있다.
<aside> ✏️ localStorage.setItem(”key”, value) - key에 데이터 쓰기 localStorage.getItem(”key”) - key로 부터 데이터 읽기 localStorage.removeItem(”key”) - key의 데이터 삭제 localStorage.clear( ) - 모든 key의 데이터 삭제 localStorage.length; - 저장된 key/value 쌍의 개
</aside>
localStorage에는 문자열만 저장된다.
따라서 localStorage에 객체 또는 배열을 저장하기 위해서는 문자열로 변환해서 저장해야한다.
JSON.stringify( ) 메서드는 Javascript 값이나 객체를 JSON 문자열로 변환한다.
console.log(JSON.stringify({x: 5, y: 6});
//'{"x":5,"y":6}'