Web存储技术：localStorage、Cookie与Session全面解析

最新推荐文章于 2025-03-26 19:32:15 发布

盛夏绽放

最新推荐文章于 2025-03-26 19:32:15 发布

阅读量1.6k

点赞数 30

文章标签：前端服务器网络

本文链接：https://blog.csdn.net/x15514104477/article/details/144174173

版权

Web存储技术：localStorage、Cookie与Session全面解析

1. localStorage

localStorage知识点

localStorage 是 Web Storage API 的一部分，它允许网站和应用在用户的浏览器中存储数据。以下是关于 localStorage 的一些详细知识点：

存储容量：
- localStorage 提供的数据存储量通常比 sessionStorage 大，大多数现代浏览器为 localStorage 提供了至少5MB的存储空间。
数据存储期限：
- 存储在 localStorage 中的数据没有过期时间，即使关闭浏览器窗口后数据依然存在，直到主动删除。
数据存储类型：
- localStorage 只能存储字符串类型的数据。如果需要存储对象，需要使用 JSON.stringify() 转换为字符串，读取时使用 JSON.parse() 转换回对象。
同源策略：
- 出于安全考虑，localStorage 受到同源策略的限制。只有相同协议、主机名和端口号的页面才能共享 localStorage 数据。
API 方法：
- localStorage.setItem(key, value)：存储数据。key 是字符串，value 也是字符串。
- localStorage.getItem(key)：根据 key 获取数据。
- localStorage.removeItem(key)：根据 key 删除数据。
- localStorage.clear()：清除所有数据。
- localStorage.key(index)：获取存储中指定位置的 key。
- localStorage.length：获取存储中数据项的数量。
事件监听：
- 页面可以通过监听 storage 事件来检测 localStorage 的变化，这在跨标签页或窗口的数据同步中非常有用。
安全性和隐私：
- localStorage 是在客户端存储的，因此对所有可以访问该网站的脚本都是可见的，这可能带来安全风险。
- 用户可以通过浏览器设置清除 localStorage 数据，或者开发者可以在代码中实现数据的加密和解密。
兼容性：
- localStorage 在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不可用。
使用场景：
- localStorage 适用于需要跨会话持久存储数据的场景，如用户偏好设置、主题选择等。
与 sessionStorage 的区别：
- sessionStorage 与 localStorage 类似，但它的数据仅在页面会话期间有效，关闭浏览器标签页后数据会被清除。
性能考虑：
- 频繁地读写 localStorage 可能会影响页面性能，尤其是在存储大量数据时。
跨域问题：
- 由于同源策略的限制，不同域之间的页面不能共享 localStorage 数据。

了解这些知识点可以帮助你更好地使用 localStorage 来存储和管理网页应用的数据。

`localStorage`使用方法

以下是一些基本的 localStorage 使用方法，通过 JavaScript 代码示例来展示：

存储数据到 localStorage

// 存储字符串
localStorage.setItem('username', 'Kimi');

// 存储对象，需要先转换为字符串
const user = { name: 'Kimi', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

从 localStorage 获取数据

// 获取字符串
const username = localStorage.getItem('username');

// 获取对象，需要转换回对象
const userString = localStorage.getItem('user');
const user = userString ? JSON.parse(userString) : null;

移除 localStorage 中的数据

// 根据 key 移除
localStorage.removeItem('username');

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

检查 localStorage 中的数据

// 检查是否存在某个 key
const hasUsername = localStorage.getItem('username') !== null;

// 获取存储的数据项数量
const length = localStorage.length;

使用 localStorage 的事件监听

// 监听 storage 事件
window.addEventListener('storage', function(event) {
    if (event.key === 'username') {
        console.log(`Username has changed to: ${event.newValue}`);
    }
});

示例：完整的 localStorage 使用

// 存储数据
function storeData(key, value) {
    if (typeof value === 'object') {
        localStorage.setItem(key, JSON.stringify(value));
    } else {
        localStorage.setItem(key, value);
    }
}

// 获取数据
function getData(key) {
    const value = localStorage.getItem(key);
    try {
        return JSON.parse(value);
    } catch (e) {
        return value;
    }
}

// 移除数据
function removeData(key) {
    localStorage.removeItem(key);
}

// 清除所有数据
function clearData() {
    localStorage.clear();
}

// 使用示例
storeData('username', 'Kimi');
storeData('user', { name: 'Kimi', age: 30 });

console.log(getData('username')); // 输出: Kimi
console.log(getData('user')); // 输出: { name: 'Kimi', age: 30 }

removeData('username');
clearData();

这些代码示例展示了如何使用 localStorage 来存储、检索、移除和监听数据。在实际应用中，你可以根据需要调整这些函数以适应不同的场景。

2. cookie

Cookie知识点

Cookie 是一种存储在用户本地计算机上的数据，它由服务器创建并发送给用户的浏览器，浏览器会将其存储起来，并在随后的请求中自动发送回服务器。以下是关于 Cookie 的一些详细知识点：

目的和用途：
- Cookie 主要用于识别用户会话、个性化用户体验、跟踪用户行为等。
创建和发送：
- Cookie 由服务器在 HTTP 响应头中使用 Set-Cookie 字段发送给浏览器。
存储和发送：
- 浏览器会将接收到的 Cookie 存储在本地，并在之后对同一服务器的每个请求中，通过 HTTP 请求头中的 Cookie 字段自动发送这些 Cookie。
生命周期：
- Cookie 可以设置有效期，过期后会被浏览器删除。如果不设置有效期，Cookie 就是会话级别的，浏览器关闭后会被清除。
属性：
- Name-Value 对：每个 Cookie 由一个名称和一个值组成。
- Expires/Max-Age：定义 Cookie 的有效期。
- Domain：指定哪些域名可以接收 Cookie。
- Path：指定路径，只有指定路径下的页面可以访问 Cookie。
- Secure：指示 Cookie 仅通过 HTTPS 传输。
- HttpOnly：使 Cookie 不能被客户端脚本访问，有助于防止跨站脚本攻击（XSS）。
- SameSite：限制第三方 Cookie，以减少 CSRF 攻击的风险。
容量限制：
- 每个域名下可以存储的 Cookie 数量有限，通常不超过 20 个。
- 单个 Cookie 的大小限制通常在 4KB 左右。
安全性：
- 由于 Cookie 可以被拦截，因此敏感信息不应存储在 Cookie 中。
- 使用 Secure 和 HttpOnly 属性可以提高 Cookie 的安全性。
跨域问题：
- 出于安全考虑，Cookie 默认是与域绑定的，不同域的页面不能共享 Cookie，除非明确设置 Domain 属性。
与 Web Storage 的区别：
- Web Storage（如 localStorage 和 sessionStorage）提供了更大的存储空间，并且数据存储在客户端，不随请求发送。而 Cookie 每次请求都会发送，适合存储少量数据。
Cookie 管理：
- 用户和开发者都可以手动删除 Cookie，浏览器也提供了清除 Cookie 的选项。
Cookie 隔离：
- 为了防止 Cookie 冲突，不同的应用程序或子域应该使用不同的 Cookie。
Cookie 滥用：
- Cookie 可以被用来跟踪用户行为，因此需要合理使用，并遵守隐私政策。
兼容性：
- Cookie 被所有现代浏览器支持，但一些隐私保护模式或设置可能会阻止 Cookie 的使用。

了解 Cookie 的这些知识点可以帮助你更好地管理网站的身份验证、用户偏好设置以及用户跟踪等，同时确保应用的安全性和用户隐私。

Cookie使用方法

在Web开发中，Cookie可以通过多种方式设置和获取，以下是一些基本的Cookie操作方法，通过JavaScript代码示例来展示：

设置Cookie

// 设置一个简单的Cookie
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 使用示例
setCookie('username', 'Kimi', 7); // 设置一个7天后过期的Cookie

获取Cookie

// 获取Cookie
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 使用示例
console.log(getCookie('username')); // 输出: Kimi

删除Cookie

// 删除Cookie
function eraseCookie(name) {   
    document.cookie = name + '=; Max-Age=-99999999;';  
}

// 使用示例
eraseCookie('username'); // 删除名为'username'的Cookie

设置Cookie的属性

// 设置Cookie，包括路径、域、安全标志等
function setCookieWithAttributes(name, value, days, path, domain, secure) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    var cookieString = name + "=" + (value || "") + expires + "; path=" + (path || "/");
    if (domain) cookieString += "; domain=" + domain;
    if (secure) cookieString += "; secure";
    document.cookie = cookieString;
}

// 使用示例
setCookieWithAttributes('username', 'Kimi', 7, '/', 'example.com', true);

注意事项

Cookie的Max-Age属性用于指定生存期，单位为秒。如果设置为负数，则表示删除Cookie。
path属性指定Cookie对于哪些路径可用，如果未指定，默认为当前路径及其子路径。
domain属性指定哪些域可以访问Cookie。
secure属性指示Cookie仅通过加密协议传输，通常用于HTTPS。
HttpOnly属性可以防止客户端脚本访问Cookie，有助于防止跨站脚本攻击（XSS）。

这些代码示例展示了如何使用JavaScript来设置、获取和删除Cookie，以及如何设置Cookie的各种属性。在实际应用中，你可以根据需要调整这些函数以适应不同的场景。

3. session

session知识点

关于 sessionStorage 的详细知识点如下：

会话存储机制：
- sessionStorage 是 Web Storage API 的一部分，用于在单个会话期间存储数据，即数据仅在页面会话期间可用，会话期间包括页面重新加载和恢复。
数据存储期限：
- 数据存储在 sessionStorage 中，仅在当前会话有效，关闭浏览器或标签页后数据会被清除。
同源策略限制：
- sessionStorage 受到同源策略的限制，只有相同协议、主机名和端口号的页面才能共享 sessionStorage 数据。
单标签页限制：
- sessionStorage 操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享 sessionStorage 数据。
数据存储类型：
- sessionStorage 只能存储字符串类型的数据，对于对象或数组需要使用 JSON.stringify() 转换为字符串存储，读取时使用 JSON.parse() 转换回对象。
存储容量：
- 存储限额大于 cookie，大多数浏览器把上限限制在 5MB 以下。
API 方法：
- sessionStorage.setItem(key, value)：存储数据。
- sessionStorage.getItem(key)：根据 key 获取数据。
- sessionStorage.removeItem(key)：根据 key 删除数据。
- sessionStorage.clear()：清除所有数据。
- sessionStorage.key(index)：返回指定索引的 key。
- sessionStorage.length：返回存储中数据项的数量。
数据隔离：
- 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
安全性：
- 存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议，即 http://example.com 与 https://example.com 的 sessionStorage 相互隔离。
适用场景：
- sessionStorage 非常适合 SPA(单页应用程序)，可以方便在各业务模块进行传值。
与 localStorage 的区别：
- localStorage 存储的数据是持久的，而 sessionStorage 存储的数据在会话结束时被清除。
与 Cookie 的区别：
- sessionStorage 存储在客户端，不会随每次请求发送到服务器，而 Cookie 每次请求都会携带数据，影响性能。

以上是 sessionStorage 的一些核心知识点，希望对你有所帮助。

客户端session用法

在Web开发中，session 通常指的是服务器端的会话存储，用于跟踪用户状态。然而，如果你是指 sessionStorage，这是Web Storage API的一部分，用于在单个会话期间存储数据，下面将提供 sessionStorage 的使用方法：

存储数据到 sessionStorage

// 存储字符串
sessionStorage.setItem('sessionKey', 'sessionValue');

// 存储对象，需要先转换为字符串
const sessionObject = { name: 'Kimi', age: 30 };
sessionStorage.setItem('sessionObject', JSON.stringify(sessionObject));

从 sessionStorage 获取数据

// 获取字符串
const sessionValue = sessionStorage.getItem('sessionKey');

// 获取对象，需要转换回对象
const sessionObjectString = sessionStorage.getItem('sessionObject');
const sessionObject = sessionObjectString ? JSON.parse(sessionObjectString) : null;

移除 sessionStorage 中的数据

// 根据 key 移除
sessionStorage.removeItem('sessionKey');

// 移除所有数据
sessionStorage.clear();

检查 sessionStorage 中的数据

// 检查是否存在某个 key
const hasSessionKey = sessionStorage.getItem('sessionKey') !== null;

// 获取存储的数据项数量
const length = sessionStorage.length;

使用 sessionStorage 的事件监听

// 监听 storage 事件
window.addEventListener('storage', function(event) {
    if (event.key === 'sessionKey') {
        console.log(`Session value has changed to: ${event.newValue}`);
    }
});

示例：完整的 sessionStorage 使用

// 存储数据
function storeSessionData(key, value) {
    if (typeof value === 'object') {
        sessionStorage.setItem(key, JSON.stringify(value));
    } else {
        sessionStorage.setItem(key, value);
    }
}

// 获取数据
function getSessionData(key) {
    const value = sessionStorage.getItem(key);
    try {
        return JSON.parse(value);
    } catch (e) {
        return value;
    }
}

// 移除数据
function removeSessionData(key) {
    sessionStorage.removeItem(key);
}

// 清除所有数据
function clearSessionData() {
    sessionStorage.clear();
}

// 使用示例
storeSessionData('sessionKey', 'sessionValue');
storeSessionData('sessionObject', { name: 'Kimi', age: 30 });

console.log(getSessionData('sessionKey')); // 输出: sessionValue
console.log(getSessionData('sessionObject')); // 输出: { name: 'Kimi', age: 30 }

removeSessionData('sessionKey');
clearSessionData();

这些代码示例展示了如何使用 sessionStorage 来存储、检索、移除和监听数据。在实际应用中，你可以根据需要调整这些函数以适应不同的场景。

服务端session方法

Node.js 本身并没有内置的 session 管理功能，但可以通过中间件来实现，最常用的是 express-session 这个中间件。以下是如何在 Node.js 中使用 session 的基本步骤：

安装 express-session 中间件：
使用 npm 或 yarn 安装 express-session。
```
npm install express-session
```
或者
```
yarn add express-session
```

配置 express-session：
在你的 Node.js 应用中，引入并配置 express-session。

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

const app = express();

// 配置 session 中间件
app.use(session({
  secret: 'your_secret_key', // 用于签名 session ID  cookie 的密钥
  resave: false, // 是否重新保存 session，即使它没有被修改
  saveUninitialized: true, // 是否自动保存未初始化的 session
  cookie: { secure: false } // 设置 cookie 的选项
}));

使用 session：
在路由处理函数中，你可以通过 req.session 来访问和设置 session。

app.get('/', (req, res) => {
  if (req.session.views) {
    req.session.views++;
  } else {
    req.session.views = 1;
  }
  res.send(`This page has been viewed ${req.session.views} times`);
});

设置和获取 session 数据：
你可以在 session 中存储任何数据，只要它们是可序列化的。

// 设置 session 数据
req.session.user = { name: 'John Doe' };

// 获取 session 数据
const user = req.session.user;

销毁 session：
当你需要销毁 session 时，可以这样做：

req.session.destroy((err) => {
  if (err) {
    return next(err);
  }
  res.redirect('/');
});

存储 session：
默认情况下，express-session 将 session 存储在内存中，这对于开发是足够的，但在生产环境中，你可能需要使用更可靠的存储解决方案，如 Redis 或 MongoDB。你可以使用 connect-redis 或 connect-mongo 这样的适配器来实现。

npm install connect-redis redis

或者

yarn add connect-redis redis

然后配置 express-session 使用 Redis：

const RedisStore = require('connect-redis')(session);
const redisClient = require('redis').createClient();

app.use(session({
  store: new RedisStore({ client: redisClient }),
  secret: 'your_secret_key',
  resave: false,
  saveUninitialized: false
}));

请注意，这里的代码示例是基本的用法，实际应用中可能需要根据具体情况进行调整。例如，你可能需要配置更多的 cookie 选项，或者处理 session 的安全性问题。

三者的区别

存储位置：
- localStorage 和 cookie 存储在客户端，session 存储在服务器端。
存储大小：
- localStorage 的存储空间大于 cookie，session 的存储空间理论上没有限制。
存储周期：
- localStorage 是持久存储，cookie 可以设置过期时间，session 的生命周期依赖于会话的持续时间。
访问限制：
- localStorage 只能被同源页面访问，cookie 可以通过设置属性来控制访问，session 只能被创建它的服务器访问。
数据类型：
- localStorage 和 cookie 只能存储字符串，session 可以存储任何类型的数据。
安全性：
- session 最安全，因为存储在服务器端；cookie 次之，可以通过设置HttpOnly属性增加安全性；localStorage 最不安全，因为数据存储在客户端，容易被XSS攻击。