리액트 state를 사용하다보면 새로고침 시에도 state를 유지하거나 특정값을 유지해야하는 상황이 생깁니다. 그럴 때 우리는 로컬스토리지를 활용하여 해당 상황을 해결할 수 있습니다. 상황별 로컬스토리지 활용법을 한 번 알아보겠습니다.

로컬스토리지에 저장하기

js 에서 localstorage로 저장

localStorage.setItem('compareList', JSON.stringify(object name));

• object -> string 으로 변환하는 방법은 JSON.stringify( object name ) 입니다.

• js에서 localStorage.setItem()을 할 때, localStorage는 js의 오브젝트를 저장할 수 없기 때문에 object -> string 바꿔서 localstorage에 저장해야 합니다.

• 로컬스토리지에 JSON.stringify(object name))가 아니라 그냥 object name으로 저장했을 경우
  

• 로컬스토리지에 JSON.stringify(object name))으로 저장했을 경우
  

로컬스토리지에서 값 불러오기

localstorage에서 js로 불러 값을 불러올 때

    if (localCompareList !== null) {
      setCompareList(JSON.parse(localCompareList));
    } else {
     로컬스토리지 키 값에 value가 없을 때
    }

• string -> object 로 변환하는 방법은 JSON.parse( localstorage key ) 를 해주면 됩니다.

• string인 localstorage value를 가져와 object로 변환하지 않고 js에서 사용하면 값은 출력되나, map, findIndex 등 함수를 사용할 때 type 에러가 발생하게 됩니다.

• map, findIndex는 Array 타입에 사용가능한 함수인데 JSON.parse( localstorage key )를 해주지 않고 localstorage key를 그대로 사용하면 string 타입이기 때문에 TypeError가 발생합니다.