发布于 由admin

localStorage, sessionStorage, Cookie 有什么区别？它们的存储容量、生命周期和应用场景各是什么？

大家好，欢迎来到“前端存储大乱斗：LocalStorage、SessionStorage、Cookie 终极PK！”

今天咱们来聊聊前端开发中那些个存储数据的小伙伴们：localStorage、sessionStorage 和 Cookie。它们就像是你的浏览器里的小仓库，帮你记住一些东西，比如用户的偏好设置、登录状态等等。但是，它们又各有各的脾气和用途，用错了地方，可是会闹笑话的。

咱们今天就来一场“存储大乱斗”，把它们扒个底朝天，看看谁才是真正的“存储之王”！

第一回合：身世背景大揭秘

咱们先来认识一下这三位“选手”：

  • localStorage： 这位老兄是 HTML5 冒出来的，野心勃勃，想在浏览器里永久保存点东西。除非你手动清除，或者浏览器缓存被清理，否则它会一直待在那里。

  • sessionStorage： 这位小弟也是 HTML5 的产物，但比较“短命”。它只在当前会话（session）有效，也就是说，你关掉浏览器标签页或者窗口，它就灰飞烟灭了。

  • Cookie： 这位老前辈可就历史悠久了，HTTP 协议自带的。它是由服务器生成，存储在客户端（浏览器）的一小段文本信息。每次浏览器向服务器发起请求，都会自动带上相应的 Cookie。

第二回合：容量大比拼

存储东西，当然得看仓库够不够大！

存储方式 容量限制
localStorage 大约 5MB
sessionStorage 大约 5MB
Cookie 大约 4KB

从上面的表格可以看出，localStorage 和 sessionStorage 在容量上完胜 Cookie。Cookie 只能存储一些小信息，而 localStorage 和 sessionStorage 可以存储更多的数据。

这就像是，localStorage 和 sessionStorage 是大型仓库，可以放一些大件商品，而 Cookie 只是一个小小的储物柜，只能放一些零碎的小东西。

第三回合：生命周期大PK

存储的东西能存多久，也是非常重要的！

  • localStorage： 永久有效，除非你手动删除，或者浏览器清除缓存。

  • sessionStorage： 只在当前会话有效，关闭浏览器标签页或窗口就失效。

  • Cookie： 可以设置过期时间（Expires 或 Max-Age），如果没设置，则在会话结束时失效（Session Cookie）。

localStorage 就像一个时间胶囊，把东西放进去，可以保存很久很久。sessionStorage 就像一个临时寄存柜，只能存放短暂的信息。Cookie 则可以根据你的需要，选择存放的时间长短。

Cookie 的过期时间设置

// 设置 Cookie 的过期时间为 30 天
document.cookie = "username=John Doe; expires=" + new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toUTCString();

// 设置 Cookie 的最大生存时间为 30 天 (单位：秒)
document.cookie = "username=John Doe; max-age=" + (30 * 24 * 60 * 60);

// 删除 Cookie (设置过期时间为过去的时间)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

注意： 删除 Cookie 的时候，path 属性必须和设置 Cookie 时的 path 属性一致，否则无法删除。

第四回合：应用场景大作战

了解了它们的特性，咱们来看看它们各自擅长什么：

  • localStorage：

    • 记住用户的偏好设置： 比如主题颜色、字体大小、语言选择等等。 
      
// 保存主题颜色
localStorage.setItem('themeColor', 'dark');

    // 获取主题颜色
    const themeColor = localStorage.getItem(‘themeColor’);

    
*   **离线应用的数据存储：** 比如待办事项列表、草稿等等。
```javascript
// 保存待办事项列表
const todos = ['Buy milk', 'Walk the dog'];
localStorage.setItem('todos', JSON.stringify(todos));

// 获取待办事项列表
const storedTodos = localStorage.getItem('todos');
const todosList = JSON.parse(storedTodos);

  • sessionStorage：

    • 保存敏感数据： 比如用户的登录状态、购物车信息等等。当用户关闭浏览器，这些数据就会被清除，安全性更高。 
      
// 保存用户登录状态
sessionStorage.setItem('isLoggedIn', 'true');

    // 检查用户是否登录
    const isLoggedIn = sessionStorage.getItem(‘isLoggedIn’);

    
*   **单页面应用（SPA）中的数据传递：** 比如页面之间的状态共享。
```javascript
// 在页面 A 中保存数据
sessionStorage.setItem('currentPage', 'pageA');

// 在页面 B 中获取数据
const currentPage = sessionStorage.getItem('currentPage');

  • Cookie：

    • 身份验证： 服务器可以通过 Cookie 来跟踪用户的登录状态。
    • 个性化推荐： 根据用户的浏览历史，推荐相关商品。
    • 跟踪用户行为： 统计网站的访问量、用户来源等等。

    注意： 尽量避免在 Cookie 中存储敏感信息，比如用户的密码、银行卡号等等。因为 Cookie 容易被窃取，存在安全风险。如果必须存储敏感信息，一定要进行加密处理。

    // 设置 Cookie
document.cookie = "username=John Doe; path=/;";

// 获取 Cookie
function getCookie(name) {
  const cookieName = name + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookieArray = decodedCookie.split(';');
  for(let i = 0; i < cookieArray.length; i++) {
    let cookie = cookieArray[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(cookieName) == 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

const username = getCookie("username");

第五回合：安全性大考验

在互联网的世界里，安全至关重要！

存储方式 安全性
localStorage 容易受到 XSS 攻击。如果网站存在 XSS 漏洞，攻击者可以通过 JavaScript 代码获取 localStorage 中的数据。
sessionStorage 同样容易受到 XSS 攻击。
Cookie 可以通过设置 HttpOnly 属性来防止 XSS 攻击。设置了 HttpOnly 属性的 Cookie 只能由服务器端访问，JavaScript 代码无法访问。还可以设置 Secure 属性，只有在 HTTPS 连接下才能发送 Cookie，防止 Cookie 被窃听。

XSS 攻击： 跨站脚本攻击 (Cross-Site Scripting)，简称 XSS，是一种常见的 Web 安全漏洞。攻击者通过在网页中注入恶意的 JavaScript 代码，当用户浏览网页时，这些恶意代码就会被执行，从而窃取用户的 Cookie、session 信息，甚至控制用户的浏览器。

如何防范 XSS 攻击：

  • 输入验证： 对用户输入的数据进行严格的验证，过滤掉任何潜在的恶意代码。
  • 输出编码： 对输出到页面的数据进行编码，防止恶意代码被执行。
  • 使用 HttpOnly Cookie： 设置 HttpOnly 属性，防止 JavaScript 代码访问 Cookie。
  • 使用内容安全策略（CSP）： CSP 是一种安全策略，可以限制浏览器可以加载的资源，从而防止 XSS 攻击。

第六回合：代码实战演练

光说不练假把式，咱们来写一些代码，巩固一下所学知识：

localStorage 的使用

// 存储数据
localStorage.setItem('name', '张三');
localStorage.setItem('age', '30');

// 获取数据
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');

console.log(`姓名：${name}，年龄：${age}`);

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

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

sessionStorage 的使用

// 存储数据
sessionStorage.setItem('token', 'abcdefg');
sessionStorage.setItem('userId', '123456');

// 获取数据
const token = sessionStorage.getItem('token');
const userId = sessionStorage.getItem('userId');

console.log(`Token：${token}，用户ID：${userId}`);

// 删除数据
sessionStorage.removeItem('userId');

// 清空所有数据
sessionStorage.clear();

Cookie 的使用

// 设置 Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

// 获取 Cookie
function getCookie(name) {
  const cookieName = name + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookieArray = decodedCookie.split(';');
  for(let i = 0; i < cookieArray.length; i++) {
    let cookie = cookieArray[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(cookieName) == 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

const username = getCookie("username");
console.log(`用户名：${username}`);

// 删除 Cookie (设置过期时间为过去的时间)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

第七回合：总结陈词

经过一番激烈的“存储大乱斗”，相信大家对 localStorage、sessionStorage 和 Cookie 都有了更深入的了解。

特性 localStorage sessionStorage Cookie
容量 大约 5MB 大约 5MB 大约 4KB
生命周期 永久 会话级别 可设置过期时间或会话级别
作用域 同源 同源 可设置域名和路径
客户端访问 可访问 可访问 可通过 HttpOnly 限制 JavaScript 访问
服务器访问 不可访问 不可访问 可访问
安全性 容易 XSS 容易 XSS 可通过 HttpOnly 和 Secure 属性提高安全性
应用场景 长期存储 临时存储 身份验证、个性化推荐、跟踪用户行为等

选择哪种存储方式，取决于你的具体需求：

  • 如果需要长期存储数据，比如用户的偏好设置，可以使用 localStorage。
  • 如果只需要在当前会话中存储数据，比如用户的登录状态，可以使用 sessionStorage。
  • 如果需要服务器端也能访问数据，比如身份验证，可以使用 Cookie。

记住，没有最好的存储方式，只有最适合你的存储方式！

额外补充：IndexedDB

除了上面提到的三种存储方式，还有一种更强大的客户端存储方案：IndexedDB。

IndexedDB 是一个事务型的 NoSQL 数据库，可以存储大量的结构化数据，支持索引、事务等高级功能。它比 localStorage 和 sessionStorage 更强大，更灵活，更适合存储复杂的数据。

但是，IndexedDB 的 API 比较复杂，学习曲线比较陡峭。如果你的应用需要存储大量的数据，并且需要进行复杂的查询和操作，可以考虑使用 IndexedDB。

最后的忠告

在使用任何存储方式时，都要注意安全问题，避免存储敏感信息，防止 XSS 攻击。对用户输入的数据进行严格的验证，对输出到页面的数据进行编码，可以有效地提高应用的安全性。

好了，今天的“前端存储大乱斗”就到这里了。希望大家能够学有所获，在实际开发中灵活运用这些存储方式，打造更加安全、可靠、用户体验更好的 Web 应用！

谢谢大家！下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注