即使在“忙碌的假期”也学习 React —— 使用 useEffect 将数据保存到 Local Storage

Source: Dev.to

为什么在 React 中使用 localStorage？

当你刚开始学习 React 时，很多示例的数据都是临时的：刷新页面后所有内容都会消失。真实的应用却需要持久化数据，例如：

• 用户偏好
• 主题设置
• 已观看的电影
• 购物车商品
• 表单草稿

localStorage 让浏览器能够持久存储数据，即使页面重新加载或浏览器重启也不会丢失。

State 与 localStorage 的区别

• React state 存在于内存中（临时）。
• localStorage 存在于浏览器中（持久）。

目标不是取代 state，而是 让 state 与 localStorage 同步。先从 localStorage 读取数据，就可以避免硬编码默认值。

从 localStorage 初始化 State

使用状态回调函数可以确保读取只在首次渲染时执行一次：

import { useState } from "react";

const [items, setItems] = useState(() => {
  const stored = localStorage.getItem("items");
  return stored ? JSON.parse(stored) : [];
});

为什么这很重要

• 该函数只运行一次，避免在每次渲染时都进行不必要的读取。
• 应用会自动加载已保存的数据。

用 useEffect 同步 localStorage

每当 state 变化时，我们需要更新 localStorage。useEffect 在渲染后执行，依赖数组保证只有在指定的 state 变化时才运行。

import { useEffect } from "react";

useEffect(() => {
  localStorage.setItem("items", JSON.stringify(items));
}, [items]);

关键点

• useEffect 在组件 渲染之后 运行。
• 依赖数组 ([items]) 确保只有在 items 改变时才触发 effect。
• 这使得浏览器存储始终保持最新。

处理数据类型

localStorage 只能存储 字符串。因此：

• 对象 → JSON.stringify(obj)
• 数组 → JSON.stringify(arr)
• 读取时 → JSON.parse(storedString)

忘记进行 stringify/parse 会导致细微的 bug。

要点总结

• 使用 localStorage 持久化数据是面向真实项目的 React 开发中一个小而必不可少的习惯。
• 使用状态初始化回调一次性读取 localStorage。
• 通过依赖于 state 的 useEffect 将状态同步回 localStorage。
• 存储前一定要 stringify，取出后要 parse。

通过这些模式，你的 React 应用能够在真实用户操作和页面刷新中保持数据不丢失，即使在忙碌的日子里也能保持持续的开发动能。