[js开源组件开发]localStorage-cache本地存储的缓存管理

localStorage-cache本地存储的缓存管理

距离上次的组件开发有近三个月的时间了，最近一直在做一些杂事，无法静下心来写写代码，也是在学习emberjs，在emberjs中有一个很重要的东西 -- localstorage_adapter，本地存储适配器，利用它可以很方便的把数据保存在本地的localStorage中，但我今天要讲的，并不是ember，也不是适配器，我是个比较念旧的人，所以我对cookie很情有独钟，当然，cookie也会有各种问题，于是我就来改造下localStorage吧，让它更好用。

在我的设想中，一个缓存是应该有过期时间的，也应该是能够更新的，具有这两个能力还不够，它应该具有更新遇到异常时继续引用旧缓存的能力，不然接口挂了，整个应用都报错或白屏真是难看（我们公司现在就是这样，为此我先丢脸下）。

DEMO请案例点击这里查看http://www.lovewebgames.com/jsmodule/localStorage-cache.html.

github托管源码：https://github.com/tianxiangbing/localStorage-cache

 

##使用方法

LocalStorageCache.add('key','value');

一般情况下是这样的添加的

##add :function(key,value,exp)

add有三个参数,key是键，value为值，exp是过期时间，可以是0（关闭时过期）,int 秒为单位，date类型为具体到期日期

##get:function(key,promise)

返回promise, 如果cache已过期，当第二个参数promise存在时，promise的fail时会在返回过期时的值

function ajax(){
    var dtd = $.Deferred();
    $.get('index.html').done(function(){
        dtd.resolve("hello world.");
        LocalStorageCache.setExpired('key',$('#txt_expri').val())//重新设置过期时间
    }).fail(function(){
        dtd.reject();
    });
    return  dtd ;
}
$("#btn_getupdate").click(function(){
    LocalStorageCache.get('key',ajax).done(function(result){
        alert(result)
    }).fail(function(result){
        alert(result+'fail')
    });
});

##remove:function(key)

移除cache

##clear:function()

清空所有cache

##update:function(key,value,exp)

更新cache,如果不加exp参数，就只更新内容。

在这里值得注意的是，所有的get都返回的是一个promise,当fail请求时，会返回到get的fail中去，过期时也会fail到data,只有一种情况fail的是null,那就是没有缓存。

这个组件是个很小的东西，解决的问题也是很微小的问题，可能有更好的方案，希望大家可以提出来，虽然每次写的组件都很小，但积少成多，现在也基本上积累了一整套的js小组件了。