LocalStorage / SessionStorage

 

업무를 진행하다보니 어떤 특정값은 localStorage 에 저장하고 꺼내와서 쓰고

어떤값은 sessionStorage에 저장하고 꺼내쓰고 했다.

둘의 차이점을 명확하게 알고싶어 포스팅하게 되었다.

 

 

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다.
좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage 와 sessionStorage API를 제공한다.

Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.

그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.

 

 

로컬 저장소를 웹에서 사용할 경우 가장 많이 사용되는 방법은 쿠키(Cookie)  그리고 로컬스토리지(Local Storage)  다.

이때 쿠키와 로컬스토리지는 둘 다 다른 목적을 가지고 있기 때문에 무엇이 옳다고 하기는 애매하고,
각각의 쓰임새에 따라 적합한 방법을 선택해야 한다.

 

Web Storage (local + session storage) 와 Cookie의 차이점

 

1. 제한
cookie - 용량제한, 시간제한, 갯수제한 존재
webstorage - 용량제한만 존재

2. 시간제한 설정
cookie - 시간제한 설정가능
webstorage - 시간제한 설정 불가능

3. 데이터형
cookie - 문자열만 저장가능
webstorage - javascript 객체 저장가능

4. 데이터 전송
cookie - 모든 쿠키를 전송해야함, cookie를 가공함으로써 발생하는 side effect존재
webstorage - 개발자가 선택해서 전송할 수 있고 가공할 수도 있음

5. 세션의 정의
cookie - 같은 브라우저면 다른 탭이나 다른 창(프로세스)일지라도 같은 세션이라고 정의
webstorage - 같은 브라우저일지라도 sessionStorage의 경우 다른 탭이면 다른 세션이라고 정의

6. 이벤트
cookie - 이벤트 없음
webstroage - 이벤트 존재

 

 

 

LocalStorage / SessionStorage 특징

 

[ localStorage ]

• 로컬에 도메인 별로 지속되는 storage
• localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.
• 값을 지우려면 직접 지워줘야한다.

 

[ sessionStorage ]

• 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage
• 세션의 종료시 죽음을 맞이한다.

 

 

 

크롬 개발자 도구에서 webStorage 확인하기

 

 

 

localStorage 사용법 ( sessionStorage도 비슷)

 

window.localStorage.setItem('test', '123');

window.localStorage.getItem('test');

 

// 인자를 안주면, 전체 값 받아오기
window.localStorage.getItem();

 

// 항목 갯수 반환
window.localStorage.length

 

// 인자(인덱스)에 해당하는 key의 value값을 받아온다.
window.localStorage.key(0);

 

// localStorage 객체에서 원하는 값을 지우는 방법
window.localStorage.removeItem('test');

 

// 한번에 저장된 모든 값을 삭제하는 방법
window.localStorage.clear();

 

// 전체 키-값을 얻을 수 있다
let keys = Object.keys(localStorage);

for(let key of keys) { alert(${key}: ${localStorage.getItem(key)}); }

 

// JSON을 사용하면 배열과 객체를 저장할수 있다.

localStorage.user = JSON.stringify({name: "ssoy"});

let user = JSON.parse( localStorage.user );

alert( user.name ); // ssoy

객체저장

 

 

let arr = [1,2,3,4,5]

window.localStorage.setItem("data", JSON.stringify(arr));

let output = window.localStorage.getItem("data");

let arr = JSON.parse(output);

console.log(arr)// [1,2,3,4,5]

 

배열저장

 

 

 

 

 

출처 https://velog.io/@ejchaid/localstorage-sessionstorage-cookie의-차이점
https://inpa.tistory.com/entry/JS-📚-localStorage-sessionStorage