Web Storage

Webstorage는 클라이언트(사용자)측에 이름:값 쌍의 데이터를 저장하는 두 가지 메커니즘을 의미합니다. 첫 번째는 localStorage, 두 번째는 sessionStorage입니다. WebStorage의 데이터는 쿠키와 다르게 HTTP 헤더를 통한 조작이 불가능하며 서버로 전송되지 않습니다. 또한 WebStorage는 도메인, 프로토콜, 포트로 구성된 origin으로 관리되어 도메인이나 포트가 동일해도 프로토콜이 다를 경우 해당 데이터에 접근할 수 없습니다.
(*프로토콜(Protocol)이란? 통신 프로토콜은 통신(데이터를 주고 받는)상호 간에 미리 약속된 규칙, 규약이다.)
이런 특징을 이용해 서버로 전송하지 않아도 되는 게시글 임시 저장이나 다크 테마 상태 저장 같은 개인에 맞춰진 UI 상태를 저장하기에 적합합니다.

WebStorage를 다루는 메서드는 다음과 같습니다.

• getItme(key): 키에 해당하는 값을 얻습니다. 해당하는 값이 없으면 null을 반환합니다.
• setItem(key, value): 키에 해당하는 값을 설정합니다.
• removeItem(key): 키에 해당하는 값을 삭제합니다.
• clear(): 저장된 모든 키-값 쌍을 제거합니다.
• key(index): index에 해당하는 키를 얻습니다.
• length: 저장된 항목의 개수를 얻습니다.

값은 항상 문자열이며 다른 타입의 값을 넣어도 문자열 형태로 타입이 변환되어 저장됩니다. 객체의 형태로 데이터를 저장하고 싶을 경우 JSON.stringify()와 JSON.parse()를 통해 저장할 수 있습니다.

localStorage와 sessionStorage의 차이

localStorage는 origin이 같을 경우 여러 탭과 창에서 공유됩니다. 또한 세션 이후에도 지속되는 저장소용으로 설계되어 컴퓨터를 종료하거나 브라우저를 종료하더라도 지속됩니다.
sessionStorage는 한 탭에서 페이지의 세션이 유지되는 동안 origin별로 스토리지를 관리합니다. 페이지가 열려 있는 동안이나 페이지 리로딩 혹은 복원 시에는 데이터가 유지되지만 다른 세션이ㅏㄴ 창이 종료될 경우 데이터에 접근할 수 없습니다. localStorage보다 좀 더 제한적으로 사용됩니다.