LocalStorage 사용법

GoGoDev·2022년 2월 25일
1

Wanted_PreOnBoarding_FE

목록 보기
6/14

LocalStorage

localStrage는 웹 스토리지 객체로 브라우저 내 키-값 쌍으로 저장하도록 도와줍니다.

LocalStorage를 사용하면 페이지를 새로 고침하거나 브라우저를 껐다 켜도 데이터가 사라지지 않고 남아있습니다.

LocalStorage 사용법

  • setItem(key, value)
  • getItem(key)
  • removeItem(key)
  • clear()
  • 주의점

1. setItem(key, value)

localStorage.setItem("datalist", data);

setItem 메서드를 통해 key는 dataList, value는 data로 들어갑니다.
하지만 value를 조회하면 [Object Object]로 나오는데 이는 storage에 저장된 데이터는 모두 문자열만 사용 가능하여 value인 data를 문자열로 변환해 주어야 합니다.
값은 반드시 문자열로 저장됨

localStorage.setItem("datalist", JSON.stringfy(data));

JSON.stringfy()를 통해 객체를 문자열로 변환했습니다.

JSON.stringify: 객체 -> 문자열
JSON.parse: 문자열 -> 객체

여기서 문제는 setItem()을 해주면 value가 배열처럼 쌓이는게 아니라 새로 넣어준 값으로 변합니다.

배열처럼 값을 넣어주기 위해서는 배열을 하나 만들어 주고 배열에 하나씩 새로운 값을 넣고 데이터를 담은 배열을 setItem() 해주어야 합니다.

배열을 만들어 값을 넣어주면 첫번째 배열 값만 바뀌고 쌓이지 않습니다.
그러기 위해서는 const arr = []만 선언해주는 것이 아니라 이전 value 값을을 받아오고 그 배열에 넣어주어야 합니다.

const addData = () => {
  //localstorage에 key: dataList, value: data가 있으면 불러오고 없으면 [] 빈 배열을 할당
	const dataArray = JSON.parse(localStorage.getItem("dataList")) || []; 
    dataArray.push(data) //data는 추가할 데이터 객체
  	localStorage.setItem("dataList", JSON.stringify(dataArray));
}

dataList의 value에 데이터가 쌓인다.


2. getItem(key)

	JSON.parse(localStorage.getItem('dataList'))

getItem을 통해 해당 키에 있는 데이터들을 불러올 수 있습니다.

3. removeItem(key)

removeItem(keyName)

해당 키에 있는 데이터를 모두 삭제합니다


key가 아닌 특정 value만 삭제하고 싶을 때

const onDataDelete = (id) => {
	const [data, setData] = useState([])
    const leftData = data.filter((item) => item.id !== id)
    localStorage.setItem('dataList', JSON.stringify(leftData))
    setData(leftData)
}

localStorage에 있는 데이터를 담은 배열을 삭제하고 싶은 데이터의 id 값을 받아와 해당 값이 아닌 데이터들만 필터링하여 leftData에 담고 그 leftData를 localStorage에 새롭게 setItem()을 해줘야 합니다.

✔ localStorage에 있는 value를 직접 가공하려면 안된다. value의 타입은 Object이므로 object에 filter함수를 적용하면 filter is not a function로 나타난다.
이를 위해 데이터를 새로운 배열에 담거나 Object.values(객체이름).filter()를 사용해야한다.


4. clear()

	localStorage.clear(); // delete all items

localStorage에 있는 key, value를 모두 삭제합니다.

주의점

비밀번호와 같은 중요 정보는 저장하면 안된다.


번외 update

//id: 데이터의 아이디, text: 데이터 객체 안에 들어있는 text
  const onDataUpdate = (id, text) => {
    const willUpdateData = data.find((item) => item.id === id)
    willUpdateData.text = text;
    localStorage.setItem('dataList', JSON.stringify(data))
  }

update할 데이터의 id 값을 가져와 id 값이 일치한 데이터의 text 값을 변경한다.

나중에 해볼것: lodash를 이용, 재귀함수를 이용한 복사

심화

  • 객체와 배열
  • 얕은 복사, 깊은 복사
  • 쿠키
  • sessionStorage
  • nextjs 학습
  • nextjs에서의 localstorage 문제 (useEffect를 사용해 crossOrigin 방지)

참조

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
https://ponyozzang.tistory.com/341
https://stackoverflow.com/questions/55458675/filter-is-not-a-function
https://racoonlotty.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

profile
🐣차근차근 무럭무럭🐣

0개의 댓글