数据持久化原理：本地存储

对于上一节中所描述的问题https://blog.csdn.net/weixin_51416826/article/details/141686497?spm=1001.2014.3001.5502其本质是本地存储技术。

在前端开发中，有几种常见的方法可以用来在客户端存储数据。以下是主要的几种：

1. Cookie

   • Cookie 是最传统的客户端存储方式，它允许网站将少量的数据存储在用户的计算机上。Cookie 主要用于会话管理，例如记住用户的登录状态。
   • Cookie的工作原理是在浏览器第一次向服务器发送请求后，服务器响应请求并携带Cookie，之后浏览器再次访问必须携带Cookie，服务器根据Cookie验证用户。
   • 缺点是每个站点的每个域名下的 cookie 总大小有限制（通常不超过4KB），并且每次 HTTP 请求都会携带 cookie 数据，这可能会增加带宽消耗。
   • Cookie不能跨域请求。

2. SessionStorage 和 LocalStorage

   • 这两种存储方式都是 Web Storage API 的一部分，它们提供了更大的存储空间（通常每个域名可以达到5MB以上）。
   • SessionStorage 存储的数据只在同一个窗口或标签页的生命周期内有效，当窗口或标签页关闭后，数据会被清除。
   • LocalStorage 存储的数据是持久性的，除非主动删除或用户清理浏览器缓存，否则数据一直存在。
   • 这两种存储方式的数据不会随着 HTTP 请求发送给服务器。

3. IndexedDB

   • IndexedDB 是一个低级别的 API，提供键值对存储以及结构化数据的存储。它可以存储大量数据，并支持事务处理。
   • IndexedDB 支持复杂的查询，可以创建索引来提高检索速度。
   • 由于其复杂性，使用 IndexedDB 需要更多的编程工作量。

4. Web SQL (已废弃)

   • Web SQL 是一个已经不再被推荐使用的 API，它提供了一个 SQL 数据库接口。
   • 虽然一些浏览器仍然支持它，但是由于安全性和跨浏览器兼容性的问题，不建议使用。

5. File System API

   • File System API 允许网站请求访问用户设备上的文件系统的一部分，以用于存储大量数据。
   • 这是一个更高级的 API，需要用户的明确许可，并不是所有浏览器都支持。

每种存储方式都有其适用场景和限制。在实际应用中，开发者需要根据项目的具体需求来选择合适的存储方式。例如，对于需要长期存储的数据，可以选择 LocalStorage 或 IndexedDB；而对于临时存储的数据，可以使用 SessionStorage。如果需要存储的数据量较大或者需要进行复杂的查询操作，则 IndexedDB 可能是最合适的选择。