최근에 Javascript를 통해 단순한 애플리케이션들을 구현을 해봤는데 정보를 저장해야 하는 기능에서 localStorage와 sessionStorage를 두고 무엇을 쓰면 좋을지 정확히 판단을 할 수 없었다. 따라서 이참에 제대로 알고 어떤 상황에서 무엇을 쓰면 좋을지 공부를 하기로 결심했다.

WebStorage

localStorage와 sessionStorage는 브라우저에서도 정보를 키-값 형태(이때 저장되는 키와 값은 반드시 문자열이어야 한다)로 저장할 수 있는 웹 스토리지 객체이다. 웹 스토리지의 제한 용량은 5MB 이상(브라우저마다 다를 수 있음)이며 저장할 데이터를 서버에 전송할 필요가 없는 경우 유용하다. 웹 스토리지는 데이터의 지속성에 따라 localStorage, sessionStorage 둘로 나뉜다.

localStorage, sessionStorage 이 두 읽기 전용 속성을 사용하면 window의 오리진의 Storage 객체에 접근할 수 있다.

Storage 객체는 다음과 같은 메서드를 갖는다.

storage.length: 키-값 쌍의 수를 반환한다.
storage.key(index): 인덱스(index)에 해당하는 키를 받아오며 length 보다 크거나 같으면 null을 반환한다.
storage.getItem(key): 키에 해당하는 값을 반환한다. 키가 존재하지 않는 경우 null을 반환한다.
storage.setItem(key, value): 키-값 쌍을 생성한다.
storage.removeItem(key): 키와 해당 값을 삭제한다.
storage.clear(): 모든 키-값을 삭제한다.

localStorage

localStorage의 특징

오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
브라우저나 OS가 재시작하더라도 데이터가 삭제되지 않는다.

오리진(origin): 프로토콜 + 도메인 + 포트
예) https://www.google.com/PORT

사용해보기

아래의 코드를 실행해본다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script>
      localStorage.setItem('test', 'hi');
			console.log(localStorage.getItem('test'));
    </script>
  </body>
</html>

개발자 도구의 Application 탭에 localStorage와 sessionStorage를 볼 수 있다.

위의 코드는 localStorage에 키-값을 저장했기에 다음과 같이 localStorage에 우리가 의도한 값이 저장돼있음을 볼 수있다.

콘솔창에서도 우리가 저장한 키를 통해 매핑된 값을 출력하는 것을 볼 수 있다.

일반 객체처럼 사용하기

localStroage의 키와 값을 설정할 때 일반 객체와 유사한 방법을 사용할 수 있다.

// hello라는 키와 2라는 값을 저장
localStorage.hello = 2;

// hello 키에 해당하는 키와 값 삭제
delete localStorage.hello;

하지만 위의 방법처럼 사용하는 것은 다음과 같은 이유로 좋지 않다.

length, toString, localStorage 의 내장 메서드를 키로 설정할 수 있다. 이렇게 되면 getItem, setItem 은 정상 작동해도, 일반 객체처럼 다룰 때 에러가 발생할 수 있다.
```
let key = 'length'
localStorage[key] = 5; // TypeError: Cannot assign to read only property 'length'...
```
데이터를 수정하면 storage 이벤트가 발생하는데, 이 이벤트는 localStorage를 객체처럼 접근할 땐 일어나지 않는다.

키 순회하기

localStorage 는 iterable 객체는 아니지만 length 프로퍼티를 가지고 있으며 다음과 같이 순회할 수 있다.

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

객체 저장하기

locaStorage 의 키와 값은 반드시 문자열이어야 한다. 따라서 객체를 그냥 저장한다면 원하는 대로 저장되지 않는다.

localStorage.setItem('test', { a: 1 });

따라서 JSON.stringify() 를 사용하여 객체를 저장한 후 값을 가져올 때는 JSON.parse() 를 사용한다.

localStorage.setItem('test', JSON.stringify({ a: 1 }));

console.log(JSON.parse(localStorage.getItem('test')));

sessionStorage

sessionStorage 특징

현재 떠있는 탭 내에서만 유지된다.
- 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다.
- 하나의 탭에 여러 개의 iframe이 있는 경우 sessionStorage가 공유된다.
페이지를 새로 고침해도 데이터는 사라지지 않지만 탭을 닫고 새로 열 때는 사라진다.

sessionStorage의 사용방법은 localStorage와 동일하다.