浏览器离线存储
cookie是浏览器中特有的一个概念目前常见的浏览器离线存储的方式如下：
Cookie
Web Storage
WebSQL
IndexedDB
File System
1. Cookie
这是最古老、也是最初并非为“存储”而设计的技术。
设计初衷：主要用于在客户端存储会话状态信息（如登录状态），并在每次请求中由浏览器自动发送到服务器。
存储容量：很小，通常每个域名下限制为 4KB 左右。
生命周期：
会话期Cookie：浏览器关闭即消失。
持久性Cookie：通过
Max-Age或Expires属性设置过期时间。
数据操作：通过 JavaScript 的 document.cookie API 进行读写，操作相对繁琐。
服务器参与：每次HTTP请求都会自动携带，这会增加网络开销。
主要应用场景：
用户身份认证（Session ID）。
个性化设置（如主题选择）。
跟踪用户行为（如分析工具）。
2. Web Storage
HTML5 引入的简单键值对存储机制，旨在克服 Cookie 在存储上的不足。它分为两种：
localStorage：
持久性：数据永久存储，除非手动清除（通过JS或浏览器设置）。
作用域：在同源（协议、域名、端口相同）的窗口/标签页中共享。
容量：通常为 5MB 或更大（因浏览器而异）。
特点：数据不会随HTTP请求发送到服务器。
sessionStorage：
会话性：数据仅在当前浏览器标签页的生命周期内有效。关闭标签页，数据即被清除。
作用域：仅在当前标签页内共享，即使是同源页面也无法访问。
容量：同 localStorage。
特点：同样不发送到服务器。
主要应用场景：
localStorage：存储长期使用的数据，如用户偏好设置、购物车内容、静态资源缓存。sessionStorage：存储单次会话的临时数据，如表单填写过程中的多页数据暂存。
3. WebSQL（已废弃）
WebSQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。，但已被 W3C 废弃。
特点：使用 SQL 语法进行数据操作，对于有后端SQL经验的开发者非常友好。
现状：虽然一些老旧浏览器（如旧版Chrome、Safari）仍支持，但不再是Web标准。不推荐在新项目中使用。
替代方案：IndexedDB。
4. IndexedDB
现代浏览器推荐的客户端大规模、结构化数据存储方案。
数据模型：一个非关系型（NoSQL） 的面向对象数据库。数据以“对象存储”为单位，在存储中直接存储 JavaScript 对象。
存储容量：通常非常大，根据浏览器和磁盘空间而定，一般是硬盘的某个百分比（如Chrome是可用空间的60%）。
查询方式：使用索引进行高性能查询，支持游标遍历。
事务性：支持事务，保证数据操作的原子性。
异步API：所有操作都是异步的，不会阻塞浏览器UI线程。
主要应用场景：
存储大量结构化数据（如邮件、笔记、文档）。
渐进式Web应用（PWA）的核心技术，用于缓存数据和资源，实现离线工作。
需要复杂查询和排序的大型客户端应用。
5. File System
这里的 File System 通常指 File System Access API 和较早的 File and Directory Entries API。
能力：允许Web应用直接访问用户设备上的文件系统，进行文件的读写、创建和管理。
访问方式：
沙盒文件系统：一个浏览器为网页分配的私有存储空间，网页可以自由读写，但用户无法通过文件管理器直接访问。
用户授权访问：通过API（如
showOpenFilePicker）请求用户授权，从而读写用户指定的具体文件或目录。
主要应用场景：
离线视频/图片编辑器。
大型媒体文件（如PDF、视频）的缓存和处理。
需要持久化保存用户生成文件的应用（如IDE、绘图工具）。
可惜截止目前为止（2025年10月）只有Chrome，Edge，Opera支持
