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

[tower1229]

中文 | English

AJAX-Cache

: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

------------------------------
npm 安装地址写错啦。。。。

`npm i ajax-cache --save`

------------------------补充一个详细的开发纪要吧----------------------------

http://refined-x.com/2018/03/07/AJAX-Cache/

-----------------------备注--------------------------------------

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

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

有用没用见仁见智吧，项目中提炼出来的一个小东西而已，碰巧有需求的就拿去用，实在没需求又想象不出需求的就别费脑子了。

[qfdk]

有啥用呢？ 虽然缓存了 ajax 不是为了拿到直接数据或者提交用么？ 每次刷新都要进缓存？ 然后后端来了新数据 再更新缓存？ 看了 lz 的 demo 还是有点儿凌乱。 楼主应该写个实际应用场景

[Kokororin]

flow-ui 什么鬼

[tower1229]

@qfdk 大多数的缓存场景是，希望将某个接口数据在一定时间段内缓存起来，缓存期内不再发起请求直接返回本地数据，过了这段时间再重新获取并更新缓存。这就是“定时缓存”的典型使用场景。
还有的时候我们希望接口能兼具实时性和响应速度，比如应用首屏的异步数据，既要快又要新，虽然这种需求听起来很“不科学”，但确实可以通过“快照缓存”满足这个需求。

[tower1229]

@Kokororin 写错啦，应该是`npm i ajax-cache --save`

[zhongkouwei]

怎么说呢，我角色目前来说，前端性能资源更珍贵一点吧~

[tower1229]

@zhongkouwei 缓存了也并不耗费前端性能，只是占用一点本地存储空间。另外即便服务端性能不是瓶颈也不能浪费啊，比如省市区数据这种常年不更新但每次都要请求的数据，缓存一下就可以减少不少带宽；又比如遇到鬼畜用户喜欢点来点去，请求不停的发，这时候我们缓存个 5 秒钟给服务端喘口气也能减少一点浪费

[iyangyuan]

数据缓存好像并没有这么简单

[qfdk]

@tower1229 ls 也就是个 临时文件的作用了。

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

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

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

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

虽然减少了请求。。。。

希望 lz 发个自己开发中应用到的 demo 或者什么 更让人信服

[DT27]

感谢楼主，等明天研究下。
有个需求是缓存 api 请求结果，因为 api 请求频率有限，明天看看适不适用。

[tower1229]

@qfdk 看来你真的想象不出来这东西有啥用，举两个具体的例子。前端做个省市区选择器，数据是后端管理的要用 ajax 获取，但省市区数据可能一年都未必更新一次，所以前端把这个数据缓存起来，用户几天之内打开网站用的都是缓存的省市区数据，不需要请求后端，这个好理解吧。再来一个快照缓存的例子，手机站首页的 banner 图，占据首屏最重要位置而且数据是异步获取的，打开页面时前端为了避免请求 banner 数据时开天窗，于是直接将上一次的请求结果拿来展示，先让用户看到东西，等最新的数据拿到了再更新 banner 的内容（手淘首页的千人千面也是类似的做法），这就是快照缓存的意义

[qfdk]

@tower1229 #10 前后端分离. 好吧.省市选择器 为什么不直接写在代码中呢？ 因为这个也是几乎不变的. 后者 lazyload 应该也可以吧…… 毕竟 做出来也是为了解决问题的.

[tower1229]

@qfdk 你没听懂

[fulvaz]

@tower1229

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

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

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

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

楼主的场景还是没举清楚

[fulvaz]

不如说楼主想做类似 PWA 一样的东西?

先渲染, ajax 后再更新页面

[kyuuseiryuu]

cache-control ?