如何使用JavaScript的缓存API实现页面数据持久化？

本文共计328个文字，预计阅读时间需要2分钟。

JavaScript ServiceWorker API的优势在于它使Web开发者轻松控制缓存。尽管ETags等技术也是控制缓存的方式，但使用JavaScript使得控制缓存的能力更强，更灵活。简单来说，通过JavaScript，我们可以更强大、更自主地控制缓存功能。

JavaScriptServiceWorkerAPI的好处就是让WEB开发人员轻松的控制缓存。虽然使用ETags等技术也是一种控制缓存的技术，按使用JavaScript让程序来控制缓存功能更强大，更自由。当然，强大有强大的好处，也有弊处——你需要做善后处理，所谓的善后处理，就是要清理缓存。更多代码看：it.lindukj.cn/archives/1295

1.[代码]检查浏览器是否支持Cache API…

if('caches' in window) { // Has support! }

2.[代码]创建一个缓存对象的方法是使用caches.open()，并传入缓存的名称：

caches.open('test-cache').then(function(cache) { // 缓存创建完成，现在就可以访问了 });

3.[代码]使用addAll方法可以批量添加缓存请求：

caches.open('test-cache').then(function(cache) { cache.addAll(['/', '/images/logo.png']) .then(function() { // Cached! }); });

4.[代码]添加单个地址使用add方法：

caches.open('test-cache').then(function(cache) { cache.add('/page/1'); // "/page/1" 地址将会被请求，响应数据会缓存起来。 });

5.[代码]add()方法还可以接受一个自定义的Request:

caches.open('test-cache').then(function(cache) { cache.add(new Request('/page/1', { /* 请求参数 */ })); });