[개념03] 쿠키를 보완하기 위한 Web Storage API : HTML5 웹 스토리지 : local storage : session storage
2019.10.29(화)
Web Storage API (setItem, getItem, removeItem, key, length)
브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key/value 데이터를 안전하게 저장할 수 있는 메커니즘 제공
Storage 객체
- 단순한 key-value (항상 문자열, 정수입력해도 String으로 변경) 저장소
- 객체와 비슷
- 페이지 로딩시에도 값 유지
값 접근
| Storage |
Storage.setItem('keyName', 'keyValue'); localStorage.setItem('', ''); sessionStorage.setItem('', ''); |
Storage.getItem('keyName'); localStorage.getItem('', ''); sessionStorage.getItem('', ''); |
| Storage 객체 |
데이터 설정, 검색, 제어 할 수 있는 인스턴스 [Exposed=Window] interface Storage { readonly attribute unsigned long length; |
|
Storage 객체
| Storage | ||
| 속성 | Storage.length | Storage 객체에 저장된 데이터 아이템 갯수 반환 |
| 메소드 |
Storage.key() |
특정 숫자 n에 대해서, 스토리지 n번재 저장되어있는 키의 이름 반환 |
|
Storage.getItem() |
keyName을 넘기면 keyValue 반환 | |
|
Storage.setItem() |
keyName과 keyValue 지정 후 스토리지 저장 (만약 키가 이미 있다면, 키의 값 업데이트) |
|
|
Storage.removeItem() |
keyName에 해당하는 아이템 제거 | |
| Storage.clear() | 스토리지 모든 키 제거 |
Web Storage 매커니즘
| sessionStorage |
페이지의 세션이 유지되는 동안 각 storage 관리. 호출 반환: Storage 객체 |
| localStorage |
브라우저가 닫히더라도 storage 유지 호출 반환: Storage 객체 |
| Window.localStorage | Window.sessionStorage | |
| 읽기전용 사용자 local Storage 객체에 접근 데이터 만료 기간 없음 |
session Storage 객체 접근 데이터 만료 기간 有 (페이지 세션) (페이지 세션) |
|
| 문법 | ||
브라우저 호환성 (Brower compatibility)
참고자료
Using the Web storage API : https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
webStorage
: https://html.spec.whatwg.org/multipage/webstorage.html#webstorage
Window.localStorage
: https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.sessionStorage
: https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage