React에서 LocalStorage 사용하기

Goldersgreen·2022년 6월 28일
0

Javascript

목록 보기
3/3

localstorage 기본 사용법

localstorage.setItem('data_name', Data)			// 데이터 추가하기
localstorage.getItem('data_name')				// 데이터 가져오기
localstorage.removeItem('data_name')			// 데이터 삭제하기

todolist localstorage에 저장하기

// 페이지가 새로고침 되어도 localStorage에서 'toloList' 가져와 useState에 넣어주기
const [list, setList] = useState(() => {
  	if (typeof window !== 'undefined') {
    	const saved = window.localStorage.getItem('todoList')
    	if (saved !== null) {
      		return JSON.parse(saved)
    	} else {
      		return []
    	}
  	}
})

// useEffect를 사용하여 list가 갱신될 때마다 localStorage에 JSON.stringify하여 넣어주기
useEffect(() => {
	localStorage.setItem("todoList", JSON.stringify(list))
}, [list])

0개의 댓글