localStorage로 데이터 저장/사용하기

localStorage는 데이터를 페이지에 저장해두는 간단한 방법으로, 더미데이터와 달리 새로고침해도 그대로 유지된다. 
sessionStorage와도 유사하지만 페이지를 종료하면 데이터가 삭제되는 sessionStorage와 달리 별도로 삭제하지 않으면 세션 종료 후 열어도 유지된다는 차이점이 있다.

1. 데이터를 저장하는 법 : setItem 

localStorage.setItem('key',value)

애플리케이션 > 로컬스토리지 > 에서 확인해보면 키에 'key', 값에 value가 저장되는 걸 확인할 수 있다.  
기억해야 할 점은 value에 숫자number, 문자열string, 객체object 등 다양한 형식을 담아도 문자열 string 형식으로만 저장된다는 것이다. 

localStorage.setItem('key',{value:123})
// key: key, value: [object Object]

로컬 스토리지에 객체를 저장하기 위해서는 JSON.Stringify() 메서드를 사용해야 한다.

localStorage.setItem('key',JSON.Stringify({value:123}))
// key: key, value: {'value':123}

 

2. 데이터를 꺼내쓰는 법 : getItem

localStorage.getItem('key')

입력한 key값을 getItem에 입력하면 데이터를 읽어올 수 있다. 
만약 JSON.stringify로 객체를 JSON 문자열로 변환한 경우에는 JSON.parse() 메서드로 다시 객체로 변환해와야 한다.

 

3. localStorage 사용예시

예를들어 'diary'라는 key값을 가진 데이터를 로컬스토리지에 저장했고, diary는 객체를 value로 가진다.
기존 데이터를 건들지 않고 새로운 데이터를 읽어오고 싶은 경우, useRef()와 함께 사용하면 된다.

useEffect(()=>{
	const localData = localStorage.getItem('diary')

	if(localData) {
	const diaryList = JSON.parse(localData).sort((a,b)=>parseInt(b.id)-parseInt(a.id)) 
	dataId.current = parseInt(dataList[0].id)+1
    
	dispatch({type:'INIT', data: diaryList})
	}
},[])

const dataId = useRef(0)

만약 localData가 있다면,
객체로 변환 후 내림차순으로 정렬. 정렬할 때 id가 문자열이 아닐 경우를 대비하여 parseInt()로 변환한 diaryList를 만든다.
이때 dataId는 DiaryList를 내림차순 정렬한 후 첫번째 데이터의 아이디 (그러니까 1~7의 데이터아이디가 있다면 7)에서 1을 더한 값이 된다. (아이디 최신화)

 diaryList를 useReducer함수를 이용해서 미리 설정해둔 'INIT'타입으로 초기화해준다.

const reducer = (state, action) => {
	let newState = [];
	switch (action.type) {
		case 'INIT': {
			return action.data;
		}
		
        ...
        
		default:
			return state;
	}

	localStorage.setItem('diary', JSON.stringify(newState));
	return newState;
};