[React] localStorage 사용하기

프로젝트를 진행하다보니,
몇몇 정보들은 api를 호출해서 받는 것보단 로컬 데이터로 저장해뒀다가 사용하는 것이
더 편한 부분들이 생겼다.

이번 프로젝트의 경우 accesstoken과 user 이름을 localStorage에 받아와서 사용했는데, 매번 사용할 때마다 백엔드에 요청하여 받아오는 것보다 localStorge에 두고 필요할 때 꺼내는 것이 트래픽도 적게 들어서, 더 효율적일 것이라 생각했다.

어떻게 사용하지?

저장하기

localStorage.setItem(KEY, VALUE);

꺼내서 쓰기

localStorage.getItem(KEY)

문자열만 사용할 수 있으므로, 객체나 배열을 저장할 땐

localStorage.setItem(KEY, JSON.stringify(object));

삭제

localStorage.removeItem(KEY);

전체 삭제

localStorage.clear();

저장된 아이템 갯수

const length = localStorage.length

KEY 찾기

localStorage.key(index)

프로젝트를 진행하면서, 어떤 식으로 데이터들을 운용해야 효율적일지 고민하다보니 localStorage를 사용하게 되었다. API를 언제 어떻게 호출해야 효율적일지도 꼭 고려해야할 부분이 되어야 한다 :)