ToB企服应用市场:ToB评测及商务社交产业平台

标题: Web存储技能：localStorage、Cookie与Session全面解析 [打印本页]

作者: 金歌 时间: 2024-12-24 00:03
标题: 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 中的数据
// 查抄是否存在某个 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;
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攻击。

应用场景

localStorage：

存储用户偏好设置，如主题、布局等。

存储不敏感的大量数据，如草稿内容。

cookie：

跟踪用户会话状态，如登录状态。

个性化用户界面，如保存用户的语言偏好。

session：

存储用户登录状态和权限信息。

存储购物车内容，由于这些信息需要跨多个页面和会话保持一致。

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4