[React] LocalStorage/SessionStorage 사용법

LocalStorage이란?

localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다.
저장한 데이터는 세션간에 공유가 된다.
localStrage는 웹 스토리지 객체로 브라우저 내 키-값 쌍으로 저장하도록 도와준다.
LocalStorage를 사용하면 페이지를 새로 고침하거나 브라우저를 껐다 켜도 데이터가 사라지지 않고 남아있다.

SessionStorage이란?

세션(프로세스, 텝, 브라우저)이 종료될 때까지 지속되는 storage이다. localStorage와 사용법은 같으나 소멸타이밍이 상이하다. localStorage의 경우 시간제한이 없고, 브라우저가 꺼져도 죽지 않는다. 값 또한 직접 삭제를 해주어야한다. 하지만 SessionStorage 같은 경우 세션 종료 시 모두 삭제된다.

LocalStorage / SessionStorage 사용법

• setItem(key, value) - key, value 추가
• getItem(key) - value 읽어오기
• removeItem(key) - item 삭제
• clear() - 도메인 내의 localstorage 값 삭제
• length - 전체 item 갯수
• key() - index로 key값 찾기

1. setItem()

localStorage에 item을 추가한다.

window.localStorage.setItem(key, value)
//React
const 함수명 = localSorage.setItem('key', value)
ex) const storageToken = token => localStorage.setItem('token', token)

JSON이란?

• JavaScript Object Notation의 약자로 데이터를 문자열의 형태로 나타내기 위해서 사용된다. 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용한다.

JSON 내장 객체

• JSON 포맷의 데이터를 간편하게 다룰 수 있도록 JSON이라는 객체를 내장하고 있다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하던 상관없이 전역에서 접근이 가능하다.
  그것을 해주는게 .parse()와 .stringify()이다.

JSON.prase()

• JSON 문자열을 JavaScript 객체로 변환
• JavaScript 객체로 변환된 데이터는 .과 []를 사용하여 각 속성에 접근할 수 있다.

JSON.stringify()

• JavaScript 객체의 형태였던 데이터가 JSON 형식의 문자열로 변환되어 출력된다.
• JSON 객체로 변환된 데이터는 .과 []로 사용 불가능 하다.

2. getItem(key)

localstorage에 있는 데이터를 불러온다.

JSON.parse(localStorage.getItem('key'))
ex ) const GetStorageToken = localStorage.getItem('token');

3. removeItem(key)

localStorage에 있는 key의 데이터를 삭제한다.

localStorage.removeItem('token');

4.clear()

localStorage의 모든 값을 삭제한다.

localStorage.clear();

5. length

localStorage에 저장된 값의 갯수를 구한다.

const getKeyCnt = localStorage.length;

6. key(index)

localStorage에서 저장된 key의 index로 값을 찾는다.

const getIndexKeyValue = localStorage.key(0);