별도의 서버가 없는 상태에서 프론트 개발을 하고 있다고 가정할 때, 그리고 리덕스를 사용하고 있을 때, 데이터 유지 방법에 대해 생각해보자.
- 새로고침 시 리덕스 내의 데이터를 유지하기 위해서는 localStorage 또는 session에 저장하고자 하는 reducer state를 저장하여, 새로고침 하여도 저장공간에 있는 데이터를 redux에 불러오는 형식으로 이루어진다.
- 스토리지 저장 시 특징
- localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장
- 서버로 전송되지 않습니다. 그래서 쿠키보다 많은 데이터 저장 가능.
- 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있어서 프로토콜과 서브 도메인이 다르면 데이터에 접근불가
- storage에 저장된 데이터는 모두 문자열만 사용 가능하기 때문에 다른 타입의 데이터를 사용할 때에는 JSON 형태로 읽고 써야 한다.
- localStorage와 sessionStorage 차이점?
- localStorage
- 오리진만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있다.
- 동일 PC에서 동일 브라우저를 사용한 후, 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
- session Storage
- 현재 떠 있는 탭 내에서만 유지된다.
- 같은 페이지여도 탭이 다르면 다른 곳에 저장된다.
- 하나의 탭에 여러 iframe이 떠 있는 경우 동일 오리진에서 왔다고 취급하여 sessionStorage 공유된다.
- 새로 고침 할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다.
- localStorage
- Redux-persist 라이브러리를 사용하면 위의 두 가지 저장소를 더욱 편하게 사용할 수 있다.
- 링크1 링크2 링크3
lovjgb