🗂 웹 스토리지 (Web Storage)
- 클라이언트 사이드에 데이터를 저장할 수 있도록 HTML5부터 지원하는 저장소.
- 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다.
- 쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않는다. (명시적으로만 전송 가능)
- 쿠키와 달리, 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없다. 다른 오리진에서 요청하는 경우에는, 꺼내 쓰고 싶어도 오리진 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸 수 없다. (CSRF 안전)
- 쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다.
- 데이터의 영구성에 따라 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있다.
| 로컬 스토리지 | 세션 스토리지 | |
|---|---|---|
| 데이터 유지 | 브라우저 종료시 보관 | 브라우저 종료시 삭제 |
| 데이터 범위 | 동일한 도메인 전역 공유 | 브라우저간 공유 안됨 |
장점
- 서버에 불필요한 데이터를 저장해달라고 요청하지 않아도 된다.
- 용량이 크다 (5MB, 브라우저마다 차이 있음)
단점
- HTML5를 지원하지 않는 브라우저의 경우 사용 불가
로컬 스토리지 (Local Storage)
- 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장된다.
- 오리진(= 프로토콜 + 도메인 + 포트)별로 생성되며, 다른 오리진의 로컬 스토리지에는 접근이 불가능하다.
- 서로 다른 브라우저 탭이라도 동일한 오리진이라면 동일한 로컬 스토리지를 사용한다.
- window.localStorage 객체
활용
- 지속적으로 필요한 데이터 저장
- 자동 로그인
- 다크모드와 라이트모드 기능
코드
저장
데이터는 문자열로 변환되어 저장되기 때문에 이를 신경써주시면 좋겠습니다.
예) Object로 넣으면 key : "{key:value}" 로 들어가는것이 아니라 key : "[object object]"로 들어가 값을 알 수 없게 됩니다.
function setLocalStorage(key, value){
localStorage.setItem(key,JSON.stringify(value));
}조회
// Key로 value 조회
function getLocalStorage(key){
return JSON.parse(localStorage.getItem(key));
}
// index로 key 조회
function getLocalStroageKey(index){
return localStorage.key(index)
}삭제
function removeLocalStorage(key){
localStorage.removeItem(key);
} 세션 스토리지 (Session Storage)
- 세션 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성된다.
- window 객체와 동일한 유효 범위 및 생존 기간을 가진다.
- 탭/윈도우를 닫을 시 데이터가 삭제된다.
- 동일한 탭/윈도우라도 오리진(= 프로토콜 + 도메인 + 포트)라면 또 다른 세션 스토리지가 생성된다.
- 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
- 윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
- window.sessionStorage 객체
활용
- 일시적으로 필요한 데이터 저장
- 비로그인 장바구니
- 상세 페이지에서 목록 페이지로 이동할 때 스크롤 위치 값
- 입력 폼 정보
코드
저장
function setSessionStorage(key, value){
sessionStorage.setItem(key,JSON.stringify(value));
}조회
// Key로 value 조회
function getSessionStorage(key){
return JSON.parse(sessionStorage.getItem(key));
}
// index로 key 조회
function getSessionStorageKey(index){
return sessionStorage.key(index)
}삭제
function removeSessionStorage(key){
sessionStorage.removeItem(key);
} [참조] https://ryuhojin.tistory.com/10?category=1050330
[참조] https://doqtqu.tistory.com/306
[참조] https://it-eldorado.tistory.com/90
