참고
내용
Web Storage
NOTE
•
localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해줌
•
페이지를 새로 고침하고(sessionStorage의 경우) , 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사리지지 않고 남아있다
Web Storage - Cookie와 다른점
NOTE
•
Cookie와 다르게 WebStorage 객체는 네트워크 요청 시 서버로 전송되지 않습니다
이런 특징 떄문에 Cookie보다 더 많은 자료를 보관할 수 있습니다
•
Cookie와 다른 점은 서버가 HTTP 헤더를 통해 Storage 객체를 조작할수 없다는 점이다
WebStorage 조작은 모두 자바스크립트에서 이루어진다
•
WebStorage 객체는 Domain.protocol.port로 정의되는 오리진에 묶여있다
따라서 프로토콜과 서브 도메인이 다르면 접근할 수 없다
•
메서드, 프로퍼티
◦
setItem(key, value) – 키-값 쌍을 보관합니다.
◦
getItem(key) – 키에 해당하는 값을 받아옵니다.
◦
removeItem(key) – 키와 해당 값을 삭제합니다.
◦
clear() – 모든 것을 삭제합니다.
◦
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
◦
length – 저장된 항목의 개수를 얻습니다.
Web Storage - localStorage
NOTE
•
locaStorage의 키-값은 반드시 문자열이어야 한다.
localStorage 코드
Web Storage - sessionStorage
NOTE
•
sessionStorage객체는 localStorage에 비해 자주 사용되지 않는다
(localStorage보다 훨씬 제한적이기 떄문)
◦
현재 떠 있는 탭 내에서만 유지된다
( 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문이다)
◦
페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다
(하지만 탭을 닫고 새로 열면 사라짐)
sessionStorage 코드
Web Storage - 예시
NOTE
Web Storage 코드