Storage

2023.06.15

1. Local Storage

1. 특징

1. key, value 기반으로 Local에 데이터를 저장할 수 있다.

2. 도메인 기반으로 Storage가 생성이 된다.

도메인만 같다면, 여러탭 내에서 같은 Storage가 공유 된다.

3. 삭제하거나 Storage를 날리지 않는 한 삭제되지 않는다.

4. localStorage는 string만 넣을 수 있기 때문에, JSON.stringify로 넣고 JSON.parse로 꺼낸 값을 파싱해서 쓰는 것이 좋다.

const user = {
  name: 'jiyoon',
  age: '25',
  hobbies: ['music', 'coding']
}
// 저장
localStorage.setItem('user', JSON.stringify(user));
// 불러오기
const storedName = JSON.parse(localStorage.getItem('name'));

2. 값 저장 방법

// window 생략 가능
// 1
window.localStorage.name = 'jiyoon'
// 2
localStorage['name'] = 'jiyoon'
// 3 ->  권장
localStroage.setItem('name', 'jiyoon')
// (property를 수정하는 식으로 하면 length, toString 같은 내장 함수들을 덮어 씌울 수 있다!)

3. 보편적인 저장, 불러오기, 삭제

// window 생략 가능
// 저장 setItem
localStorage.setItem('name', 'jiyoon');
// 불러오기 getItem
const storedName = localStorage.getItem('name');
// 삭제하기 removeItem
localStorage.removeItem('name');
// 전체 삭제하기 clear
localStorage.clear();

2. Session Storage

1. 특징

1. 전체적으로 Local Storage와 같다.

2. 브라우저를 닫으면 저장된 내용이 초기화 된다.

2. 구현

localStorage => sessionStorage로 대체