[코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)

브라우저 안에 유저 몰래 데이터를 저장할 수 있다.
F12 개발자 도구에서 Application(애플리케이션) >  Storage(저장용량) 카테고리를 보자.

---

1. Local Storage

• key : value 형태로 데이터를 저장할 수 있다.
• 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능)
• 사이트를 재접속해도 유지된다.

2. Session Storage

• key : value 형태로 데이터를 저장할 수 있다.
• 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능)
• 사이트를 나가면 삭제된다.

3. IndexedDB

• 구조화된 대용량데이터를 저장한다.

3. Cookies

• 유저의 인증정보(로그인정보 등)를 저장한다.

4. Cache Storage

• html css js 파일을 저장한다.

---

Local Storage 사용법

localStorage.setItem('이름', 'Noran') // 자료 저장하는법
localStorage.getItem('이름') // 자료 꺼내는법
localStorage.removeItem('이름') // 자료 삭제하는법

• 수정하려면 꺼내서 수정하고 다시 저장한다.
• 앞을 sessionStorage로 바꾸면 session storage에 저장할 수 있다.
• 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능 -> 강제로 문자로 전환해버린다)

---

local Storage에 array, object 저장하는 법

JSON으로 바꿔 저장하면 된다.

let newArr = [1, 2, 3]

let jsonArr = JSON.stringify(newArr); // array/object에서 JSON으로 변환

localStorage.setItem('num', jsonArr); // 로컬스토리지에 저장

let getArr = localStorage.getItem('num'); // 로컬스토리지에서 꺼내기

JSON.parse(getArr); // JSON에서 array/object로 변환

https://sunshineyellow.tistory.com/52

[드림코딩] Object to JSON (stringify)

 

---

출처 : 코딩애플 https://codingapple.com/ / MDN https://developer.mozilla.org/ko/https://codingapple.com/