如何实现localStorage同步？React App.js集成useLocalStorage自定义Hook咨询

你编写的useLocalStorage本身逻辑是可用的，它的调用规则和React官方提供的useState完全一致，直接在App组件顶层调用即可。

第一步：补全App.js的基础依赖导入 #

你当前提供的App.js代码遗漏了部分必要导入，先补全基础依赖：

import { useDispatch, useEffect } from "react";
import { BrowserRouter } from "react-router-dom";
import { useDispatch } from "react-redux";
// 补充你项目中其他依赖的导入：LastLocationProvider、Navbar、Routes、Footer、封装后的axios等
import useLocalStorage from "./hooks/useLocalStorage";

第二步：调用useLocalStorage #

调用时传入两个参数：

1. 第一个是本地存储的唯一键名（必填，用来区分不同的存储项）
2. 第二个是初始默认值（选填，默认是null，当本地存储没有对应键值时会用这个值）

返回值是长度为2的数组：第一个是存储的变量，第二个是更新变量的方法，更新时会自动同步到localStorage。

修改后的完整App.js示例（以存储用户主题偏好为例） #

import { useDispatch, useEffect } from "react";
import { BrowserRouter } from "react-router-dom";
import { useDispatch } from "react-redux";
import axios from "axios";
import useLocalStorage from "./hooks/useLocalStorage";
// 项目其他组件导入
import LastLocationProvider from "./components/LastLocationProvider";
import Navbar from "./components/Navbar";
import Routes from "./routes";
import Footer from "./components/Footer";

const App = () => {
    const dispatch = useDispatch();
    // 调用useLocalStorage：键名为theme，默认值为light
    const [theme, setTheme] = useLocalStorage("theme", "light");

    useEffect(() => {
        dispatch(axios());
        // 测试读取存储的值
        console.log("当前存储的主题：", theme);
    }, []);

    // 测试更新存储值的方法，可传给子组件使用
    const toggleTheme = () => {
        setTheme(theme === "light" ? "dark" : "light");
    };

    return (
        <BrowserRouter>
            <LastLocationProvider>
                <Navbar theme={theme} toggleTheme={toggleTheme} />
                <Routes theme={theme} />
                <Footer />
            </LastLocationProvider>
        </BrowserRouter>
    );
};

export default App;

原有useLocalStorage的优化建议 #

你当前的版本只能存储字符串类型的值，如果要存储数字、对象、数组等类型，会出现类型丢失问题，建议优化为支持序列化的版本：

import { useState, useEffect } from "react";

function useLocalStorage(key, firstValue = null) {
    // 反序列化读取值，兼容非字符串类型
    const initialValue = localStorage.getItem(key) 
        ? JSON.parse(localStorage.getItem(key)) 
        : firstValue;
    const [item, setItem] = useState(initialValue);
    
    useEffect(function setKeyInLocalStorage() {
        console.debug("hooks useLocalStorage useEffect", "item=", item);
        if (item === null) {
            localStorage.removeItem(key);
        } else {
            // 序列化后存储，保留数据类型
            localStorage.setItem(key, JSON.stringify(item));
        }
    }, [key, item]);
    
    return [item, setItem];
}

export default useLocalStorage;

其他常见使用场景 #

• 存储用户登录态token：const [token, setToken] = useLocalStorage("user_token")
• 存储用户搜索历史：const [searchHistory, setSearchHistory] = useLocalStorage("search_history", [])

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