JavaScript 웹 스토리지 API localStorage sessionStorage

🗓2020년 03월 05일 ∙ 🖊TutorialPost ∙ ⏳2분

웹 스토리지 API는 브라우저에 데이터 저장하고 조회하기 위해 사용되며, localStorage 및 sessionStorage가 있습니다. localStorage 및 sessionStorage는 html5에 추가된 데이터 저장 api이며 이전에는 쿠키 등을 이용해 사용자 데이터를 저장했습니다. 지금은 쿠키, 세션, 스토리지 등 여러 방법이 각각의 목적에 맞게 혼용되고 있으며, 각각에 대해 간단하게 확인해 보겠습니다.

쿠키(cookie)

  • HTML5 이전에 브라우저 내에 정보를 저장하기 위한 방법.
  • 보안에 취약, 도메인에 페이지를 요청할 때마다 쿠키정보가 서버로 전송된다.
  • 많은 양의 데이터를 저장할 수 없다.

세션(session)

  • 쿠키의 취약한 보안을 어느정도 해결한 방법.
  • 사용자 브라우저에의 쿠키에는 session id만 저장되고, 실제 데이터는 서버에 저장하는 방법.

sessionStorage

  • 웹 브라우저 탭을 종료하면 데이터가 사라지게 됩니다. 브라우저 탭이 열려 있는 동안만 데이터가 유효.
  • 사용자의 로그인 여부, 사용자의 위치 데이터, 개인적인 정보 등을 저장하는 용도로 사용.

localStorage

  • 웹 브라우저의 창을 닫아도 데이터가 보존되는 저장소.
  • 열려있는 모든 창이 스토리지의 데이터를 공유한다.

주 사용 용도

  • 어느정도 간격을 두고 변경되는 데이터
  • 오프라인 형태로 저장될 때 유용한 데이터
  • 사용자가 나중에 다시 방문했을 때 사용할 수 있는 데이터
  • 환경 설정 데이터

sessionStorage 및 localStorage

HTML5에서 제공되는 localStorage 객체와 sessionStorage 객체의 사용법을 확인해 보겠습니다.

  • 브라우저는 저장소 객체에 도메인당 5mb의 공간을 할당합니다.
  • 저장되는 데이터는 JSON 객체 형태로 저장됩니다.
  • 데이터의 저장 및 조회는 동기 방식으로 처리됩니다.
  • 따라서 대량의 정보를 처리하려고 하면 사이트가 느려질 수 있습니다.
  • 동일 오리진 정책 - 각각의 페이지는 같은 도메인에 저장된 데이터만 액세스가 가능합니다. 즉 다른 도메인에 저장된 정보는 조회할 수 없습니다.

저장소 API

속성

  • length - 저장된 키의 개수

메서드

  • setItem(key, value) - 저장소 객체에 데이터를 저장, 새로운 키/값 쌍을 생성한다.
  • getItem(key) - 저장소 객체에서 데이터를 가져온다.
  • removeItem(key) - 키와 값을 제거한다.
  • clear() - 객체에 저장된 모든 값을 제거한다.
// 저장하기
localStorage.setItem("age", "12");
localStorage.setItem("name", "alice");
localStorage.age = 12;
localStorage.name = "alice";

// 가져오기
var age = localStorage.getItem("age");
var name = localStorage.getItem("name");
var age = localStorage.age;
var name = localStorage.name;

// 저장된 아이템의 갯수
var count = localStorage.length;

예시 - 로컬 스토리지에 데이터 저장하기 / 조회하기

// 로컬 스토리지에 데이터 저장하기
var name = document.getElementById("name");
name.adddEventListener("click", fuction() {
  var data = { name: "alice" }
	localStorage.setItem('name', JSON.stringify(data));
});

// 저장된 데이터 가져오기
var data = JSON.parse(localStorage.getItem('name'));
console.log(data); // "alice"
SHARE