专注WEB开发 分享经验,沉淀知识

如何实现前端数据缓存?

 作者:chenxing  时间:2016-10-19 16:18  评论:

前端如何做数据缓存?常见的方式有两种:第一使浏览器自身的缓存行为;第二种使用localstorage主动保存数据。第一在种可以在页面的头部定义是否开启浏览器缓存,此文想说说localstorage的缓存的使用。

前端如何做数据缓存?常见的方式有两种:第一使浏览器自身的缓存行为;第二种使用localstorage主动保存数据。第一在种可以在页面的头部定义是否开启浏览器缓存,localstorage是HTML5提供的接口,此文想说说localstorage的缓存的使用。

使用localstorage要满足以下一些条件:

  • 浏览器要支持localstorage,IE8+,谷歌,火狐等支持。
  • 数据通过访问接口的方式获取

这里解释下为什么要满足这两个条件才可做数据缓存。第二条件很好理解,现在的大多数浏览器都支持这个属性;第二条件是为了方便我们做数据缓存,这些数据必须是在浏览器中处理的,也就是说如果页面上的数据是服务器端处理生成页面的这些数据是很难做前端缓存处理的,通过js请求的数据,然后再渲染到页面上这种方式是适合做缓存处理。

具体代码实现方式:

//1.封装localstorage对象
function storage(){
    this.setItem = function(k, v) {
        var nowTime = new Date().getTime();
        localStorage.setItem(k, JSON.stringify({
            data: v,
            time: nowTime
        }));
    }
    this.getItem = function(k, t = 1) {
        var data = localStorage.getItem(k);
        if (!data) return false;
        data = JSON.parse(data);
        var isOverTime = (new Date().getTime() - data.time) > 3600 * 24 * 1000 * t;
        if (!isOverTime) {
            return data.data;
        } else {
            localStorage.removeItem(k);
            return false;
        }
    }
    this.removeItem = function(k) {
        localStorage.removeItem(k);
    }
}
//2.使用localstorage对象数据数据缓存
var sto = new storage();
var url = 'http://...';
var data = sto.getItem(url, 7) //获取接口7天内有效的接口数据,有则返回数据本身,无返回false
if (data) {
    ... //其他代码
} else {
    api();
    ...//其他代码
}
var api = function() {
    $.ajax({
        type: 'get',
        url: url,
        dataType: 'json',
        ...,
        //自行加参数
        success: function(data) {
            sto.setItem(url, data); //为了保证唯一性和理解一般以请求接口地址作为key值保存。
            ... //其他代码
        }

    })
}

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/10.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

Mac目录如何快速返回上一级?

 2022-07-21 17:27  25

Mac目录和终端如何快速切换

 2022-07-21 17:11  7

phpstorm一个窗口打开多个项目?

 2022-07-20 17:15  14

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里