브라우저에 데이터 저장하기 : WebStorage(localStorage와 SessionStorage) & Cookie #2

WebStorage의 API

- 두 객체 모두 동일한 메서드와 프로퍼티를 갖는다.

setItem(key, value) // 키-쌍을 보관
getItem(key) // 키에 해당하는 값을 받아온다.
removeItem(key) // 키와 해당 값을 삭제한다.
clear() // 모든 것을 삭제한다.
key(index) // 인덱스에 해당하는 키를 받아온다.
length // 저장된 항목의 개수를 받아온다. 

 

- 두 스토리지 객체는 setItem/getItem/removeItem 메서드를 지원하는 것으로 보아 Map과 유사하지만, 인덱스를 사용해 키에 접근하는 방식은 다르다고 볼 수 있다.

- 웹 스토리지 객체는 origin(domain/port/protocol)에 묶여 있다. (프로토콜과 서브 도메인이 다르면 데이터에 접근 불가)

- 따라서, origin이 같은 경우 데이터는 모든 탭과 창에서 공유되며, 브라우저나 OS가 재시작되더라도 데이터가 파괴되지 않는다. 즉, origin만 같다면, url 경로가 달라도 동일한 결과를 볼 수 있다.

localStorage에 test, testItem이라는 키값에 각각 숫자형, 문자형을 저장하고(하지만 사실상 키-값은 문자열로 자동 변환이 된다. WebStorage의 키값은 무조건 문자열이어야 하므로), 탭을 닫은 후, 새로 연 탭에서 각각의 키를 호출하면 제대로 저장된 값을 반환하는 것을 알 수 있다.

 

- 또한, localStorage는 일반 객체와 유사하게 다룰 수 있다.

localStorage.test = 2 // 키에 값 설정
delete localStorage.test // 키 삭제

- 웹 스토리지 객체는 iterable 객체가 아니므로 키를 순회할 때 배열처럼 다루는 트릭을 쓴다.

for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  console.log(`${key} : ${localStorage.getItem(key)}`)
}

// 또는

for (for key in localStorage) {
	console.log(key)
}

// 하지만 위 방법을 쓰면 getItem, setItem 같은 내장 필드까지 출력이 된다.

해당 창에서 확인할 수 있는 localStorage의 키를 순회해서 내놓는다. 티스토리 메인 화면에서 아래와 같이 작성한 코드를 실행하보면, 저장된 tistoryFingerprint 하나를 출력한 이후, 내장 메서드를 쭉 출력해준다.

 

hasOwnProperty나 Object.keys로 보완해 사용할 수 있다.

 

- 위에서 localStorage의 키-값은 문자열만 된다고 했지만, 사실 객체를 담을 경우가 많아서, 마찬가지로 JSON 이용해서 저장하고 꺼내쓰는 경우가 많다.

 

- sessionStorage는 localStorage에 비해 좀 더 제한적인 편이다. 예를 들어 현재 떠 있는 탭에서만(브라우저든 탭 브라우저든 현재의 컨텍스트 내에서) 데이터가 유지된다는 점 때문이다. 즉, 같은 페이지여도 탭이 다르면 각기 다른 탭에 저장이 된다. 그런데 하나의 페이지 내 여러 iframe이 있는 경우가 있을 수 있다. 이럴 때는 또 origin이 같다고 취급돼 서로 sessionStorage가 공유된다.

- sessionStorage는 또 페이지 새로고침 시 데이터가 사라지진 않지만, 탭이 닫히고 새로 열리면 사라진다. 즉, 탭에 종속적이다.

 

storage 이벤트

예를 들어 어떤 창에 글을 쓰다가 실수로 사용자가 창을 닫았지만, 다시 해당 페이지를 복구했을 때, 여전히 쓰던 문자가 남아있도록 하는 기능을 구현한다고 했을 때 storage 이벤트의 프로퍼티가 유용하게 쓰일 수 있다.

storage 이벤트는 웹 스토리지 객체의 데이터가 갱신될 때 실행된다.

key // 변경된 데이터의 키 (.clear()를 호출했다면 null일 것이다)
oldValue // 이전 값 (키가 새롭게 추가된 경우라면 null일 것이다)
newValue // 새로운 값 (키가 삭제된 경우라면 null일 것이다)
url // 데이터 갱신이 일어난 문서의 url
storageArea // 갱신이 일어난 웹 스토리지 객체 ex) localStorage or sessionStorage

 

- 이때 storage 이벤트는 해당 이벤트를 발생시킨 스토리지를 제외하고 스토리지에서 접근 가능한 Window 객체 전부에서 일어난다.

- 또한, event.url을 통해 데이터가 갱신된 문서의 URL을 알 수 있다.

- Storage 이벤트는 sessionStorage나 localStorage가 변경될 때 구분 않고 모두 발생하므로 event.storageArea는 스토리지 종류와 무관하게 실제 수정이 일어난 것을 참조한다.

- 위 특징을 이용해 모던 브라우저는 origin이 같은 창끼리 통신할 수 있으며, broadcast channel API를 통해 가능하다.(지원되는 모던 브라우저 확인 필요)

 

 

 

참고

JavaScript.Info