사전 정보
로컬 스토리지는 브라우저에서 관리하는 것이므로, 브라우저 별로 다를 수 있다. 이 글에서는 가장 범용적 브라우저인 크롬을 대상으로 한다.
찾아보기에 앞서 궁금한 것들 나열
- 로컬 스토리지의 종류
- 로컬 어디에 저장되는 걸까?
- 쿠키랑 로컬 스토리지의 차이점?
로컬 스토리지 vs 세션 스토리지
기본적으로 둘 다 값들을 key-value 쌍으로 저장한다. map과 유사한 형태이지만, 인덱스를 이용해 키에 접근할 수 있다는 점이 다르다.
💡 자료형은 string만 지원한다!로컬 스토리지
말 그대로 데이터를 로컬에 저장한다. 이 데이터는 브라우저를 닫아도 보존된다.
- 사용법
localStorage.setItem(key, value); localStorage.getItem(key); localStorage.removeItem(key); localStorage.clear(); //유지해야 하는 데이터가 아니라면 데이터를 청소해주는 것이 좋다. //모든 값 순회 for (let i=0; i<localStorage.length; i++) { let key = localStorage.key(i); console.log(`${key}, ${localStorage.getItem(key)}`); }
세션 스토리지
동일한 세션 내에서만 데이터를 저장한다. 예를 들어 같은 페이지 내에서 새로고침을 하면 값이 보존되지만, 다른 페이지로 가거나 같은 페이지라도 다른 탭이라면 값이 저장되는 위치가 달라진다.
로컬 스토리지에 비해 잘 사용되진 않는다.
- 사용법 위의 로컬 스토리지 사용법에서 localStorage → sessionStorage로 변경해주기만 하면 된다.
참고
로컬 스토리지나 세션 스토리지의 데이터가 갱신될 때 storage 이벤트가 실행된다.
이 이벤트는 window 객체에서 일어나며, 아래와 같이 확인해볼 수 있다.
window.onstorage = event => { //window.addEventListener('onstorage', () => {})와 동일하다.
console.log(event);
}로컬 스토리지에서 string 이외의 자료형을 사용하기
그렇다면 스토리지에서 문자열 이외의 자료형을 사용하려면 어떻게 해야 할까?
가능한 방법 중 하나는 json을 이용하는 것이다.
localStorage.setItem('jsonItem', JSON.stringify({a:1, b:2}));
jsonResult = localStorage.getItem('jsonItem');
console.log(JSON.parse(jsonResult));위와 같이 사용하면 숫자 자료형을 value로 사용할 수 있다.
로컬 어디에 저장되는 걸까?
크롬 브라우저를 기준으로, 개인 프로필 하위의 Local Storage 폴더 안에 저장된다.
이는 개발자 도구의 application → storage에서도 확인 가능하다.
쿠키와 로컬 스토리지의 차이점
그렇다면 쿠키와 로컬 스토리지의 차이점은 무엇일까? 왜 따로 사용하는 것일까?
쿠키와 로컬 스토리지의 가장 큰 차이점은, 쿠키는 네트워크 요청 시에 서버에 데이터를 전송하지 않는다는 것이다. 또한 토큰과 같이 헤더에서 조작이 가능한 쿠키와 달리 로컬 스토리지는 헤더를 통해 조작이 불가능하다.
참고
https://www.daleseo.com/js-web-storage/
https://ko.javascript.info/localstorage
