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


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

  • 相关阅读:
    Codeforces Round #605 (Div. 3)E
    Codeforces Round #628 (Div. 2)
    Codeforces Round #627 (Div. 3)
    AC自动机,知识点+hdu模板题
    Tire树,hdu2846,hdu4825
    Educational Codeforces Round 83 (Rated for Div. 2)
    分层最短路
    初入mysql的学习
    赛后总结
    Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) D
  • 原文地址:https://www.cnblogs.com/xiangbing/p/localStorage-cache.html
Copyright © 2020-2023  润新知