LocalStorage、Session

Nash

• 3 min read

一、三者的用途概述

1. 🛠️ LocalStorage

LocalStorage 是一种浏览器提供的持久化存储方式，主要用于存储较大容量的、长期存在的客户端数据。

  • 特性：
  • 存储在浏览器中，大小限制通常为 5MB。
  • 数据不会随浏览器会话结束而消失。
  • 支持键值对存储，数据以字符串形式存储。
  • 适用场景：
  • 🎨 保存用户的个性化设置（如举例为主题颜色）。
  • ⭐️ 缓存页面内容以优化加载速度。

2. ⏳ Session

Session 是服务器端的会话存储技术，用于跟踪用户的状态。

  • 特性：
  • 数据存储在服务器中，每个用户的 Session 数据通常通过唯一的 Session ID 与客户端绑定。
  • 生命周期由服务器配置，默认情况下，Session 在用户关闭浏览器后失效。
  • 适用场景：
  • 🔐 保存用户登录状态。
  • 🛒 管理跨页面的临时数据（如购物车）。

Cookie 是存储在客户端的小型文本文件，用于保存与服务器交互的少量数据。

  • 特性：
  • 通常大小限制为 4KB。
  • 可以设置过期时间：短期或长期保存。
  • 自动随请求发送给服务器，适合存储与服务器交互所需的信息。
  • 适用场景：
  • 🏛️ 实现会话保持（如存储 Session ID）。
  • 📓 记住用户偏好（如登录状态）。

二、三者的核心区别

特性 LocalStorage Session Cookie
存储位置 客户端浏览器 服务器端 客户端浏览器
数据存储大小限制 ~5MB 由服务器决定 ~4KB
生命周期 持久（需手动清除） 默认会话结束失效 可设定过期时间
是否随请求发送 否 否 是
使用场景 缓存、个性化设置 用户状态管理 会话管理、小型数据存储

三、示例用法

1. LocalStorage 示例

用途：存储用户主题偏好。

// 保存数据
localStorage.setItem('theme', 'dark');

// 获取数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出 "dark"

// 删除数据
localStorage.removeItem('theme');

// 清除所有数据
localStorage.clear();

2. Session 示例

用途：在服务器上保存用户登录状态（后端示例：Node.js + Express）。

// 安装 express-session
// npm install express-session

const session = require('express-session');
const express = require('express');
const app = express();

app.use(session({
  secret: 'my-secret-key',
  resave: false,
  saveUninitialized: true
}));

// 设置 session 数据
app.post('/login', (req, res) => {
  req.session.user = { id: 1, name: 'John Doe' };
  res.send('Session set!');
});

// 获取 session 数据
app.get('/profile', (req, res) => {
  if (req.session.user) {
    res.send(`Welcome ${req.session.user.name}`);
  } else {
    res.status(401).send('Unauthorized');
  }
});

// 销毁 session 数据
app.post('/logout', (req, res) => {
  req.session.destroy();
  res.send('Logged out');
});

用途：保存用户偏好设置。

前端示例：

// 设置 Cookie
function setCookie(name, value, days) {
  const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
  document.cookie = `${name}=${value}; expires=${expires}; path=/`;
}

// 获取 Cookie
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return value;
  }
  return null;
}

// 示例调用
setCookie('language', 'en', 7); // 设置 7 天有效期的 Cookie
console.log(getCookie('language')); // 输出 "en"

后端示例（Node.js + Express）：

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser());

// 设置 Cookie
app.get('/set-cookie', (req, res) => {
  res.cookie('language', 'en', { maxAge: 7 * 24 * 60 * 60 * 1000 }); // 7 天有效期
  res.send('Cookie set');
});

// 读取 Cookie
app.get('/get-cookie', (req, res) => {
  const language = req.cookies.language;
  res.send(`Language is ${language}`);
});

四、总结

  • LocalStorage：适合存储持久化的、较大体积的数据，完全由前端管理。
  • Session：适合存储需要保护的用户状态，依赖服务器的安全性。
  • Cookie：适合存储少量、与服务器交互相关的数据。

选择存储方式时应根据应用场景权衡性能、安全性与数据量，并结合现代前端框架或库（如 Redux、React Context）进行数据管理。

苏ICP备2025153828号