[React] 로컬 스토리지와 세션 스토리지 사용하기

1. 개요

리액트에서 로컬 스토리지와 세션 스토리지를 사용해보자!

• 두 스토리지 모두 브라우저의 클라이언트 측 저장소를 활용하는데, 주요 차이점은 데이터가 유지되는 시간이다.
• ⚠️ 로컬 스토리지와 세션 스토리지는 클라이언트 측 저장소이므로 중요한 데이터나 민감한 정보는 저장하지 않는 것이 좋다!
• 🔗 웹 스토리지 공부 내용 정리 블로그 링크↗️

2. 로컬 스토리지 (Local Storage)

2.1 개념

데이터를 무제한으로 저장할 수 있으며, 브라우저를 닫거나 새로 고침해도 데이터가 유지된다.

2.2 사용 방법

데이터 저장하기

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

데이터 읽기

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

데이터 삭제하기

localStorage.removeItem("key");

모든 데이터 삭제하기

localStorage.clear();

2.3 사용 예제

import { useState, useEffect } from "react";

function App() {
  const [value, setValue] = useState("");

  useEffect(() => {
    // 컴포넌트가 마운트될 때 로컬 스토리지에서 값 읽기
    const storedValue = localStorage.getItem("myValue");
    if (storedValue) {
      setValue(storedValue);
    }
  }, []);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSave = () => {
    localStorage.setItem("myValue", value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={handleSave}>Save to Local Storage</button>
    </div>
  );
}

export default App;

3. 세션 스토리지 (Session Storage)

3.1 개념

데이터를 브라우저 세션 동안만 저장하며, 브라우저를 닫으면 데이터가 삭제된다.

3.2 사용 방법

로컬 스토리지와 다를 거 없다!

데이터 저장하기

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

데이터 읽기

const value = sessionStorage.getItem("key");

데이터 삭제하기

sessionStorage.removeItem("key");

모든 데이터 삭제하기

sessionStorage.clear();

3.3 사용 예제

import { useState, useEffect } from "react";

function App() {
  const [value, setValue] = useState("");

  useEffect(() => {
    // 컴포넌트가 마운트될 때 세션 스토리지에서 값 읽기
    const storedValue = sessionStorage.getItem("myValue");
    if (storedValue) {
      setValue(storedValue);
    }
  }, []);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSave = () => {
    sessionStorage.setItem("myValue", value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={handleSave}>Save to Session Storage</button>
    </div>
  );
}

export default App;