[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小组件了。

你可能感兴趣的:([js开源组件开发]localStorage-cache本地存储的缓存管理)