如何在React中使用localStorage实现刷新页面后计数器值保留

你的代码存在两个核心问题，导致刷新后计数器重置为0：

1. 初始化状态时未从localStorage读取已保存的值，默认直接设为0
2. 在组件顶层直接调用localStorage.setItem会导致每次渲染都执行，且因setCount是异步更新，存入的往往是旧的count值

以下是修正后的完整方案：

步骤1：从localStorage初始化计数器状态 #

将useState的初始值改为从localStorage读取，注意要把存储的字符串转成数字：

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem("count");
  // 存在则转成数字，不存在默认0
  return savedCount ? parseInt(savedCount, 10) : 0;
});

用函数式初始化的好处是仅在组件第一次挂载时读取一次localStorage，避免重复操作。

步骤2：同步更新localStorage #

不要在组件顶层直接存储，而是通过useEffect监听count的变化，当count更新时再同步到localStorage：

useEffect(() => {
  localStorage.setItem("count", count);
}, [count]);

依赖数组[count]确保只有count真正改变时才执行存储操作，避免无效的重复存储。

你也可以选择在点击事件里直接同步存储，逻辑更直观：

const handleClick = () => {
  setCount((prevCount) => {
    const newCount = prevCount + 1;
    localStorage.setItem("count", newCount);
    return newCount;
  });
};

完整代码示例 #

import React, { useState, useEffect } from "react";

export default function LocalStorageSetting() {
  const [count, setCount] = useState(() => {
    const savedCount = localStorage.getItem("count");
    return savedCount ? parseInt(savedCount, 10) : 0;
  });

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  useEffect(() => {
    localStorage.setItem("count", count);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Increase</button>
      <h1>{count}</h1>
    </div>
  );
}

关键注意点 #

• localStorage仅支持存储字符串，读取时必须用parseInt或Number转成数字类型，否则会出现字符串拼接问题（比如点击后变成"01"）
• 若需存储复杂数据（如对象），可使用JSON.stringify序列化后存储，读取时用JSON.parse解析

内容的提问来源于stack exchange，提问作者dynamitetech