React - localStorage 활용하기

localStorage 란?

DB, 서버 없이 브라우저에 데이터를 반영구적으로 저장할 수 있는 기능입니다.

 

localStorage 의 특징

key: value 형태로 저장할 수 있습니다. ( 이미 존재하는 key 값과 중복되는 key 값으로 데이터를 저장하면 덮어쓰기 됩니다. )

문자 데이터만 저장할 수 있습니다.( 최대 5MB 까지 저장이 가능합니다. )

사이트 재접속을해도 남아있습니다. ( 유저가 브라우저를 청소하기 전까지 남아있습니다. )

 

지원하는 데이터 타입은 문자열, 숫자, 불린, null, undefined 이고, 모두 문자열 형식으로 저장됩니다. ( JSON 데이터도 저장이 가능합니다. )

만약에 array, object 자료를 저장하고 싶다면 편법을 사용하면 됩니다. array 나 object 자료를 저장할 때는 JSON 형태로 저장하면 문자 취급을 받기 때문에 저장할 수 있습니다. ( JSON.stringify() 를 사용하면 JSON 형태로 바꿔집니다. )

 

localStorage 에 저장했던 데이터를 다시 꺼내면 JSON 형태이기 때문에 js 에서 object 처럼 사용할 수 없습니다. 그래서 다시 JSON 을 object 형태로 바꿔주는 함수를 사용해야합니다. ( ‘JSON.parse()’ )

• JSON.parse 전( json 형태 )

 

• JSON.parse 후( object 형태 )

 

JSON.parse 후( object 형태 )

localStorage 에 데이터 저장

 localStorage.setItem('key', 'value');

 

localStorage 에서 데이터 꺼내기

localStorage.getItem('key'); // 결과값 'value'

 

localStorage 에서 데이터 지우기

localStorage.removeItem('key');

 

localStorage 의 데이터를 수정하는 문법은 없습니다. 직접 꺼내서 수정하고 집어넣으시면 됩니다.

 

localStorage와 Redux를 이용해서 최근 본 상품의 id 를 중복없이 저장하기

먼저 새로고침없이 페이지를 이동하기위해 디테일 페이지로 이동하는 버튼을 먼저 구현했습니다.

• App.js

 

디테일 페이지에 접속하면 localStorage 에 id 값을 저장하도록 구현했습니다.

• DetailPage.js

 

redux 를 사용해서 recentlyView 라는 store 를 만들어줍니다.

• recentlyViewSlice.js

 

마지막으로 store.js 에 recentlyView 를 등록해줍니다.

• store.js