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 利用方法，通过 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利用方法
在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` 存储的数据是持久的，而 `sessionStorage` 存储的数据在会话结束时被清除。
- * `sessionStorage` 存储在客户端，不会随每次请求发送到服务器，而 Cookie 每次请求都会携带数据，影响性能。
客户端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
- 设置 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
- 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企服之家，中国第一个企服评测及商务社交产业平台。 |
