如何实现前端数据缓存？

前端如何做数据缓存？常见的方式有两种：第一使浏览器自身的缓存行为；第二种使用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值保存。
            ... //其他代码
        }

    })
}