Window Storage

---

개발자도구의 Application 탭에서 스트리지 정보를 확인할 수 있다.

• Local Storage / Session Storage (key : value 의 형태로 문자, 숫자 데이터 저장가능)
• Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능)
• Cookies (유저 로그인정보 저장공간)
• Cache Storage (html, css, js, img 파일을 저장)

Local Storage / Session Storage

---

특징

• key : value 의 형태로 문자, 숫자값을 저장 가능하다.
• 5MB 까지 저장가능하다. (브라우저마다 차이가 있다.)

차이점

Local Storage는 브라우저를 껏다가 재접속 해도 데이터가 영구적으로 남고

Session Storage는 사라진다

사용법

localStorage.setItem('이름', 'kim') // 저장
localStorage.getItem('이름') // 사용
localStorage.removeItem('이름') // 삭제

수정은 데이터를 꺼내서 수정하고 다시 저장하며 된다.

array / object

배열/객체 타입의 자료를 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장한다. 그리고 자료의 손상이 일어나게 된다.

let arr1 = [1, 2, 3];
localstorage.setItem('키1', arr);
console.log(localStorage.getItem('키1');
// 1,2,3

그래서 JSON으로 바꾸면 자료의 손상 없이 문자 취급을 받아 로컬스토리지에 저장할 수 있다.

let arr2 = [4, 5, 6];
let tmp = JSON.stringify(arr2);
localStorage.setItem('키2', tmp);
console.log(localStorage.getItem('값2'));
// [1,2,3]

JSON으로 저장 했으니 문자열 데이터이기 떄문에,

데이터를 다시 array/object로 바꾸려면

JSON.parse()를 사용해야 한다.

let data = localStorage.getItem('키2');
data = JSON.parse(data);
console.log(data);
// (3)[4,5,6]

array/object를 JSON타입으로 변환하고 싶으면 JSON.stringify()

JSON타입을 array/onject로 변환하려면 JSON.parse()