[Javascript] 웹 스토리지

프로젝트를 만들다 보면 그 값을 저장해 놓고 계속 불러오는 걸 진행할 때가 있다

 

ex) 투두리스트, 일기장, 기록장 등등

 

https://mm-study-front.tistory.com/47

[Vue.js] 투두리스트 진행사항

 

 

이것도 파이어베이스와 연동을 시켜서 만들었지롱

 

---

 

근데 웹 브라우저 안에 내장된 DB가 있다는 걸 이제야 알았다..

 

Web Storage

 

-> 내장기능이기 별도의 프로그램필요 없고, 라이브러리 설치 필요 없고,, javascript로 접근할  수 있다

 

이리 간단한 걸,,,

 

웹 스토리지는 Session Storage와 Local Storage로 구성

 

두 개는 데이터를 어디에 보관, 언제 초기화하는지로 구분

 

전자는 브라우저 탭 별로 데이터를 보관 => 탭이 종료되기 전까지 유지, 종료되면 데이터 삭제

후자는 사이트 주소 별로 데이터를 보관 => 사용자가 삭제하기 전까지 유지

---

값을 저장할  때 

localStorage.setItem (key, value)

 

sessionStorage.setItem(key, value)

 

 

값을 꺼낼 때는

localStorage.getItem(key)

 

sessionStorage.getItem(key)

만 사용하면 끝

---

로컬스토리지 key 값은 무조건 원시타입으로 입력해야 하고

 

value값도 문자열로 해주는 게 좋다 객체나 이런 복잡한 타입들을 다 문자열로 인식해서 제대로 값이 저장 안 된다

 

=> 아니 객체는 여러 개의 값을 가졌는데 어떻게 문자열로 입력할 수 있나?

 

JSON.stringify()

 

사용해서 안에 객체 넣어주면 문자열로 잘 변환된다^_^

진짜 제이슨 최고,,

 

 

 

자 그러면 나는 스토리지에 객체를 문자열로 저장했다!

 

근데 객체로 쓰여야 하는데 문자열..? 

 

이때는

JSON.parse()

 

사용해 주면 다시 객체로 잘 반환된다

 

진짜로.. 제이슨 최최고

---

잘 저장되었는지 확인하려면

 

f12(개발자도구 열어서) -> Application -> Local Storage -> 사이트 주소 눌러보면 알 수 있다

 

 

  localStorage.setItem("test", "hello");

  console.log(localStorage.getItem("test"));

 

잘 저장되었네

---

 

로컬 저장소에서 값을 지우려면?

두 가지 방법이 있다

 

첫 번째는 내장함수 이용하기

  localStorage.removeItem("key");

 

자 이것도 실제로 확인해보자

 

  localStorage.removeItem("test");

 

저장된 값을 보는 것과 똑같이

f12(개발자도구 열어서) -> Application -> Local Storage -> 사이트 주소 눌러보면 알 수 있다

 

 

깔꼼 하게 비워져 있다.

 

 

두 번째는 그냥 로컬저장소에 있는 값 선택하고 백스페이스 누르면 된다