1、前言
前端缓存分为HTTP缓存和浏览器缓存，浏览存储也有很多方法，比如使用localStorage、sessionStorage、cookie、indexDB等，本文就CacheStorage及application cache做简易介绍。
2、cache storage简介
很多小伙伴都应该了解localStorage、sessionStorage，但是却很少使用cacheStorage。cacheStorage也是浏览器存储的一种方式，它的主要用途是用于对请求的缓存。
2.1、cache storage使用
CacheStorage在window使用时直接写成caches，其主要调用方法有：
open(cache)：打开cache，没有的话自动创建该cache，返回一个promise，值为当前（创建）的cache
has(cache)：匹配当前的cache对象，返回一个promise，有该cache则返回true，否则返回false
keys：返回一个promise，其值为当前所有caches，合并为一个数组
match(path)：匹配路由请求（参数一般写成路径形式），对于检查给定的 Request 是否是 CacheStorage 对象跟踪的任何 Cache 对象的键，并返回一个resolve为该匹配的 Promise
put(path, new Response())：在cache中写入数据，第一个参数一般写成路径形式，第二个参数为Response实例
采用caches的api缓存远程获取的数据，如果本地已经缓存则使用本地缓存的数据
async function testCache{
var cacheName = 'baidu' // 定义cache名称
var path = '/path' // 定义路径
var cachesMatch = await caches.match(path) // 匹配当前路径
var cachesLocal = await caches.has(cacheName)
//如果当前已有数据则直接获取缓存的数据
if(cachesMatch && cachesLocal){
caches.match(path).then(res => {
return res.text()
}).then(res => {
console.log("获取cache数据: ", res)
})
}else{
// 如果没有则获取远程数据
getBaidu().then(res => {
// 将请求的数据保存在caches中
caches.open(cacheName).then(cache => {
cache.put(path, new Response(JSON.stringify(res), { status: 200 })) // 采用Json数据格式保存
})
})
}
}
3、application cache的简介
application cache是前端应用级别的缓存，使用方式在html标签中添加mainfest属性
<html mainfest="myApplication.appcache">
属性值是自定义缓存的文件，在html同路径下创建文件myApplication.appcache，在其中编写内容：
CACHE MANIFEST
CACHE:
index.html
favicon.ico
NETWORK:
*
FAILBACK:
CACHE MANIFEST：本文件标识，在此标题下列出的文件将在首次下载后进行缓存
CACHE：在此标题下列出的文件将在首次下载后进行缓存，与CACHE MANIFEST功能类似
NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
网友评论