로컬 스토리지와 세션 스토리지는 HTML5 부터 추가된 저장소로 key-value 형태의 간단한 값을 저장할 수 있다.
결론부터 간단히 말하자면 로컬 스토리지와 세션 스토리지의 차이점은 영구성이다!
다만 비밀번호와 같은 중요한 정보는 절대 저장하지 말것 ! 다 털린당.
태초에,, 로컬스토리지와 세션 스토리지가 나오기 전에 브라우저에서 저장소 역할을 하는 쿠키가 있었다. 쿠키는 만료 기한이 있는 key-value 형태의 저장소이다. 쿠키는 4kb 의 용량 제한이 있고 서버요청시 마다 서버로 쿠키가 같이 전송된다.
왜 쿠키는 서버 요청마다 같이 갈까?
HTTP 요청은 stateless 형태로 요청 자체만으로는 그 요청이 누구에게 오는지 알 수 없다. 그렇기 때문에 쿠키를 같이 보냈고 서버는 쿠키를 읽어 보내는 사람을 파악한다. 쿠키는 처음부터 서버와 클라이언트의 통신을 위해 만들어진 존재이기 때문에 계속해서 서버로 보내지는 것이었다.
용량을 거의 다 채운 쿠키가 있다면 요청마다 4kb 의 데이터가 이동한다. 이 때 요청에 필요하지 않은 데이터가 같이 이동한다면 그만큼의 데이터 낭비가 일어나게 된다. 이러한 데이터들을 로컬/세션 스토리지에 저장하면 된다.
2개의 스토리지는 모두 Window 객체 안에 들어있다. Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재하고 도메인 별 용량 제한도 있다. 모바일은 2.5mb, desktop은 5~10mb.
📌 로컬 스토리지
사용자가 지우지 않는 이상 계속 브라우저에 남아있다. 자동로그과 같이 지속적으로 필요한 데이터는 로컬스토리지에 저장한다.
window.localStorage 에 위치한다. boolean, num, undefined, string 값 등을 저장할 수 있지만 반환 될 때는 string으로 변환된다.
//저장
localStorage.setItem(키, 값)
// 조회
localStorage.getItem(키)
//삭제
localStorage.removeItem(키)
//전체 비우기
localStorage.clear()객체는 제대로 저장되지 않는다.
객체 로컬 스토리지에 저장하는 법
객체는 JSON.stringify 를 통해 저장하고 조회할 수 있다.
//객체 저장
localStorage.setItem('object', JSON.stringify({a:'b'}));
//객체 조회
JSON.parse(localStorage.getItem('object'));📌 세션 스토리지
윈도우나 브라우저 탭을 닫으면 제거된다. 잠깐동안 필요한 정보(일시적인 로그인)는 세션스토리지에 저장
window.sessionStorage 에 위치한다. 로컬스토리지와 사용방법은 같다. 다만 데이터가 영구적으로 저장되지 않는다. 비로그인 장바구니와 같은 경우 세션 스토리지에 저장하면 좋다.
sessionStorage.setItem(키, 값);