前端储存，揭秘 cookie 及浏览器的缓存与储存
2024-02-18 23:07:09
前端存储：揭秘现代 Web 应用程序的基础
存储类与缓存类：一个基础入门
在探讨前端存储的奥秘之前，让我们先从了解存储类和缓存类的基本概念入手。存储类顾名思义，就是将数据永久或暂时存储在计算机或设备上的技术，而缓存类则是一种优化数据访问速度的技术，它通过将经常访问的数据存储在快速访问的内存中，以减少后续访问时的数据延迟。
存储类：Cookie
Cookie 是最早出现的前端存储方式之一，它是一种存储在用户浏览器中的小型文本文件，可用于在用户和服务器之间传递信息。Cookie 由服务器创建并发送给浏览器，浏览器在收到 cookie 后会将它存储在本地，并在后续的请求中将 cookie 发送回服务器。
缓存类：localStorage、sessionStorage 和 IndexedDB
localStorage、sessionStorage 和 IndexedDB 都是 HTML5 中引入的存储技术，它们与 cookie 不同，并不依赖于服务器，而是完全存储在浏览器端。
LocalStorage： 永久存储数据，即使关闭浏览器或重新启动计算机，也不会被删除。它适用于存储一些不会经常改变的数据，例如用户偏好设置、应用程序状态等。
sessionStorage： 与 localStorage 类似，但它只在当前浏览器会话中有效。也就是说，当用户关闭浏览器或打开一个新的浏览器窗口时，sessionStorage 中的数据就会被清空。sessionStorage 适用于存储一些临时数据，例如购物车中的商品、表单中的输入等。
IndexedDB： 一个非关系型数据库，可以存储大量结构化数据，并且支持索引和查询。IndexedDB 适用于存储一些需要持久化和快速查询的数据，例如离线应用的数据、游戏数据等。
Cookie 的小秘密
构成： Cookie 由名称、值、过期时间和路径四个部分组成。名称和值是 cookie 的基本信息，过期时间决定了 cookie 的生命周期，而路径则指定了 cookie 可以在哪些 URL 下被访问。
限制： Cookie 的大小限制为 4KB，每个域名只能存储 20 个 cookie。此外，cookie 只能存储字符串数据，如果需要存储其他类型的数据，需要先将其转换为字符串。
优缺点： Cookie 的优点是简单易用，而且可以跨域访问。它的缺点是安全性较差，容易被盗用，而且会增加网络流量。
Cookie 的产生和使用
当浏览器收到服务器发送的 cookie 时，它会将 cookie 存储在本地。在后续的请求中，浏览器会自动将 cookie 发送回服务器。服务器收到 cookie 后，可以根据 cookie 中的信息来识别用户身份，并提供个性化的服务。
创建 cookie
使用以下 JavaScript 代码创建 cookie：
document.cookie = "name=value; expires=date; path=/";
读取 cookie
使用以下 JavaScript 代码读取 cookie：
document.cookie;
删除 cookie
使用以下 JavaScript 代码删除 cookie：
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
前端存储的魅力
前端存储作为构建现代网站和应用程序的重要一环，在用户体验和数据管理方面扮演着至关重要的角色。通过了解 cookie、localStorage、sessionStorage 和 IndexedDB 四种不同的存储方式，我们可以根据实际项目的需要，选择最合适的存储技术，为用户提供更优质的服务。
常见问题解答
-
Cookie 和缓存类存储有什么区别？
Cookie 是存储在服务器上的，而缓存类存储是存储在浏览器端的。 -
哪种存储方式更安全？
Cookie 的安全性较差，缓存类存储更安全。 -
哪种存储方式适合存储大量数据？
IndexedDB 适合存储大量数据。 -
如何删除 cookie？
可以使用 JavaScript 代码删除 cookie。 -
如何使用 IndexedDB 存储数据？
首先需要创建 IndexedDB 数据库，然后使用 API 进行数据存储和读取操作。
