브라우저의 Storage
- key-value 쌍으로 데이터를 저장
- Local Storage : 도메인마다 존재, 브라우저 종료후에도 남아있음
- Session Storage : 브라우저 종료시 사라짐
localStorage
- window.localStroage
- 객체를 저장하는 경우 문자열로 변환해서 저장
localStorage.setItem("key", value)
localStorage.getItem("key")
localStorage.removeItem("key")
localStorage.clear()
localStorage.length
localStorage.setItem("key", JSON.stringify(obj))
const obj_from = JSON.parse(localStorage.getItem("key"))
sessionStore
- localStore 와 메서드는 동일, 브라우저 종료시 사라짐
sessionStorage.setItem("key", "value");
let value = sessionStorage.getItem("key");
sessionStorage.removeItem("key");
cookie
- 서버가 Set-Cookie 응답헤더에 "키=값"의 내용을 전달하면 브라우저에 저장
- session cookie : expires나 max-age 옵션이 없는 쿠키, 브라우저 종료시 사라짐
- persistence cookie : expires나 max-age 옵션이 존재하는 쿠키, 유효 일자 까지는 쿠키를 유지
let cookies = document.cookie;
document.cookie
document.cookie="key1=val3"
document.cookie = "name=value; expires=date; path=path";
document.cookie = "name=; expires=date; path=path";
indexedDB
let request = indexedDB.open("databaseName", version);
request.onsuccess = function(event) {
let db = event.target.result;
let transaction = db.transaction("objectStoreName", "readwrite");
let objectStore = transaction.objectStore("objectStoreName");
objectStore.add({key: "value"});
let getRequest = objectStore.get("key");
getRequest.onsuccess = function(event) {
let value = event.target.result;
console.log(value);
}
let deleteRequest = objectStore.delete("key");
deleteRequest.onsuccess = function(event) {
console.log("Data deleted.");
}
}