LocalStorage로 저장, 불러오기, 삭제 (JS, React)

 

특별히 서버단을 사용하지 않을 예정이고, 중요한 내용을 담고 있지 않다면 로컬스토리지를 이용하는 것도 좋은 방법 중 하나이다.

로컬 스토리지를 어떻게 이용하여 저장, 불러오기, 삭제를 할 수 있는지 알아보자.

 

---

LocalStorage에 저장하기

localStorage.setItem('이름', JSON.stringify(..))

example for React)
useEffect(() => {
  localStorage.setItem('my-data', JSON.stringify(data))
})

위와 같이 하면 LocalStorage에 저장 할 수 있다.

'이름' 이라고 적힌 부분은 LocalStorage에 저장하고 싶은 이름을 적으면 되고, 저장하고 싶은 데이터는 JSON.stringify를 통해서 저장 하면 된다.

stringify를 했으니 나중에 불러올 때는 parse를 하면 되는데 아래에서 알아보자.

 

---

만약 LocalStorage에 저장된 것을 보고싶다면 개발자도구(F12)로 들어가서 Application에 들어간 후 왼쪽에서 Local Storage를 찾을 수 있다. 여기서 내가 저장한 이름과 같은 것을 찾아볼 수 있을 것이다.

---

LocalStorage에서 불러오기

불러올 때는 getItem을 사용하면 되고, setItem 할 때 저장한 이름으로 불러올 수 있다.

localStorage.getItem('이름')

example for React)
useEffect(() => {
  const data = localStorage.getItem('이름')
  
  if (data) {
    setState((prev) => [...prev, ...JSON.parse(data)])
  }
}, [])

나의 경우 useState를 사용하고 있어서 위와 같이 getItem을 한 다음, setState에 저장하는 방식으로 사용하고 있다.

 

LocalStorage 삭제하기

그렇다면 삭제는 어떻게 이루어질까? removeItem을 사용할 수 있다.

localStorage.removeItem('이름')

위와 같이 removeItem에 자신이 저장한 localStorage 이름을 사용함으로써 저장할 수 있다.