7-10. LocalStorage 사용하기 (WEB DATABASE STORAGE)

일기를 추가 작성했을 때에 dummy로 입력된 data들만 남고 새로운 데이터들은 다 날아가는 것을 확인할 수 있다.

JavaScript는 Client side로 웹브라우저에서만 동작하기 때문에 새로고침을 하면 다시 초기데이터로 돌아가게 된다.

그러므로 JavaScript값은 휘발성을 가지고 있어 유지되기 힘들다는 것을 알 수 있다.

그래서 이러한 값들은 Database에 저장을 하고, 새로고침을 했을 때 Database에서 가져오도록 만들면되는 것이다.

그때에 이때 Database를 사용하지 않고도 Data를 저장하고 불러올 수 있는 기능을 알아보자~!

Web Storage API

Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.

• sessionStorage는 각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공합니다.
  • 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장합니다.
  • 데이터를 절대 서버로 전송하지 않습니다.
  • 저장 공간이 쿠키보다 큽니다. (최대 5MB)

example.com, Eaxample.com은 각 출처라 할 수 있고, 두 출처는 다른 출처로 취급하면 된다.

>>  브라우저 또는 탭이 닫힐때까지만 이니, 우리에게는 탈락인 기능이다!!!

• localStorage도 위와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있습니다.
  • 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.
  • 저장 공간이 셋 중 제일 큽니다.

>> 이 기능은 브라우저를 닫아도 데이터가 남아있기 때문에 우리에게 가장 적절하고, 각 브라우저에만 남아있기 때문에 남이 훔쳐도 볼 수 없는 기능으로 우리에게 적절하다고 판단이 된다.

그래서 우리는 Web Storage API 기능의 localStorage를 사용하여 실시간으로 데이터를 저장하고 들고와보도록 한번 제작해 보겠다.

App component가 mount(새로고침)되었을 때, 데이터를 들고오는거다!

출처 : https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

Web Storage API - Web API | MDN

 

자 그럼, localStorage에서 데이터를 어떻게 저장하고 들고오는지 한번 배워보자.

useEffect를 사용해 보겠다.

먼저 dummyData를 지워주고, useEffect를 통해 localStroage에 key값을 10으로 넣어주면

DefTool의 Application 탭에서 key는 10임을 확인할 수 있다.

이런식으로 우리는 LocalStorage에 데이터를 넣고 들고올 수 있음을 알 수 있다.

기존의 key값은 그대로있고, 추가로 item1,2,3이 추가된 것을 확인할 수있다.

근데 객체는 object Object로 들어오는 것을 확인할 수 있다.

객체를 저장할때에는 storage가 받아들일 수 있도록 JSON.stringfy 메소드를 사용하여 데이터를 직렬화(이런형식을 문자형으로 변형시켜주는 것)시켜야한다.

그래서 아래와 같이 문자형으로 저장되어있는 것을 볼 수 있다.

그리고 key는 10이라는 값은 우리가 코드상으로는 지웠지만 localStroage에는 남아있는 것을 확인할 수 있다.

우선 key 값을 지우고 다음을 실행해보자. (오른쪽 마우스키를 누르면 Delete할 수 있음)

 

그러면 다음과 같이 콘솔로 잘 출력되는 것을 볼 수 있다.

여기서 console.log로 데이터를 찍을 때, {}를 사용해 출력하면 key-value값으로 잘 출력됨을 알 수 있다.

근데 아까 분명히 item1은 number 타입으로 저장했는데 문자열로 저장된 것을 확인할 수 있다.

그리고 item3의 객체도 문자열로 변경되어 나온것을 확인할 수 있다.

보통 localStrage에 들어가는 값은 문자열로 변경되어 저장된다는 것을 알 수 있다.

그래서 item3같은 경우는 JSON.parse로 다시 복원시켜줘야 한다.

그러면 다음과 같이 정상적으로 다시 반환되는 것을 확인할 수 있다.

자 그럼 localStroage사용하는 방법은 다 배웠으니, 다 지워보자.

application탭에 저장된 데이터들과, 코드상의 dummyData를 다 지우고, dataState도 빈배열로 바꿔주고 다이어리를 작성하면 localStorage에 저장할 수 있도록 해보자.

우리는 일기 Data를 새로 등록할 때마다 localStroage를 변경시킬것이다.

변경된 로직을 처리하는 것이 reducer인데, INIT, CREATE, REMOVE, EDIT 모두가 reducer를 통해서 처리가 되기 때문에, 우리는 reducer에서 newState가 변경될때마다 Storage에 데이터를 넣어주면 되는것이다!

그래서 newState가 return되기 전에 우리는 localStorage에 아래와 같이 JSON.stringfy를 통해 데이터를 전달하면 된다.

그러면 다음과 같이 정상적으로 등록 및 수정하기 기능까지 잘 작동된다는 것을 확인할 수 있다.

 

근데 삭제하기 기능이 없어서 한번 만들어보자.

먼저 DiaryEditor에다 한번 만들어보자.

그러면 글 삭제가 localStorage에서 정상적으로 진행됨을 알 수 있다.

localStorage에는 아직 저장되어 있지만, 데이터를 꺼내서 앱 컴포넌트에 적용하는 것은 안해봤기 때문에 아직은 반영이 되지 않는다.

컴포넌트가 mount되었을 때에 localStorage에서 값을 꺼내서 dataState의 기초 값으로 사용하도록 한번 해보자.

그러면 data들이 다 출력되는 것을 볼 수 있고, current값은 1이 더해진 11로 나오는 것을 확인할 수 있다.

 

자 그럼 diaryState를 diary의 초기값으로 설정해주면 끝이난다.

그럼 글들이 잘 작성되어 출력되는 것을 확인할 수 있다.

그래서 이 loaclStorage를 이용하면 database를 자유롭게 사용할 수 있음을 알 수 있다.