一文读懂前端存储：从Cookie到localStorage的使用指南

南方kenny
122 阅读5分钟

前言

在Web开发中，我们经常需要将数据存储在用户的浏览器中，以便在用户下次访问时能够快速加载，或者在离线状态下也能正常使用。这就引出了前端存储的概念。前端存储就像是给你的Web应用配备了一个“记忆力”，让它能够记住用户的偏好、登录状态、浏览历史等等。那么，前端存储到底有哪些方式呢？它们各自有什么特点和适用场景呢？别急，我们这就一一道来！

什么是Web存储？

想象一下，当你访问网站时，为什么有些网站能记住你的登录状态？为什么购物车的商品不会因为关闭浏览器而消失？这些都是Web存储技术的功劳。简单来说，Web存储就是浏览器提供的一种让网站在用户设备上保存数据的功能。

在没有前端存储之前，每次用户访问网站，所有数据都需要从服务器重新获取，这不仅增加了服务器的压力，也降低了用户体验。想象一下，你每次打开一个网站，都要重新登录、重新设置偏好，是不是很麻烦？前端存储的出现，就是为了解决这些问题，它能带来以下好处：

  • 提升用户体验： 记住用户的登录状态、偏好设置、浏览历史等，减少重复操作，让用户感受到个性化和便捷。

  • 减少服务器压力： 将部分数据存储在客户端，减少对服务器的请求，降低服务器负载。

  • 支持离线应用： 在没有网络连接的情况下，用户仍然可以访问和使用部分Web应用，提升应用的可用性。

  • 提高应用性能： 从本地存储中读取数据比从服务器获取数据更快，从而加快页面加载速度。

常见的Web存储方式

1. Cookie：小小的身份卡片

Cookie 是最早出现的客户端存储技术，它就像一张小小的“记忆卡”，由服务器发送到浏览器并存储，然后在每次同源的HTTP请求中自动发送回服务器。它的主要特点是：

  • 容量小： 通常只有 4KB 左右，只能存储少量数据。

  • 自动发送： 每次HTTP请求都会携带Cookie，这既是优点也是缺点。优点是方便服务器识别用户状态，缺点是会增加请求头的大小，影响性能。

  • 生命周期可设置： 可以设置过期时间，可以是会话结束时失效，也可以是长期有效。

  • 同源限制： 只能被设置它的域访问。

下面是一个使用Cookie实现登录功能的例子：

// 服务器端设置Cookie
if(req.method === "POST" && req.url === "/login") {
  res.writeHead(200, {
    "Set-Cookie": "user=admin;",
    "Content-Type": "application/json;",
  }); 
  res.end(
    JSON.stringify({
      success: true,
      message: "登录成功",
      data: { user: "admin" },
    })
  );
}

前端登录代码：

const loginFrom = document.querySelector('#loginForm');
loginFrom.addEventListener('submit', async(event) => { 
  event.preventDefault();
  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();
  try{
    const response = await fetch('/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    })
    const data = await response.json();
    console.log(data);
  }
  catch(error){
    console.log(error);
  }
});

2.Web Storage：浏览器自带的“大容量硬盘”

Web Storage 是 HTML5 引入的存储机制，它提供了比 Cookie 更大的存储空间（通常为 5-10MB），并且不会随HTTP请求自动发送，从而解决了 Cookie 的一些痛点。Web Storage 又分为两种：

localStorage：永久存储，永不失效

localStorage 就像是浏览器自带的一块“大容量硬盘”，它存储的数据没有过期时间，除非手动删除，否则会一直保存在用户的浏览器中。即使关闭浏览器或电脑，数据也依然存在。

  • 容量大： 约 5-10MB。
  • 持久化存储： 数据永久有效，除非手动删除。
  • 同源限制： 只能被同源的页面访问。
  • 同步操作： 读写操作是同步的，如果存储大量数据可能会阻塞主线程，影响页面性能。

使用方法非常简单：

// 保存数据
localStorage.setItem('username', '张三');

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

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

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

sessionStorage：会话存储，阅后即焚

sessionStorage 就像是一个“临时存储区”，它存储的数据只在当前会话期间有效。当用户关闭浏览器标签页或浏览器时，sessionStorage 中的数据就会被清除。它非常适合存储一些临时性的、与当前会话相关的数据。

3.IndexedDB：浏览器里的“关系型数据库”

IndexedDB 是一种低级 API，用于在客户端存储大量结构化数据，包括文件/二进制数据。它提供了一个完整的数据库系统，支持事务、索引等功能，非常适合需要存储大量复杂数据的Web应用。

4.Cache API：离线应用的“幕后英雄”

Cache API 主要用于存储HTTP响应，通常与 Service Worker 结合使用，是构建离线Web应用（PWA）的关键技术。它可以拦截网络请求，并从缓存中返回响应，从而实现离线访问和更快的加载速度。

总结

Web存储技术是前端开发中非常重要的一部分，合理使用各种存储方式可以大大提升用户体验。Cookie适合存储少量需要与服务器交互的数据，localStorage适合长期保存客户端数据，sessionStorage适合临时数据，而indexDB则适合大量结构化数据。

avatar
文章
阅读
粉丝