local storage 사용법

이글은 프론트엔트 개발자 취업을 준비하며 공부한 내용을 정리한 글입니다.

오늘은 개발중에 데이터를 캐싱하여 새로고침시에도 페이지가 유지해야할때 많이 사용하였는데 간단하게 정리해보겠습니다.

---

🍎 storage

• 브라우저에서 데이터를 저장할 수 있는 장소이다.
• local storage 와 session storage 가 있다.

---

⚙️ local storage 와 session storage 의 차이점

• local storage : 데이터를 반영구적으로 사용가능

영구적으로 데이터가 저장 되기 때문에 데이터를 삭제하기 위해서는 직접 삭제를 해야된다.

지속적인 데이터를 저장하기에 좋지만 로그인 정보와 같은 중요 데이터는 절대 저장 ❌

• session storage: 페이지의 세션이 끝날때, 즉 페이지를 닫을시에 데이터가 소멸

---

✏️ local storage 데이터 추가

localstorage.setItem('key 값' , 'value 값')

setItem 메소드를 사용하고 key값 과 value 값을 넣어준다.

😶 Storage에는 반드시 문자열만 저장 가능하며 다른 타입을 저장하기 위해서는 문자열로 변환 후 저장 가능

📎 JSON.stringify()

• 자바스크립트 파일내의 특정한 데이터를 json 의 형태로 문자 데이터화 시켜주는 메소드
• stringify 메소드를 실행하면 객체 데이터가 json화 된다.

👉 localStorage.setItem("key 값", JSON.stringify(value값))

이런 형식으로 저장하고자 하는 데이터를 문자열로 바꿔 저장해준다.

---

✏️ local storage 데이터 사용

localstorage.getItem('key 값')

getItem 메소드를 사용하고 setItem 으로 저장한 key값을 사용해 데이터를 불러온다.

😶 단순 문자열을 저장한 경우 한번에 가져올수 있지만 문자열이 아닌 그 외 타입(객체,배열 또는 그외)을 저장한 경우 한단계 과정이 필요하다.

📎 JSON.parse()

• JSON.parse()를 사용해 문자열을 원래의 타입으로 변환하는 과정을 거친다.

👉  JSON.parse(localStorage.getItem("key값"))

---

✏️ local storage 데이터 삭제

localStorage.removeItem("key값")
localStorage.clear()

• removeItem()으로 특정 key값을 삭제 할 수 있다.
• clear()로 현재 localstorage의 데이터를 모두 삭제 할 수 있다.