리액트 - 로컬 스토리지 유효기간 설정하기 (Setting Local Storage Expiration Time)

리액트 전체 링크

 

참고

- 로컬 스토리지 사용 방법과 세션 스토리지 비교

- 두 날짜 사이의 시간 차이 구하기

 

로컬 스토리지의 유효 기간을 설정해 보자.

아래는 10초 뒤에 로컬 스토리지에서 값이 제거되는 예제다.

---

로컬 스토리지 만료 기간 설정하기

 

로컬 스토리지는 만료 기간이 따로 존재하지 않는다.

따라서 값을 저장할 때, 유효기간을 함께 설정한다.

const setLocalStorageTimer = (key, value, time) => {
  let now = new Date();
  let item = {
    value: value,
    expireTime: now.getTime() + time,
  };

  localStorage.setItem(key, JSON.stringify(item));
};

 

Date 객체에서 getTime을 호출하면 현재 시간을 ms 단위의 정수로 표현한다. (하루 = 8640000)

예를 들어, 유효기간이 2초라면 time이 2000이 된다.

 

getLocalStorage는 해당 key값이 존재하는 경우, 현재 시간과 비교하여 값을 리턴하면 된다.

값이 없거나 유효기간이 지난 경우라면 key를 지우고 null을 return한다.

const getLocalStorage = (key) => {
  let item = localStorage.getItem(key);
  if (item === null) return null;

  item = JSON.parse(item);

  const now = new Date();
  if (now.getTime() > item.expireTime) {
    localStorage.removeItem(key);
    return null;
  }

  return item.value;
};

 

정상적으로 동작하는지 리액트에서 확인해 보자.

import React, { useState } from "react";

import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Swal from "sweetalert2";

const setLocalStorageTimer = (key, value, time) => {
  let now = new Date();
  let item = {
    value: value,
    expireTime: now.getTime() + time,
  };

  localStorage.setItem(key, JSON.stringify(item));
};

const getLocalStorage = (key) => {
  let item = localStorage.getItem(key);
  if (item === null) return null;

  item = JSON.parse(item);

  const now = new Date();
  if (now.getTime() > item.expireTime) {
    localStorage.removeItem(key);
    return null;
  }

  return item.value;
};

const App = () => {
  const [key, setKey] = useState("");
  const [value, setValue] = useState("");
  
  const [loadKey, setLoadKey] = useState("");
  const [loadValue, setLoadValue] = useState("");

  const handleSave = () => {
    let expireTime = 10000; // 10s
    setLocalStorageTimer(key, value, expireTime);

    let timerInterval;
    Swal.fire({
      title: "Auto close alert!",
      html: "I will close in <b></b> milliseconds.",
      timer: expireTime,
      timerProgressBar: true,
      didOpen: () => {
        Swal.showLoading();
        const b = Swal.getHtmlContainer().querySelector("b");
        timerInterval = setInterval(() => {
          b.textContent = Swal.getTimerLeft();
        }, 100);
      },
      willClose: () => {
        clearInterval(timerInterval);
      },
    }).then((result) => {
      /* Read more about handling dismissals below */
      if (result.dismiss === Swal.DismissReason.timer) {
        console.log("I was closed by the timer");
      }
    });
  };

  const handleLoad = () => {
    let value = getLocalStorage(loadKey);
    console.log(value);
    value = value === null ? "Can't find" : value;
    setLoadValue(value);
  };

  return (
    <div>
      <Box
        sx={{
          "& > :not(style)": { m: 1, width: "25ch" },
        }}
      >
        <TextField label="Key" variant="outlined" value={key} onChange={(e) => setKey(e.target.value)}/>
        <TextField label="Value" variant="outlined" value={value} onChange={(e) => setValue(e.target.value)}/>
        <Button variant="outlined" color="primary" onClick={handleSave}>
          저장하기
        </Button>
      </Box>
      <hr></hr>
      <Box
        sx={{
          "& > :not(style)": { m: 1, width: "25ch" },
        }}
      >
        <TextField label="Key" variant="outlined" value={loadKey} onChange={(e) => setLoadKey(e.target.value)}/>
        <TextField label="Value" variant="outlined" value={loadValue}/>
        <Button variant="outlined" color="secondary" onClick={handleLoad}>
          불러오기
        </Button>
      </Box>
    </div>
  );
};

export default App;