localStorage 저장하기
리액트 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가 발생합니다.
Author And Source
이 문제에 관하여(localStorage 저장하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@po05360/localStorage-저장하기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
if (localCompareList !== null) {
setCompareList(JSON.parse(localCompareList));
} else {
로컬스토리지 키 값에 value가 없을 때
}
Author And Source
이 문제에 관하여(localStorage 저장하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@po05360/localStorage-저장하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)