최종 수정 : 2024-05-01
세션 스토리지와 로컬 스토리지
사이트마다 클라이언트에서만 사용하고 싶은 데이터를 저장해 놓고 싶을 때 사용한다.
세션 스토리지(Session Storage)
- 현재 탭에서만 유요한 저장소이다.
- 탭을 닫으면 데이터가 사라진다.
- 다른 탭과 데이터는 공유되지 않는다.
// 값을 저장
const data = inputElement.value;
sessionStorage.setItem('draft', data);
// 값을 참조하여 사용
const draftData = sessionStorage.getItem('draft');
// 값 지우기
sessionStorage.removeItem('draft');
로컬 스토리지(Local Storage)
- 해당 사이트에서 유요한 저장소이다.
- 탭을 닫거나 브라우저를 닫아도 데이터가 유지된다.
- 여러 탭 사이에서도 데이터가 공유된다.
// 값을 저장 및 수정
localStorage.setItem('shomw-sidebar', 'false');
// 사용자가 처음 접속했을 때
const showSidebar = localStorage.getItem('show-sidebar') === 'true';
// 값 지우기
localStorage.removeItem('show-sidebar');
스토리지가 변경됐을 때 처리하기
스토리지가 변경되었을 때, 'storage'라는 이벤트가 발생한다.
window.addEventListener("storage", () => {
const showShidebar = localStorage.getitem('show-sidebar') === 'true';
// showSidebar 값 적용
});
스토리지가 쿠키와 다른 점은?
- 클라이언트가 만들고 관리한다.
- 자바스크립트로 편리하게 조작할 수 있다.
- 만료 기간(수명)이 없다.
- 쿠키보다 사용할 수 있는 용량이 크다.
공부할 자료
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
'프론트엔드 > JS 공부' 카테고리의 다른 글
쿠키(Cookie) (0) | 2024.05.01 |
---|---|
객체 - 배열 - 문자열의 상관 관계 (0) | 2024.04.26 |
HTTP 메서드(method)에 대한 정리 (0) | 2024.04.06 |
이벤트 위임(event delegation)에 대한 정리 (0) | 2024.04.06 |
생성자 함수(constructor)에 대한 정리 (1) | 2024.04.05 |
댓글