React localStorage 사용방법

참고링크
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

프로젝트를 진행하면서 사용자가 로그인한 상태인지를 추적했어야 했다. 그 때 사용했던 localStorage를 소개하려고한다.

소개

localStorage를 사용하여 개체 window에 액세스할 수 있고, 저장된 데이터는 브라우저 세션 간에 저장할 수 있습니다.

사용방법은 매우 간단합니다.

localStorage에 값 저장

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

localStorage에서 값 꺼내기

const v = localStorage.getItem("key");

localStorage에 저장된 키 제거

localStorage.removeItem("key");

localStorage에 저장된 모든 항목 제거

localStorage.clear();

프로젝트에 적용한 코드를 소개해 보려고한다.

localStorage.setItem('token', JSON.stringify(token));

로그인시 얻어왔던 token을 localSotrage에 저장하였다.
JSON.stringify(token)은 JavaScript 객체를 JSON 문자열로 변환하는 코드로 localStorage에 저장하기 위해서는 JSON 문자열 형태로 변환해야 한다.

const token = localStorage.getItem('token');

페이지마다 localSotrage에 있는 token을 불러와서 로그인이 되어 있는지 추적하였다.