localStorage와 sessionStorage

localStorage, sessionStorage는 무엇일까?

- 정의

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값(key-value) 쌍을 저장할 수 있게 해줍니다.

 

 

- localStorage vs sessionStorage

이 두개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있습니다.

세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지않습니다.

 

localStorage

localStorage는 페이지를 새로고침하거나 심지어 다시 실행하더라도 데이터가 사라지지 않고 남아있지만 sessionStorage는 페이지를 새로고침할때는 데이터가 남아있지만 다시 실행한다면 데이터가 사라집니다.

localStorage는 오리진(domain/port/protocol)이 같은경우 모든 탭과 창에서 공유되며 

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

 

sessionStorage

sessionStorage는 새로고침에는 데이터가 사라지지않지만 현재 탭에서만 데이터가 유지되고 탭을 껐다키면 데이터가 사라집니다. 

단 하나의 탭에 여러개의 iframe이 있는 경우 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됩니다.

 

 

 

 웹 스토리지를 사용하는 이유

쿠키를 사용하지 않고 웹 스토리지 객체를 사용하는 이유는 다음과 같습니다.

 - 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다는 장점이 있습니다.

 - 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.

 - 쿠키와 다르게 서버가 HTTP헤더를 통해 스토리지 객체를 조작할 수 없습니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서만 수행됩니다.

 

 

 특징

 - map과의 유사점

두 스토리지 객체는 map과 같이 setItem, getItem, removeItem을 지원하지만 인덱스를 사용해 키에 접근할 수 있다는 차이점이 있습니다.

 - 문자열만 사용가능 

local Storage의 키와 값은 반드시 문자열이어야합니다. 숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환되며 객체를 사용하기 위해선 JSON.stringify를 사용합니다

 

 

local Storage, session Storage 메소드

(두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.)

 - setItem(key,value)

    : 키-값 쌍을 보관합니다
 - getItem(key)

   : 키에 해당하는 값을 받아옵니다.

 - removeItem(key)

   : 키와 해당하는 값을 삭제합니다.

 - clear()

   : 모든 것을 삭제합니다

 - key(index)

   : 인덱스에 해당하는 키를 받아옵니다.

 - length

   : 저장된 항목의 개수를 얻습니다.

 

 

localstorage, sessionStorage 확인 방법

 - f12(개발자도구) -> application탭 -> Storage -> Local Storage, Session Storage

 

 

 

Reference

• https://ko.javascript.info/localstorage   
• https://www.daleseo.com/js-web-storage/