LocalStorage와 SessionStorage 사용법

 

LocalStorage	SessionStorage
⋆ 로컬에 도메일 별로 지속된다 ⋆ 시간 제한이 없고 브라우저가 꺼져도 죽지 않는다. ⋆ 값을 지우려면 직접 지워줘야한다.	⋆ 세션이 종료될 때 까지 지속된다. ⋆ 소멸 타이밍이 있다. ⋆ 세션이 종료시 지워진다.

 

 

확인 경로 = 맥 기준 ( fn + f12) / 윈도우 (f12) ➭ Application ➭ Storage

 

---

 

LocalStorage 문법

 

추가

localStorage.setItem(key, value);
<!--ex) localStorage.setItem("number","1");
	localStorage.setItem("String","hello");
    localStorage.setItem("variable", 변수명);-->

localStorage의 키와 값은 반드시 문자열이어야 한다.

다른 자료형을 사용하면 문자열로 자동 변환된다.

 

불러오기

localStorage.getItem(key);
<!--ex) localStorage.setItem("number"); //1출력
	localStorage.setItem("String"); //hello출력
    let var1 = localStorage.setItem("variable");
    console.log(var1); // 변수 출력 -->

 

객체, 배열 저장

//저장할 객체
let test = {
	name = "recorder",
    age = 25
}

//저장할 배열
let arr = [1,2,3];

//추가
localStorage.setItem("local_test", JSON.stringify(test));
localStorage.setItem("local_arr", JSON.stringify(arr));

//가져오기
let testout = localStorage.getItem("local_test");
let arrout = localStorage.getItem("local_arr");
console.log(testout);  //{"name":"recorder", "age":"25"}
console.log(arrout);  //[1,2,3]

 

삭제, 전체 삭제

만약 localStorage의 값이 ("name":"recorder"),("age":25),("job": "developer")

//삭제
localStorage.removeItem(key);
ex) localStorage.remove("name");   //recorder 삭제됨


//전체 삭제
localStorage.clear();	//recorder, 25, developer 모두 삭제

 

 

SessionStorage 문법은 localStorage.~~를 Session으로 바꿔주기만 하면 된다.

//추가
sessionStoarage.setItem("key",value);

//가져오기
sessionStorage.getItem("key");

//삭제
sessionStorage.removeItem("key");

//전체삭제
sessionStorage.clear();