文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中有哪些缓存API

2024-04-02 19:55

关注

JavaScript中有哪些缓存API,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

检测Cache支持

检查 caches 对象在 window 中是否可用。

let isCacheSupported = 'caches' in window;

caches 是 CacheStorage 的一个实例。

创建/初始化Cache

我们可以使用 open 方法创建一个具有 name 的缓存,这将返回 promise。如果缓存已经存在,则不会创建新的缓存。

caches.open('cacheName').then( cache => { });

将项目添加到缓存

可以使用三种方法 add,addAll,set 来缓存资源。add() 和 addAll() 方法自动获取资源并对其进行缓存,而在 set  方法中,我们将获取数据并设置缓存。

add

let cacheName = 'userSettings'; let url = '/api/get/usersettings'; caches.open(cacheName).then( cache => {    cache.add(url).then( () => {        console.log("Data cached ")     }); });

在上面的代码中,内部对 /api/get/usersettings url的请求已发送到服务器,一旦接收到数据,响应将被缓存。

addAll

addAll 接受URL数组,并在缓存所有资源时返回Promise。

let urls = ['/get/userSettings?userId=1', '/get/userDetails']; caches.open(cacheName).then( cache => { cache.addAll(urls).then( () => {        console.log("Data cached ")     }); });

Cache.add/Cache.addAll 不缓存 Response.status 值不在200范围内的响应,Cache.put  可以让你存储任何请求/响应对。

put

put 为当前的 Cache 对象添加一个key/value对,在 put 中,我们需要手动获取请求并设置值。

注意:put() 将覆盖先前存储在高速缓存中与请求匹配的任何键/值对。

let cacheName = 'userSettings'; let url = '/api/get/userSettings'; fetch(url).then(res => {   return caches.open(cacheName).then(cache => {     return cache.put(url, res);   }) })

从缓存中检索

使用 cache.match() 可以得到存储到URL的 Response。

const cacheName = 'userSettings' const url = '/api/get/userSettings' caches.open(cacheName).then(cache => {   cache.match(url).then(settings => {     console.log(settings);   } });

settings 是一个响应对象,它看起来像

Response {   body: (...),   bodyUsed: false,   headers: Headers,   ok: true,   status: 200,   statusText: "OK",   type: "basic",   url: "https://test.com/api/get/userSettings" }

检索缓存中的所有项目

cache 对象包含 keys 方法,这些方法将拥有当前缓存对象的所有url。

caches.open(cacheName).then( (cache) => {   cache.keys().then((arrayOfRequest) => {       console.log(arrayOfRequest); // [Request,  Request]   }); });

arrayOfRequest是一个Request对象数组,其中包含有关请求的所有详细信息。

检索所有缓存

caches.keys().then(keys => {   // keys是一个数组,其中包含键的列表 })

从缓存中删除项目

可以对 cache 对象使用 delete 方法来删除特定的缓存请求。

let cacheName = userSettings; let urlToDelete = '/api/get/userSettings'; caches.open(cacheName).then(cache => {   cache.delete(urlToDelete) })

完全删除缓存

caches.delete(cacheName).then(() => {    console.log('Cache successfully deleted!'); })

关于JavaScript中有哪些缓存API问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯