[JavaScript] 웹 스토리지(Web Storage) - localStorage, sessionStorage

Web Storage API

- 데이터를 사용자 로컬에 보존하는 방식 

- 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능

- 자바스크립트(JavaScript)로만 조작

- 모바일에서도 사용 가능

🍪 쿠키와 차이 

- 유효 기간이 없고 영구적으로 사용 가능

- 쿠키(4KB)보다 많은 용량을 저장할 수 있음

- 쿠키와 다르게 네트워크 요청 시 서버로 전송되지 않음

- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음

- 웹 스토리지는 origin(프로토콜, 도메인, 포트)이 다르면 접근 불가

localStorage & sessionStorage

- 키(Key)와 값(value)을 하나의 세트로 저장 

- 도메인과 브라우저별로 저장 

- 값은 반드시 문자열로 저장됨 (그러므로 배열을 저장할 때 JSON.stringify(arr)로 저장)

메소드	설명
setItem(key, value)	key - value를 쌍으로 저장
getItem(key)	key에 해당하는 값을 리턴
removeItem(key)	key에 해당하는 값 삭제
clear()	모든 값 삭제
key(index)	index에 해당하는 key
length	저장된 항목의 개수

sessionStorage

- 현재 떠 있는 탭에서만 유지(탭이 다르면 다른 곳에 저장)

- 페이지 새로고침시에는 데이터를 유지하지만, 탭을 닫고 새로 열었을 경우에는 제거됨

📌 localStorage는 세션이 끊겨도 사용가능, sessionStorage는 같은 세션만 사용 가능

---

참고

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

Web Storage API - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Web Storage API 사용하기 - Web API | MDN