Web Storage API 정리

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

 

Web Storage API

1. Key-value 페어 형태로 사용 가능하다.

2. 세션 스토리지와 로컬 스토리지가 있다.

3. 로컬 스토리지와 세션 스토리지는 서로 다른 스토리지 오브젝트를 사용한다. 

4. 키는 항상 string으로 처리된다. 

 

페이지 세션의 시간만큼 사용 가능한 세션 스토리지 기능이 존재한다. 탭이나 브라우저가 종료되기 전까지 유지 된다. 로컬 스토리지는 영속적으로 데이터가 저장된다. 브라우저 캐시를 지우거나 내부적으로 저장된 데이터를 날리는 경우 없어진다. 혹은 자바스크립트로 날릴 수도 있음. window.sessionStorage, window.localStorage로 사용한다. 

 

다음은 모두 동일한 표현이다. 

localStorage.colorSetting = "#a4509b";

localStorage["colorSetting"] = "#a4509b";

localStorage.setItem("colorSetting", "#a4509b");

 

단순 오브젝트와 연관된 pitfalls문제를 막기 위해 setItem, getItem, removeItem, Key, length 와 같은 함수를 사용하는 것을 권장한다.

 

스토리지는 오직 스트링 형태로 저장하는 것만 지원한다. 다른 타입을 원하는 경우 스트링으로 변경해서 저장해야 한다. 

 

const person = { name: "Alex" };

localStorage.setItem("user", person);

console.log(localStorage.getItem("user")); // "[object Object]"; not useful!

localStorage.setItem("user", JSON.stringify(person));

console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }

 

해당 두 함수를 통해 데이터를 날릴 수 있다. (같은 도메인 한정)

Storage.removeItem()

Storage.clear()

 

Storage Event

스토리지에서 변경사항이 생긴 경우 이벤트를 받아서 처리할 수 있다. (세션 스토리지에서는 처리되지 않음) 다른 도메인의 페이지에서는 해당 스토리지 오브젝트에 접근할 수 없다. 변경사항을 만드는 같은 페이지에서는 처리되지 않는다. 도메인 내에 다른 페이지의 경우에 동기화 처리에 사용할 수 있다.