Next.js localStorage与sessionStorage[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

localStorage 和 sessionStorage 是浏览器提供的两种客户端存储机制，允许在用户的浏览器中存储键值对数据。它们在Next.js中的应用与其他前端框架类似，但由于Next.js的服务器端渲染（SSR）特性，使用时需要特别注意。

localStorage: 数据持久化存储，除非手动清除，否则会一直保留。
sessionStorage: 数据仅在当前会话期间有效，关闭标签页后自动清除。

基本区别[编辑 | 编辑源代码]

特性	localStorage	sessionStorage
作用域	同源的所有标签页	仅当前标签页
生命周期	永久（除非手动清除）	会话结束（关闭标签页）
存储大小	通常5MB	通常5MB
访问方式	window.localStorage	window.sessionStorage

在Next.js中的使用[编辑 | 编辑源代码]

由于Next.js支持服务器端渲染，直接访问window对象会导致错误。必须确保代码在客户端执行。

基本用法示例[编辑 | 编辑源代码]

// 仅在客户端使用
if (typeof window !== 'undefined') {
  // 存储数据
  localStorage.setItem('theme', 'dark');
  sessionStorage.setItem('sessionID', 'abc123');

  // 读取数据
  const theme = localStorage.getItem('theme');
  const sessionId = sessionStorage.getItem('sessionID');

  console.log(theme); // 输出: dark
  console.log(sessionId); // 输出: abc123
}

自定义Hook封装[编辑 | 编辑源代码]

推荐创建自定义Hook来安全地使用这些API：

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') return initialValue;
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

实际应用案例[编辑 | 编辑源代码]

主题切换功能[编辑 | 编辑源代码]

使用localStorage保存用户选择的主题：

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <button onClick={toggleTheme}>
      切换主题（当前: {theme}）
    </button>
  );
}

表单数据暂存[编辑 | 编辑源代码]

使用sessionStorage保存表单数据，防止意外刷新导致数据丢失：

function FormComponent() {
  const [formData, setFormData] = useState(() => {
    if (typeof window === 'undefined') return { name: '', email: '' };
    const savedData = window.sessionStorage.getItem('formData');
    return savedData ? JSON.parse(savedData) : { name: '', email: '' };
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    const newData = { ...formData, [name]: value };
    setFormData(newData);
    if (typeof window !== 'undefined') {
      window.sessionStorage.setItem('formData', JSON.stringify(newData));
    }
  };

  // 表单提交后清除sessionStorage
  const handleSubmit = () => {
    sessionStorage.removeItem('formData');
    // 提交逻辑...
  };
}