로컬 스토리지 : 사용자가 직접 브라우저 캐시를 지우지 전이나 웹/앱이 데이터를 지울때까지 저장
세션 스토리지 : 세션이 유지되는 한, 브라우저 탭이 닫칠때까지만 데이터가 유지된다.
프로젝트에서는 상태관리를 위해 리덕스를 사용했고, 리덕스스토어의 상태들은 페이지를 새로고침 하거나 종료하는 순간 초기화가 되는 현상을 겪었다.
스토어 상태 초기화 방지를 위해 로컬스토리지와 세션스토리지를 사용하여 상태를 저장할 수 있다.
또한 redux-persist 라이브러리를 사용하면 리덕스에서 로컬스토리지와 세션스토리지에 상태를 저장하고 reducer를 업데이트 해주는 기능을 제공한다.
로컬스토리지 대신에 redux-persist 라이브러리를 사용한 이유는 로컬스토리지에서 데이터를 넣고, 빼는 코드를 줄여주기 때문이다.
로컬스토리지
프로젝트 당시 로컬스토리지에 대해 더 알아보다가 새로알게 된 부분이 있어 적어본다.
로컬스토리지에는 string이나 number와 같은 기본값이 아닌 객체를 저장하려는 경우, 로컬저장소에서는 [object Object]라는 문자열을 찾는 문제가 발생한다.
왜냐하면 객체 프로토타입의 toSring 함수가 이를 반환하기 때문이다. 따라서 object로 로컬스토리지에 저장하고 싶다면 object를 stringify를 먼저 해주고, parse해서 로컬스토리지로부터 읽어와야한다.
그리고 로컬스토리지는 동기적이다. 사용하면 메인 스레드가 차단된다. 메인 스레드가 차단된다는 것은 사이트의 상호작용에도 영향을 미친다. 예를들어, 로컬스토리지에서 데이터를 읽어오거나 데이터를 writing하는 경우에 상호작용이 되지 않는다.
여기까지 알아본다면, 로컬스토리지는 동기적으로 작동하기 때문에 큰 데이터를 넣으면 안되겠다고 생각이 들 것 이다. 하지만, 도메인당 최대 로컬스토리지의 크기는 5MB이기 때문에 어떻게 됬든 많은 양의 데이터를 저장할 수 없다.
정리하자면, 로컬스토리지에는 문자열만 저장할 수 있으므로, 객체를 저장하기 전에 문자열화(stringfify objects)를 해야한다.
