localStorage, sessionStorage

Web Storage 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해 준다.

개발자 도구(F12)에 Application 탭에 들어가면 Storage를 확인할 수 있다.

이 두 Storage는 같은 API를 가지며, key-value는 반드시 문자열이어야 한다.

 

쿠키와는 다르게 Web Storage 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 그 이상의 Web Storage 객체를 저장할 수 있도록 해준다.

쿠키와 또 다른 점은 서버가 HTTP Header를 통해 Storage 객체를 조작할 수 없다는 점이다. Web Storage 객체 조작은 모두 자바스크립트 내에서 수행된다.

 

Web Storage 객체는 도메인, 프로토콜, 포트로 정의되는 origin에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

 

두 Storage의 차이점은 localStorage는 영구적인(삭제 관련 관리가 필요) 반면 sessionStorage는 새로고침 시에는 문제가 없지만 브라우저를 종료하게 되면 사라진다. 또한, 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장이 된다.

 

그렇기 때문에 보통 sessionStrorage보다는 localStorage를 더 선호하는 편이다. 거의 비슷한 성격을 가지기 때문에 localStorage를 중점적으로 포스팅하고자 한다.

 

 - API

 1) setItem(key, value) : key-value 쌍을 보관

 2) getItem(key) : key에 해당하는 value를 가져옴

 3) removeItem(key) : 해당 key와 value를 삭제

 4) clear() : Storage 내 모든 데이터 삭제

 5) key(index) : 인덱스에 해당하는 key를 가져옴

 6) length : 저장된 항목의 개수를 가져옴

참고 : Object.keys(localStorage)를 사용하여 Storage key 전체를 얻을 수 있음

 

 

- 사용 예시

1) Storage key-value 순회 하기

Storage 객체는 iterable 객체가 아니다.

let keys = Object.keys(localStorage); // localStorage의 key값을 가져온다.
for(let key of keys) {
  console.log(`${key}: ${localStorage.getItem(key)}`); // key와 value 출력
}

 

 

2) value를 List or 객체 형식으로 사용하기

JSON.parse와 JSON.stringify를 이용한다.

let temp = localStorage.getItem("myLists"); // localStorage key로 value를 가져와 temp에 할당
temp = JSON.parse(temp); // JSON.parse를 이용하여 string 형식을 객체나 List 형식으로 만듦

let object = {
  id: "id"
  name: "name"
};

temp.push(object); // object 데이터 추가 

// 추가된 temp를 JSON.stringify를 통해 string 형식으로 localStorage에 저장
localStorage.setItem("myLists", JSON.stringify(temp));