[React] 17. localStorage와 sessionStorage 사용해보기

오늘은 브라우저 상에서 데이터를 저장할 수 있는 webStorage에 대해 공부해보려고 합니다.

보통은 서버단에 데이터를 저장하여 사용하지만 크게 중요하지 않은 데이터는 브라우저상에 저장하여 사용하기도 하는데요!

데이터를 추가/수정한 후에 페이지 새로고침 하거나 새로운 페이지를 열었을 때 기존의 데이터를 불러올 때에도 사용할 때에도 유용하게 사용할 수 있는 방법입니다.

 

먼저, webStorage의 종류인 localStorage와 sessionStorage에 대해 알아보고 코드에 적용해보도록 하겠습니다.

localStoarage와 sessionStorage 란,

localStorage와 sessionStorage 두가지 방법 모두 애플리케이션 전역에 접근 가능하다는 공통점이 있습니다.

사용 시 주의해야 할 점은 storage에 저장된 데이터는 모두 문자열만 사용 가능하기 때문에 다른 타입의 데이터를 사용할 때에는 JSON 형태로 읽고 써야 한다는 것입니다.

 

두가지 방법의 차이점은 저장되는 데이터의 범위가 다르다는 점입니다. localStorage는 동일한 pc안에서 동일한 브라우저를 사용했을 때에 사용합니다. 즉. 데이터를 직접 삭제하지 않는 한 브라우저를 닫아도 저장된 데이터를 불러올 수 있습니다. 반대로 sessionStorage는 브라우저 창이 닫히면 세션이 종료되면서 storage에 저장된 데이터도 소멸됩니다. 

localStorage와 sessionStorage API

localStorage와 sessionStorage 두가지 모두  setItem(key, value) 형태로 데이터를 store에 저장하고,  getItem(key) 를 사용하여 저장된 데이터를 store에서 가져올 수 있습니다.

localStorage.setItem('key', value);
localStorage.getItem('key');

또한, 아래 코드를 사용하여 저장된 키와 데이터를 일부 또는 모두 삭제할 수 있습니다.

localStorage.removeItem('key');
localStorage.clear();

그 외에 localStrage.length를 사용하여 저장된 데이터의 개수를 얻어올 수 있습니다.

localStorage 사용해보기

간단하게 이름을 입력받아 저장하여 불러오도록 코드를 작성해 보았습니다.

import React, { useState } from "react";

const LocalStorageComponent = () => {
  const [userName, setUserName] = useState("");
  const [check, setCheck] = useState(false);

  const saveData = () => {
    const userObj = { name: userName };
    window.localStorage.setItem("userName", JSON.stringify(userObj));
  };

  const callData = () => {
    setCheck(true);
  };

  const onChange = (e) => {
    setUserName(e.target.value);
    setCheck(false);
  };
  return (
    <div>
      <input
        name="userName"
        value={userName}
        onChange={onChange}
        placeholder="이름을 입력하세요!"
      />
      <button onClick={saveData}>저장하기</button>
      <button onClick={callData}> 불러오기</button>

      {check ? <p>{window.localStorage.getItem("userName")}</p> : <> </>}
    </div>
  );
};

export default LocalStorageComponent;

다음과 같이 이름을 입력하고 저장한 후에 불러오기 버튼을 누르면 저장된 데이터를 불러올 수 있습니다. 또한, 새로고침 시에도 기존에 저장한 데이터를 불러오는 것을 확인할 수 있습니다.

 

다음 시간에는 이 두개의 저장소를 redux에서 사용하게 해주는 redux-persist 라이브러리에 대해 알아보도록 하겠습니다.