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

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 中的数据

// 检查是否存在某个 keyconst 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')); // 输出: Kimiconsole.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

// 设置一个简单的Cookiefunction 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

// 获取Cookiefunction 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

// 删除Cookiefunction 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 中的数据

// 检查是否存在某个 keyconst 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')); // 输出: sessionValueconsole.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攻击。

应用场景

localStorage：

存储用户偏好设置，如主题、布局等。存储不敏感的大量数据，如草稿内容。

cookie：

跟踪用户会话状态，如登录状态。个性化用户界面，如保存用户的语言偏好。

session：

存储用户登录状态和权限信息。存储购物车内容，因为这些信息需要跨多个页面和会话保持一致。

总的来说，localStorage 适合存储大量且不敏感的数据，cookie 适合跟踪会话和个性化设置，而session 适合存储敏感的、需要跨多个页面和会话保持一致的数据。