LocalStorage 사용법

● LocalStorage란,
'사용자의 로컬에 존재하는 저장소'로서 특정 데이터를 저장할 수 있고 페이지를 변경하거나 브라우저를 닫더라도 값은 유지된다. 또한 초기화하거나 제거(remove)할 수도 있다. 
단, 도메인이 다른 경우에는 로컬 스토리지 공유가 불가능하다.

 

---

 

Local Stroage를 어떻게 사용할 수 있을까?

 

 

 

 

 

  ◎ 데이터 저장하기

• 만약 우리가 String type의 데이터인 key(키) : name, value(값): jennie를 담고자 한다면 세가지 방법을 사용할 수 있다.

localStorage.name = "jennie"; //1
localStorage["name"] = "jennie"; //2
localStorage.setItem("name", "jennie"); //3

 

• 만약 배열을 저장하고 싶다면 ?
• localStorage는 String type만 저장할 수 있으므로 localStorage에 배열을 직접 저장할 수 없다.
• JSON.stringify를 사용해서 데이터를 문자열로 변환해준다. 

localStorage.name = JSON.stringify(["suzy", "jun", "jennie"]);
//["suzy", "jun", "jennie"] array 그대로 유지

 

localStorage.name = ["suzy", "jun", "jennie"];
//localStorage.value에는 suzy,jun,jennie로 나온다.

 

• 하나 더, JSON.parse를 사용해서 배열로 사용할 수 있다.

//console창에서

JSON.parse('[1,2,3,4]');
// ▶(4) [1, 2, 3, 4]

JSON.stringify('[1,2,3,4]');
// '"[1,2,3,4]"'

 

 

 

 

만약 저장된 데이터를 불러오고 싶다면?

 

 

 

◎데이터 불러오기

const saveName = localStorage.name;
const saveName = localStorage["name"];
const saveName = localStorage.getItem("name");

console.log(saveName);

 

 

 

 

 

◎ 데이터 제거/삭제하기

 

• 저장된 데이터를 삭제하고 싶을 땐, localStorage.removeItem(key)를 해야한다.

localStorage.removeItem('name');

 

• 모든 데이터를 한꺼번에 삭제하고 싶을 땐, localStorage.clear()를 사용한다.

localStorage.clear();