[browser] 브라우저의 Storage

브라우저에는 자바스크립트로 조작이 가능한 저장소가 여럿 있습니다.

그중에서도 단연 자주 사용되는 것은 localStorage 와 sessionStorage 인데요.

사실 sessionStorage 는 이후에 서술할 몇가지 이유로 잘 사용되지 않기는 합니다.

 

앞서 포스팅에서 쿠키와는 다른 용도로 사용됩니다.

쿠키는 http 헤더에 함께 전달하는 용도로써, 키당 최대 4kb 용량과 최대 20개의 제약이 있습니다.

반면에 이 두 storage 는 최소 2MB 이상을 저장할 수 있도록 합니다.(최대값은 브라우저별로 상이합니다)

또한 자바스크립트 내에서만 조작가능하고, 오리진(protocal+domain+port) 별로 구분되어 접근가능한 특징이 있습니다.

두 storage 는 동일한 기능을 가지고있습니다. API 도 같구요. 하지만 핵심적으로 라이프사이클과 공유범위가 다릅니다.

 

❗️ key, value 는 문자열만 가능합니다. 객체는 모두 .toString() 으로 저장됩니다.

LocalStorage

- 오리진이 같은 경우 모든 탭과 창에서 공유됩니다.

- 브라우저나, OS 가 재시작 되더라도 데이터가 파괴되지 않습니다.

// CREATE
localStorage.setItem('name', 'kong');

// READ
console.log(localStorage.getItem('name')); // kong
console.log(localStorage.name); // kong (객체로 접근)
console.log(localStorage['name']); // kong (객체로 접근)
console.log(localStorage.key(0)); // name

// REMOVE
localStorage.removeItem('name'); // remove key
localStorage.clear(); // remove all
delete localStorage.name; // kong (객체로 접근)

// READ
console.log(localStorage.getItem('name')); // null

 

- 생성,조회,삭제는 모두 일반 Object 처럼 접근이 가능합니다. 이는 하위호환을 위해 남아있는 것인데, 내장 프로퍼티와 겹치는 이름의 키를 덮어쓰게 될 우려가 있고, 데이터 수정시 storage 이벤트가 발생하는데, Object 처럼 접근하면 발생하지 않습니다.

 

예를 들면 length 라는 프로퍼티를 덮어쓰게 될 수 있습니다. (바로 에러가 발생합니다)

const key: string = 'length';
localStorage[key] = 'kong'; // Error
console.log(localStorage.length);

 

키 순회

[length 와 .key(index) 메서드 사용]

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

 

[for..in 문법사용]

단, 상속받는 메서드들을 제외하기 위해서 hasOwnPorperty 로 한번 체크합니다.

for (let key in localStorage) {
  if (!localStorage.hasOwnProperty(key)) {
    continue;
  }
  console.log(key);
}

 

[Object.keys() 로 key 추출 하기]

const keys = Object.keys(localStorage);

for (let key of keys) {
  console.log(key);
}

 

SessionStorage

localStorage 와 제공하는 프로퍼티, 메서드는 모두 같습니다.

 

- 같은 오리진이더라도 다른 탭이라면, 서로 다른 저장소로 인식합니다.(탭 한정된 저장소)

- 하지만 하나의 탭에 iframe 이 있는 경우, 동일 오리진으로 취급되기 때문에 공유됩니다.

- 새로고침시 데이터가 유지되나, 탭을 닫으면 사라집니다.