로컬 스토리지 (LocalStorage)와 세션스토리지 (SessionStorage)

📁 웹 스토리지 객체 (Web Storage Object)

웹 데이터를 클라이언트에 저장하기 위해 만들어진 Key-Value 형식의 저장소

• HTML5에 추가된 클라이언트 기반 Key-Value 저장소
• 로컬 스토리지(LocalStorage)와 세션 스토리지(SessionStorage)로 나누어진다.

📁 로컬 스토리지 (LocalStorage)

---

로컬스토리지란?

window.localStorage 객체로 브라우저를 종료해도 데이터가 유지된다.

---

📁세션 스토리지 (SessionStorage)

---

세션 스토리지란?

window.sessionStorage 객체로 로컬 스토리지와는 다르게 데이터가 영구적으로 보관되지않는다.

---

✔ 제공하는 메서드와 프로퍼티

• setItem(key, value) 키-값 쌍을 보관합니다.
• getItem(key) 키에 해당하는 값을 받아옵니다.
• removeItem(key) 키와 해당 값을 삭제합니다.
• clear() 모든 것을 삭제합니다.
• key(index) 인덱스(index)에 해당하는 키를 받아옵니다.
• length 저장된 항목의 개수를 얻습니다.

// LocalStorage 데모
localStorage.setItem('test', 1); // LocalStorage 저장
alert( localStorage.getItem('test') ); // 1

🔎 로컬 스토리지와 세션 스토리지의 차이

🔵 데이터 유지

• LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다.
• SessionStorage는 데이터가 지속적으로 보관되지 않는다. 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다. (브라우저가 종료되면 데이터도 같이 지워진다.)

🔵 데이터 범위

• LocalStorage 도메인이 같으면 전역적으로 공유가 가능하다.
• SessionStorage 같은 도메인이라도 브라우저마다 별도로 생성된다.

🧹 데이터를 저장할 수 있는 쿠키와 차이점은 ?

쿠키도 브라우저에 데이터를 저장할 수 있는데..?🤔

• 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.
  (쿠키보다 더 많은 자료를 보관할 수 있다.)
• HTTP 헤더를 통해 스토리제 객체를 조작할 수 없다.
  (웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.)
• 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여 있어 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.
• 쿠키는 만료 일자를 지정할 수 있지만 웹 스토리지 객체는 만료 기간의 설정이 없어 영구적으로 데이터 저장이 가능하다.
  (SessionStorage는 데이터가 지속적으로 보관되지 않는다.)

---

🔗 참고

https://ko.javascript.info/localstorage
https://ryuhojin.tistory.com/10?category=1050330
https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90