#import
localStorage와 sessionStorage[JAVASCRIPT.INFO]
Window.sessionStorage[MDN Web Docs]
Local Storage vs Session Storage vs Cookies
[코딩하는 폴제트]
localStorage
localStorage는 sessionStorage와 함께 HTML5에 추가된 저장소이다.
간단한 데이터들을 Key, Value 형태로 저장할 수 있다.
localStorage와 sessionStorage의 차이는 데이터의 영구성이다.
localStorage의 데이터는 사용자가 브라우저에서 지우지 않는 이상 계속해서 남아있다.
저장된 데이터는 브라우저 세션간 공유 된다.
그래서 보통 지속적으로 필요한 데이터(자동 로그인 여부 등)는 localStorage에 저장하고,
일시적으로 필요한 정보(일회성 정보 등)은 sessionStorage에 저장한다.
Document 출처의 Storage 객체에 존재한다.
window 객체에 포함
localStorage에 저장되는 값은 문자열, Boolean, Number, null, undefined 등을 저장할 수 있지만,
모두 문자열로 변환되어 저장된다.
Key도 문자열로 변환
sessionStorage
localStorage는 sessionStorage와 비슷하지만,
localStorage의 데이터는 만료되지 않고,
sessionStorage의 데이터는 페이지 세션이 끝나는 시점(페이지를 종료할 때) 데이터가 삭제된다.
vs Cookie
localStorage와 sessionStorage가 나오기 전 부터 Cookie라는 저장소가 존재했다.
Cookie는 만료 기한이 있는 key-value 저장소이다.
// _ga=GAX.X.XXXXXXXXXXX; _gid=GAX.X.XXXXXXXXX; _gat=1
document.cookie;Cookie의 경우 httponly Flag를 사용할 경우 javascript 단에서 쓸 수 없게 제한할 수 있다.
Cookie는 Server와 Client의 지속적인 데이터 교환을 위해 만들어 졌기 때문에,
서버로 Request 마다 계속 전송된다.
Cookie의 용량 제한은 4kb로 불필요한 정보가 Cookie로 저장될 경우,
매 Request마다 4kb 용량 안에서 지속적으로 요청되게 된다.
이를 해결하기 위해 지속적으로 포함되지 않아도 되는 데이터들을
localStorage, sessionStorage에 저장하기 위해 Storage가 HTML5에 추가되었다.
Cookie와 또 다른 점은 서버가 HTTP Header를 통해 스토리지 객체를 조작할 수 없다.
Storage 객체는 모두 javascript에 의해서 수행
Storage 객체는 Domain, Protocol, Port로 정의되는 Origin에 묶여있다.
Protocol과 sub domain이 다르면 데이터에 접근할 수 없다.
methods
localStorage와 , sessionStorage는 setItem(), getItem(), removeItem(), clear() 네 가지 method를 사용할 수 있다.
둘의 차이는 localStorage는 영구적으로 보관된다는 점이다.
사용자가 지우지 않는 이상 브라우저에 계속 저장
sessionStorage는 Window나 브라우저 탭을 닫을 경우 제거
// Storage에 저장
window.localStorage.setItem("key-gillog", "value1");
// Storage에서 조회
// value1
window.localStorage.getItem("key-gillog");
// Storage에서 삭제
window.localStorage.removeItem("key-gillog");
// null(removed)
window.localStorage.getItem("key-gillog");
// 전체 삭제
window.localStorage.clear();Object 저장
Storage에 Value는 toString() method가 호출된 형태로 저장된다.
Object 형태로 저장하기 위해서는 Key-Value 형식을 풀어서 여러 번 나누어 저장 하거나,
Object 형식으로 한번에 저장하기 위해서는 JSON.stringify를 사용해 Object 형식 그대로를 문자열로 변환해 저장 한 후,
출력할 때 JSON.parse를 사용하는 방법이 있다.
const obj = { gil: 'log' };
window.localStorage.setItem("object-key-gillog", JSON.stringify(obj));
// { gil: 'log' }
JSON.parse(window.localStorage.getItem("object-key-gillog");