[Web] sessionStorage vs localStorage

sessionStorage와 localStorage의 차이가 있지만 일단 이 두 가지는 Web Storage라는 개념을 통해서 시작됩니다. 

 

Web Storage와 Web Storage API

Web Storage는 웹 브라우저 내에 직접 데이터를 저장하는 공간을 말하며 Web Storage API를 활용해 이 저장소를 컨트롤 할 수 있다. Web Storage는 5MB의 저장공간을 사용할 수 있다. Web Storage는 origin(domain + protocol)마다 저장소를 할당합니다.

 

Web Storage는 두가지 저장소 객체를 제공합니다.

sessionStorage 객체와 localStorage 객체입니다.

출처: https://caniuse.com/?search=web%20storage

 

sessionStorage

sessionStorage는 세션마다 별도의 저장소를 만들어 사용합니다. 브라우저의 각 탭마다 별도의 세션을 연결하기 때문에 탭마다 별도의 저장소를 사용하게 됩니다.

저장소끼리 데이터가 공유되지 않으며 브라우저/탭이 종료되면 데이터는 모두 사라집니다.

 

localStorage

localStorage는 origin(domain + protocol)을 기준으로 생성된 저장소는 브라우저 탭이 다르거나 브라우저가 종료되어도 데이터가 유지됩니다.

 

용도

Storage의 특성에 따라 이용할려는 데이터를 저장합니다.

 

예를 들어 자동로그인 기능을 만들 때도 브라우저 탭이 유지되면서 새로고침 되거나 타 사이트에 이동했다가 돌아왔을 때만 유지하고 싶다면 sessionStorage에 정보를 저장하면 됩니다.

 

하지만 브라우저의 여러 탭에서 동시에 로그인을 유지하고 싶을 때나 브라우저가 꺼졌다가 다시 열었을 때도 로그인을 유지하고 싶다면 localStorage에 정보를 저장해야 합니다.

 

사용법

sessionStorage/localStorage 속성이나 메소드를 이용하여 저장소를 컨트롤 할 수 있습니다.

속성

[sessionStorage/localStorage].length

sessionStorage.length
// return 데이터 개수 number

 

메소드

[sessionStorage/localStorage].setItem(keyName, keyValue)

key: string, number, 소숫점 입력 가능

value: string, number, 소숫점 입력 가능

저장값은 모두 string 타입으로 변형되어집니다.

// 예) sessionStorage
sessionStorage.setItem('color', 'black');

 

Chrome 개발자 도구 Application 탭에서 확인

 

 

[sessionStorage/localStorage].key(n)

입력 파라미터 n번째 항목 키를 반환합니다.

sessionStorage.key(3)
// key index에 대응하는 value 반환
// 예) "1"

 

[sessionStorage/localStorage].getItem(keyName)

입력 파라미터 key 이름에 대응하는 value를 반환합니다.

key: string, number, 소숫점 입력 가능

sessionStorage.getItem(1);
// "0.11123" 반환
sessionStorage.getItem("color");
// "black" 반환

 

[sessionStorage/localStorage].removeItem(keyName)

입력 파라미터 key 이름에 대응하는 데이터를 삭제합니다.

sessionStorage.removeItem('1');
sessionStorage.getItem('1');
// null 반환

 

[sessionStorage/localStorage].clear()

Storage 데이터를 모두 삭제합니다.

sessionStorage.clear();

 

References

MDN: developer.mozilla.org/ko/docs/Web/API/Storage

CanIuse: caniuse.com

TCPSchool: tcpschool.com/html/html5_api_webStorage