你的位置:首页 > Java教程

[Java教程][js开源组件开发]localStorage


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

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

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

DEMO请案例点击这里查看.

##使用方法

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