FrontendJavascript

Javascript Storage API

JavaScript localStorage와 sessionStorage API

HTML5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 javascript의 새로운 localStorage와 sessionStorage API를 제공한다.
이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션(브라우저 종료)이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점이다.

스토리지 API

특정값의 데이터를 저장하기 위한 방법으로 메소드를 사용하거나 리터럴하게 사용하는 두 가지 방법이 가능하다.
localStorage와 sessionStorage API는 동일하니 여기선 localStorage 코드를 샘플로 예를 들어 보겠다.

  • localStorage.setItem(key, value) //데이터 저장
  • localStorage.getItem(key) // 데이터 가져오기
  • localStorage.remove(key) // 데이터 삭제

스토리지 데이터 저장

1
2
localStorage.test = '123';
localStorage.setItem('test', '123');

스토리지 데이터 가져오기

1
2
localStorage.test;
localStorage.getItem('test');

스토리지 데이터 삭제

1
2
localStorage.removeItem('test'); // localStorage 객체에서 원하는 값을 지우는 방법
localStorage.clear(); // 한번에 저장된 모든 값을 삭제하는 방법

참조

공유하기