V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
tower1229
V2EX  ›  分享创造

AJAX-Cache:一款好用的 Ajax 缓存插件

  •  
  •   tower1229 ·
    tower1229 · 2018-03-07 13:15:51 +08:00 · 3224 次点击
    这是一个创建于 2452 天前的主题,其中的信息可能已经有所发展或是发生改变。

    中文 | English

    AJAX-Cache

    npm GitHub release license

    :tophat:最好用的 jQuery-Ajax 缓存插件

    介绍

    AJAX-Cache 是一款 jQuery 插件,基于 localStorage/sessionStorage 实现异步请求缓存功能,并提供“快照”和“定时”两种缓存模式。

    安装

    npm

    npm i @tower1229/flow-ui

    Download

    https://github.com/tower1229/AJAX-Cache

    使用

    你只需要为 jQuery.ajax()增加一个localCache配置

    开启快照缓存

    $.ajax({
        url: "http://rapapi.org/mockjsdata/9195/common/getRandom",
        dataType:'json',
        localCache: 'snapshot',
        success: function(res) {
            if (res.snapshot) {
                console.log('[snapshot] ' + res.data);
            } else {
                console.log('[remote data] ' + res.data);
            }
        }
    });
    

    开启定时缓存

    $.ajax({
        url: "http://rapapi.org/mockjsdata/9195/common/getRandom",
        dataType:'json',
        localCache: 5000,
        success: function(res) {
            console.log('\n[Caching for 5 seconds] ' + res.data);
        }
    });
    

    清除缓存

    $.ajax({
        url: "http://rapapi.org/mockjsdata/9195/common/getRandom",
        dataType:'json',
        localCache: false,
        success: function(res) {
        	console.log('Cache has been cleared');
            console.log(res.data);
        }
    });
    

    清除所有缓存

    $.ajaxCache.clear();
    

    配置

    $.ajaxCache.set({
    	storage: 'localStorage', 		//存储方式,默认"localStorage",可选择"sessionStorage"
    	cacheNamePrefix: '_ajaxcache'	//存储前缀,通常不需要修改
    });
    

    演示

    http://refined-x.com/AJAX-Cache/test/

    许可证

    MIT

    Copyright (c) 2017-present, refined-x.com

    第 1 条附言  ·  2018-03-08 09:06:32 +08:00
    ------------------------------
    npm 安装地址写错啦。。。。

    `npm i ajax-cache --save`
    第 2 条附言  ·  2018-03-08 10:44:33 +08:00
    ------------------------补充一个详细的开发纪要吧----------------------------

    http://refined-x.com/2018/03/07/AJAX-Cache/
    第 3 条附言  ·  2018-03-13 21:51:58 +08:00
    -----------------------备注--------------------------------------

    留言区有不少朋友质疑这个插件的意义,在这里补充一下我的看法。

    插件使用的本地存储方案与浏览器缓存的主要区别是,浏览器缓存命中至少要发一个 304 请求,插件则是直接返回本地数据,压根没有发请求,给服务端少了一个请求,而且前端拿到缓存数据的速度也更快。

    有用没用见仁见智吧,项目中提炼出来的一个小东西而已,碰巧有需求的就拿去用,实在没需求又想象不出需求的就别费脑子了。
    15 条回复    2018-03-13 16:07:00 +08:00
    qfdk
        1
    qfdk  
       2018-03-08 03:14:58 +08:00 via iPhone
    有啥用呢? 虽然缓存了 ajax 不是为了拿到直接数据或者提交用么? 每次刷新都要进缓存? 然后后端来了新数据 再更新缓存? 看了 lz 的 demo 还是有点儿凌乱。 楼主应该写个实际应用场景
    Kokororin
        2
    Kokororin  
       2018-03-08 08:37:37 +08:00 via iPhone
    flow-ui 什么鬼
    tower1229
        3
    tower1229  
    OP
       2018-03-08 09:13:19 +08:00
    @qfdk 大多数的缓存场景是,希望将某个接口数据在一定时间段内缓存起来,缓存期内不再发起请求直接返回本地数据,过了这段时间再重新获取并更新缓存。这就是“定时缓存”的典型使用场景。
    还有的时候我们希望接口能兼具实时性和响应速度,比如应用首屏的异步数据,既要快又要新,虽然这种需求听起来很“不科学”,但确实可以通过“快照缓存”满足这个需求。
    tower1229
        4
    tower1229  
    OP
       2018-03-08 09:13:38 +08:00
    @Kokororin 写错啦,应该是`npm i ajax-cache --save`
    zhongkouwei
        5
    zhongkouwei  
       2018-03-08 09:58:26 +08:00
    怎么说呢,我角色目前来说,前端性能资源更珍贵一点吧~
    tower1229
        6
    tower1229  
    OP
       2018-03-08 10:36:40 +08:00
    @zhongkouwei 缓存了也并不耗费前端性能,只是占用一点本地存储空间。另外即便服务端性能不是瓶颈也不能浪费啊,比如省市区数据这种常年不更新但每次都要请求的数据,缓存一下就可以减少不少带宽;又比如遇到鬼畜用户喜欢点来点去,请求不停的发,这时候我们缓存个 5 秒钟给服务端喘口气也能减少一点浪费
    iyangyuan
        7
    iyangyuan  
       2018-03-08 10:48:51 +08:00
    数据缓存好像并没有这么简单
    qfdk
        8
    qfdk  
       2018-03-08 15:32:50 +08:00
    @tower1229 ls 也就是个 临时文件的作用了。

    > `希望将某个接口数据在一定时间段内缓存起来,缓存期内不再发起请求直接返回本地数据,过了这段时间再重新获取并更新缓存。`

    默认不是已经渲染到页面了么? 缓存期 不就是个 setTimeOut 的过程么?

    个人理解 缓存存的是 css js 这样不需要经常变的东西,类似于 imququ,或者 http://t.i2.tn/

    ajax 目的就是为了拿到新数据。要不然你直接载入本地缓存 那 ajax 完全没意义了。

    虽然减少了请求。。。。

    希望 lz 发个自己开发中应用到的 demo 或者什么 更让人信服
    DT27
        9
    DT27  
       2018-03-08 18:08:24 +08:00
    感谢楼主,等明天研究下。
    有个需求是缓存 api 请求结果,因为 api 请求频率有限,明天看看适不适用。
    tower1229
        10
    tower1229  
    OP
       2018-03-09 11:38:44 +08:00
    @qfdk 看来你真的想象不出来这东西有啥用,举两个具体的例子。前端做个省市区选择器,数据是后端管理的要用 ajax 获取,但省市区数据可能一年都未必更新一次,所以前端把这个数据缓存起来,用户几天之内打开网站用的都是缓存的省市区数据,不需要请求后端,这个好理解吧。再来一个快照缓存的例子,手机站首页的 banner 图,占据首屏最重要位置而且数据是异步获取的,打开页面时前端为了避免请求 banner 数据时开天窗,于是直接将上一次的请求结果拿来展示,先让用户看到东西,等最新的数据拿到了再更新 banner 的内容(手淘首页的千人千面也是类似的做法),这就是快照缓存的意义
    qfdk
        11
    qfdk  
       2018-03-09 15:59:50 +08:00 via iPhone
    @tower1229 #10 前后端分离. 好吧.省市选择器 为什么不直接写在代码中呢? 因为这个也是几乎不变的. 后者 lazyload 应该也可以吧…… 毕竟 做出来也是为了解决问题的.
    tower1229
        12
    tower1229  
    OP
       2018-03-11 18:04:40 +08:00
    @qfdk 你没听懂
    fulvaz
        13
    fulvaz  
       2018-03-12 16:26:19 +08:00   ❤️ 1
    @tower1229

    @qfdk 没说错啊, 省市问题的话, 写代码中, 然后提取一个 chunk, 然后 lazy-load, 弄好 chunkhash, 浏览器就帮你缓存好了

    如果是能解决鬼畜点击的问题, 但是面对鬼畜点击为什么不加点击频次限制?

    另外加了缓存必须面对和服务端数据不一致的问题, 这不是还要考虑缓存策略的问题?

    那绕了这么远, 干嘛不直接用 @qfdk 的方案?

    楼主的场景还是没举清楚
    fulvaz
        14
    fulvaz  
       2018-03-12 16:29:42 +08:00
    不如说楼主想做类似 PWA 一样的东西?

    先渲染, ajax 后再更新页面
    kyuuseiryuu
        15
    kyuuseiryuu  
       2018-03-13 16:07:00 +08:00
    cache-control ?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2526 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 01:49 · PVG 09:49 · LAX 17:49 · JFK 20:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.