在React应用中，如何在每次页面刷新时将localStorage的值增加1？

Question

在我的React应用中，我将localStorage项count设置为值1。

useEffect(() => {
  window.localStorage.setItem('count', String(1));
}, []);

如何在每次页面刷新时将此localStorage值递增1？

Josh Lee · Answer

在将值写入localStorage之前，检查该值是否存在，如果存在则递增，否则设置为1。

useEffect(() => {
    let val = window.localStorage.getItem('count');
    val = val ? parseInt(val) : 0
    window.localStorage.setItem('count', String(val + 1));
}, []);

参考文献：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Ole Begemann · Answer

要在 localStorage 中递增 count 项的值，你可以在 useEffect 钩子中使用以下代码：

useEffect(() => {
  // 获取当前存储的计数值，如果不存在则默认为 0
  const currentCount = Number(window.localStorage.getItem('count')) || 0;
  // 将递增后的计数值重新存入 localStorage
  window.localStorage.setItem('count', String(currentCount + 1));
}, []); // 空依赖数组意味着仅在组件挂载时执行一次该逻辑

注意：

还可以观察到，在开发环境中由于新的 React18 特性，页面刷新会导致计数增加两次[1]。

参考文档

附注：
当在 React 应用中结合使用 React.StrictMode 时，它可能会导致组件在开发模式下进行两次渲染。这意味着上述代码在每次应用重新渲染时（例如，由于页面刷新）会运行两次，从而导致计数值意外增加两次。要修复这个问题，通常需要确保对副作用进行适当的管理，以避免重复执行影响状态的操作。在上述代码示例中，由于 useEffect 的依赖数组为空，理论上只会执行一次，但在严格模式下仍可能出现两次执行的现象。在实际项目中应关注这种行为，并根据需要调整逻辑以适应这种双渲染机制。