[HTML5] LocalStorage와 SessionStorage

HTML5에서는 클라이언트측에 저장하는 2개의 객체를 제공한다. 하나의 세션 단위로 데이터를 저장하는 SessionStorage와 만료 기간이 없는 LocalStorage가 있다.

사용법은 아래 코드를 참고하자.

- LocalStorage
    ```
    localStorage.setItem('foo', 'bar');
    localStorage.getItem('foo'); // "bar"를 출력
    localStorage.removeItem('foo'); // "foo" 키를 지운다.
    localStorage.clear(); // 모두 지운다.
    localStorage.length; // 저장된 키의 개수
    localStorage.key('bar'); // "foo"를 출력 -> 즉, 값으로 키를 찾음
    ```
- SessionStorage
    ```
    sessionStorage.setItem('foo', 'bar');
    sessionStorage.getItem('foo'); // "bar"를 출력
    sessionStorage.removeItem('foo'); // "foo" 키를 지운다.
    sessionStorage.clear(); // 모두 지운다.
    sessionStorage.length; // 저장된 키의 개수
    sessionStorage.key('bar'); // "foo"를 출력 -> 즉, 값으로 키를 찾음
    ```

[공통]

- key/value 모두 string으로 저장된다.

- setItem()은 기존 아이템이 있을 경우 덮어쓴다.

- getItem()은 값을 찾지 못할경우 에러를 발생하지 않고 null을 return한다.

[LocalStorage]

   - 프로토콜, 호스트, 포트 중 어느 하나라도 다르면 각각 별도의 공간에 데이터가 저장된다.

   - 디바이스마다 다르지만 대부분 Origin 당 약 5MB 정도를 저장할 수 있다. 문자열만 저장이 가능하며 2바이트 캐릭터(UTF-16)으로 저장된다. 5MB를 초과하면 QUOTA_EXCEEDED_ERR 오류를 발생하며 공간을 추가할 수 없다.

   - Safari에서는 Private Browsing 옵션을 켜는 경우에는 사용할 수 없다.

   - 사용자가 직접 데이터를 삭제하지 않는 이상 영구적으로 보관되며 만료 기간 또한 설정이 불가능하다.

   - localStorage는 동기적으로 작동하므로 스토리지에 값을 설정하거나 가져올 때에는 렌더링이 블락된다. 따라서 자주 많은 양의 데이터를 읽고 쓰거나, 1MB 이상의 큰 데이터를 쓰는 것을 피하는 것이 좋다.

   - 쿠키와 비교했을경우 클라이언트의 디바이스에 직접 저장되고 네트워크로는 전송되지 않으므로 네트워크 레벨에서는 안전하다고 볼 수 있다. 하지만 평문으로 저장하는 경우, 그 값이 그대로 노출되므로 보안에 취약하다.

[SessionStorage]

- 위의 LocalStorage와 비슷하다. 하나 다른점은 SessionStorage는 세션이 종료되면(즉 웹 브라우저를 닫을 경우) 클라이언트에 대한 정보를 삭제하므로 보안이 필요한 데이터는 SessionStorage가 적합할 것 같다.