[JS] 웹 스토리지(Web storage)

웹 스토리지(Web storage)

웹 개발시에 데이터를 어딘가에 저장해야 할 일이 생긴다. 웹 스토리지는 클라이언트(브라우저)를 통해 비교적 간단한 데이터를 저장하는 기술이다.

웹 스토리지는 Local storage와 Sesson storage가 존재한다.
두 storage는 아래의 공통점을 갖는다

• local 환경에 데이터를 저장
• key-value 형태로 저장
• 문자열 형태로 반환

웹스토리지는 개발자 도구 Application 탭에서 확인할 수 있다

로컬 스토리지(Local storage)

도메인 단위로 구분되며 활용된다

=> 도메인이 같다면 path가 다르더라도 데이터가 존재한다

브라우저를 종료해도 존재한다

 

사용방법 (API)

기본적으로 window.localStorage로 사용한다. window를 생략해 다음과 같이 사용할 수 있다

// 저장된 키/값 쌍의 개수
localStorage.length;

function exampleStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  return localStorage.length; // 3
}

// index에 해당하는 키를 가져옴
localStorage.key(index);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

세션 스토리지(Sesson storage)

세션 단위로 구분되며 활용된다

=> 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없음

 

세션이란?

: 사용자의 웹 페이지 접속 상태에 따른 단위

사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터 해당 웹 페이지 접속을 종료하는 시점 까지를 의미하는 단위

브라우저, 탭을 종료하면 영구히 삭제된다

 

사용방법 (API)

기본적으로 window.sessonStorage로 사용한다. window를 생략해 다음과 같이 사용할 수 있다.

// 저장된 키/값 쌍의 개수
sessionStorage.length;

// index에 해당하는 키를 가져옴
sessionStorage.key(index);

// 키로 부터 데이터 읽기
sessionStorage.getItem("key");

// 키에 데이터 쓰기
sessionStorage.setItem("key", value);

// 키의 데이터 삭제
sessionStorage.removeItem("key");

// 모든 키의 데이터 삭제
sessionStorage.clear();

 

참고

본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다

https://developer.mozilla.org/en-US/docs/Web/API/Storage

https://jh2021.tistory.com/13

https://untitledtblog.tistory.com/47