local/session Storage

로그인 시스템을 개발할 때 토큰 값을 임시로 저장해두는 용도로 loaclStoarge의 set, get기능을 급해게 검색해서 썼는데

개념을 확실히 잡고 가려고 정리

공통점

두 스토리지는 동일안 메서드와 프로퍼티를 제공하고 있다

• setItem(key, value) – (키,값) 쌍을 보관
• getItem(key) – 키에 해당하는 값을 받아옴
• removeItem(key) – 키와 해당 값을 삭제
• clear() – 스토리지 초기화
• key(index) – 인덱스에 해당하는 키를 받아옴
• length – 스토리지의 길이

차이점

localStorage

같은 도메인의 경우 데이터가 모든 창과 탭에서 공유된다

브라우저나 OS를 껏다 켜도 데이터가 사라지지 않는다

session Storage

현재 떠 있는 탭 내에서만 데이터가 유지된다

페이지를 새로고침할 땐 데이터가 유지되지만 탭을 껏다 켜면 데이터는 초기화된다

데이터는 항상 문자열

Storage의 키와 벨류는 항상 문자열이어야 한다

객체를 저장할 경우 다음과 같이 불러와진다

sessionStorage.user = {name: "John"};
console.log(sessionStorage.user); // [object Object]

JSON을 이용하면 객체 저장 가능

JSON 형태로 저장한 뒤에 불러와서 파싱하면 객체 형태로 얻을 수 있다

sessionStorage.user = JSON.stringify({name: "John"});

// 잠시 후
let user = JSON.parse( sessionStorage.user );
console.log( user.name ); // John