API通常对缓存渐进式web应用进行网络响应。当设备与网络断开连接时，重新提供缓存内容，以便web应用程序可以脱机运行。
以下代码将网络响应存储在名为myCache的缓存中：
16.png
类似的函数可以从缓存中检索项。下面的例子中，它返回响应正文文本：
17.png
优势
缺点
Cache API是存储从网络检索的文件和数据的最佳选择。我们可以使用它来存储应用程序状态。
文件系统访问API
18.png
文件系统访问API允许浏览器从本地文件系统读取、写入、修改和删除文件。浏览器在沙盒环境中运行，因此用户必须授予对特定文件或目录的权限。这将返回一个FileSystemHandle，以便web应用程序可以像桌面应用程序一样读取或写入数据。
以下函数将Blob保存到本地文件：
19.png
优势
缺点
这种储存方式的优势几乎是压倒性的
文件和目录项API
20.png
文件和目录条目API提供了一个可用于域的文件系统，该系统可以创建、写入、读取和删除目录和文件。
优势
缺点
不过目前MDN明确声明：不要在生产站点上使用此选项，技术广泛的支持还需要几年。
cookies
21.png
Cookie是特定于域的数据，用来跟踪用户，但对于任何需要维护服务器状态的系统（如登录）来说，它们都是必不可少的。与其他存储机制不同的是，cookies（通常）在浏览器和服务器之间的HTTP请求和响应上传递。两个设备都可以检查、修改和删除cookie数据。
使用document.cookie在客户端中设置cookie值，使用方法：
22.png
值不能包含逗号、分号或空格，所以需要 encodeURIComponent方法：
23.png
示例：设置一个状态cookie，该cookie将在10分钟后过期，并且在当前域中的任何路径上都可用：
24.png
document.cookie返回一个字符串，其中包含由分号分隔的每个名称和值对。例如：
25.png
下面的函数解析字符串并将其转换为包含name-value的对象。例如：
26.png
优势
缺点
缺点过多，不是必要不推荐使用cookie
window.name
27.png
window.name设置并获取窗口浏览上下文的名称。我们可以设置一个字符串值，该值在浏览器刷新或链接到其他位置并单击“上一步”之间保持不变。例如：
28.png
检查该内容：
29.png
优势
缺点
window.name的设计之初并不作为数据存储的方法pr缓存文件在哪里，可作为一个黑科技使用。
WebSQL
30.png
WebSQL是将SQL的数据库存储引入浏览器的方法。示例代码：
31.png
优势
缺点
可以结合数据库使用，也为客户端存储提供一种方法。
总结
本文详细为大家介绍了10种不同客户端存储的解决方法，可以看到的是pr缓存文件在哪里，没有一种方法是十全十美的。为了解决复杂web应用程序中的不同情况，我们需要学习更多API才行。根据不同情况因地制宜，灵活运用将会更加高效的解决问题。
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： muyang-0410
