로그인 시스템을 개발할 때 토큰 값을 임시로 저장해두는 용도로 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
'JavaScript' 카테고리의 다른 글
Element.closest() (0) | 2021.05.24 |
---|---|
클래스 상속 (0) | 2021.05.23 |
fetch API (0) | 2021.05.21 |
바닐라 자바스크립트로 컴포넌트 만들기 -2 (0) | 2021.05.19 |
바닐라 자바스크립트로 컴포넌트 만들기 -1 (0) | 2021.05.17 |