웹 스토리지 객체 localStorage, sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있다.
localStorage, sessionStorage를 사용하면 브라우저를 다시 실행하거나 페이지를 새로 고침해도 데이터가 사라지지 않고 남아있다.
❓쿠키 이외의 localStorage, sessionStorage 사용하는 이유
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.
이 특징 때문에 쿠키보다 더 많은 자료를 보관 가능하다.
브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 한다.
개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다. - 서버가 HTTP 헤더를 통해 웹스토리지 객체를 조작할 수 없다.
웹스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다. - 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 origin에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.
🔎 localStorage
- origin(domain, port, protocol)이 같은 경우, 모든 탭과 창에서 데이터 공유
→localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문. 어느 창에서 데이터를 설정한다면 다른 창에서 변동 사항 확인 가능 - 브라우저나 OS가 재시작하더라도 데이터 파기 되지 않음
// 키에 데이터 설정하기
localStorage.setItem("key", value);
// 키로 부터 데이터 읽기
localStorage.getItem("key");
// 키의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제
localStorage.clear();
// 저장된 키/값 쌍의 개수
localStorage.length;🔎 sessionStorage
- 현재 떠 있는 탭 내에서 유지
→ 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장
→ 하나의 탭에 여러 개의 iframe이 있는 경우에 동일한 오리진에서 왔다가 취급되기 때문에sessionStorage가 공유된다.❓ iframe이란
inline frame의 약자로서, HTML inline frame 요소.
효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로, iframe 요소를 이용하여 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 가능
// 키에 데이터 설정하기
sessionStorage.setItem("key", "value");
// 키로 부터 데이터 읽기
sessionStorage.getItem("key");
// 키의 데이터 삭제
sessionStorage.removeItem("key");
// 모든 키의 데이터 삭제
sessionStorage.clear();localStorage 🆚 sessionStorage
| localStorage | sessionStorage | |
|---|---|---|
| 데이터 수명 주기 | 데이터는 사용자가 직접 삭제하지 않는 한 영구적으로 보존. 브라우저 세션이 끝나더라도 데이터 유지 | 데이터는 브라우저 세션이 유지되는 동안만 유지. 사용자가 브라우저를 닫거나 탭을 닫으면 해당 세션의 데이터 삭제 |
| 공유 여부 | 도메인별로 데이터 공유. 다른 탭이나 창에서도 동일한 도메인의 localStorage 접근 가능 | 같은 탭 또는 창 내에서만 데이터 공유. 다른 탭이나 창에서 접근 불가능 |
| 활용 목적 | 사용자의 로그인 정보, 사용자 설정, 사용자의 활동 기록 등을 저장하는 데 적합 | 페이지 간에 일시적인 데이터를 전달하는 데 적합 |
References:
https://ko.javascript.info/localstorage
https://www.daleseo.com/js-web-storage/
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
