【开源】封装HTML5的localstorage

项目名:web-storage-cache

项目地址:https://github.com/WQTeam/web-storage-cache

API说明:https://github.com/WQTeam/web-storage-cache/blob/master/README_zh_CN.md

Star

本人在前端时间做移动端开发想使用localstorage做数据的缓存。发现localstorage只是存储简单的string键值对。但实际使用中经常要配合JSON.parse 和 JSON.stringify, 在很多场景中又需要添加超时时间。看了一些开源的项目也对localstorage进行了封装,但都没有完全复合工作中的业务场景的。所以自己写了一个。

不知道国内有没有类似github这种活跃的社区,感觉国内的开源氛围都不强。

使用:

var wsCache = new WebStorageCache();

// 缓存字符串‘wqteam‘ 到 ‘username‘ 中, 超时时间100秒
wsCache.set(‘username‘, ‘wqteam‘, {exp : 100});

// 超时截止日期 2015 5 18
wsCache.set(‘username‘, ‘wqteam‘, {exp : new Date(‘2015 5 18‘)});

// 获取缓存中 ‘username‘ 的值
wsCache.get(‘username‘);

// 缓存简单js对象,默认使用序列化方法为JSON.stringify。可以通过初始化wsCache的时候配置serializer.serialize
wsCache.set(‘user‘, { name: ‘Wu‘, organization: ‘wqteam‘});

// 读取缓存中的简单js对象 - 默认使用反序列化方法为JSON.parse。可以通过初始化wsCache的时候配置serializer.deserialize
var user = wsCache.get(‘user‘);
alert(user.name + ‘ belongs to ‘ + user.organization);

// 删除缓存中 ‘username‘
wsCache.delete(‘username‘);

// 手工删除所有超时CacheItem,
wsCache.deleteAllExpires();

// 清除客户端中所有缓存
wsCache.clear();

// 为已存在的(未超时的)缓存值设置新的超时时间。
wsCache.touch(‘username‘, 1);

// 如果缓存中没有key为username2的缓存,则添加username2。反之什么都不做
wsCache.add(‘username2‘, ‘wqteam‘, {exp : 1});

// 如果缓存中有key为username的缓存,则替换为新值。反之什么都不做
wsCache.replace(‘username‘, ‘new wqteam‘, {exp : 1});

// 检查当前选择作为缓存的storage是否被用户浏览器支持。
//如果不支持调用WebStorageCache API提供的方法将什么都不做。
wsCache.isSupported();

  

API

Constructor

var wsCache = new WebStorageCache({
    // [可选] ‘localStorage‘, ‘sessionStorage‘, window.localStorage, window.sessionStorage
    //        或者其他实现了 [Storage API] 的storage实例.
    //        默认 ‘localStorage‘.
    storage: ‘localStorage‘,
    // [可选]  类型Number,公共超时事件设置。默认无限大
    exp: Infinity
});

  

isSupported

检查当前选择作为缓存的storage是否被用户浏览器支持。 如果不支持调用WebStorageCache API提供的方法将什么都不做。

wsCache.isSupported(); // 返回值Boolean。

  

set

往缓存中插入数据。

// key [必填] 必须要为String类型。
// value [必填] 支持所以可以JSON.parse 的类型。注:当为undefined的时候会执行 delete(key)操作。
// options [选填] js对象,包含两个属性 exp 和 force。
// {
//     // 类型Number。超时时间,秒。默认无限大。
//     exp: 100,
//     // 类型Boolean。为true时:当超过最大容量导致无法继续插入数据操作时,先清空缓存中已超时的
//     // 内容后再尝试插入数据操作。默认为true。
//     force: true
// }
wsCache.set(key, value, options);

  

get

根据key获取缓存中未超时数据。返回相应类型String、Boolean、PlainObject、Array的值。

// key [必填] String类型。如果发现该key对应的值已过期,会进行delete(key)操作,返回null。
wsCache.get(key);

  

delete

根据key删除缓存中的值。

wsCache.delete(key);

  

deleteAllExpires

删除缓存中所有通过WebStorageCache存储的超时值。

wsCache.deleteAllExpires();

  

clear

清空缓存中全部的值。注意:这个方法会清除不是使用WebStorageCache插入的值。推荐使用:deleteAllExpires

wsCache.clear();

  

touch

根据key为已存在的(未超时的)缓存值以当前时间为基准设置新的超时时间。

// key [必填] String类型
// exp [必填] number 单位:秒 js对象包含exp属性(以当前时间为起点的新的超时时间)
wsCache.touch(key, exp: 1);

  

add

根据key做插入操作,如果key对应的值不存在或者已超时则插入该值,反之什么都不做。 注:不是通过WebStorageCache插入的值也会当作失效的值,依然执行add操作

wsCache.add(key, value, options);

  

replace

根据key做插入操作,如果key对应的值存在并且未超时则插入该值,反之什么都不做
注:超时时间以当前时间为基准重新设置。

wsCache.replace(key, value, options);

  

时间: 2024-10-15 19:05:47

【开源】封装HTML5的localstorage的相关文章

html5的localstorage详解

HTML API localstorage在浏览器的API有两个:localStorage和sessionStorage,存在于window对象中:localStorage对应window.localStorage,sessionStorage对应window.sessionStorage.localStorage和sessionStorage的区别主要是在于其生存期. 基本使用方法 localStorage.setItem("b","isaac");//设置b为&

html5 的localstorage与sessionstroge

localStrorage与sessionStrorage是html5的一个新对象,用来进行本地的存储,当前所有主流浏览器都支持,但是低版本不支持.下面是使用localStorage的一个例子 <div id="tip">我知道了~<div> js 代码如下 window.onload=function(){ var tip=document.getElementById("tip"); if(localStorage.isKnow==und

HTML5的localStorage和sessionStorage

HTMl5提供了sessionStorage和localStorage数据存储方法,用于临时或者永久的存储客户端的数据: sessionStorage:用于保存回话数据 localStorage:用于在客户端长期的保存数据 sessionStorage 用于在客户端保存回话数据,保存数据的时间短暂,保存数据的实质是保存在了session对象中,关闭浏览器,所有的sessionStorage对象保存的数据全部丢失. localStorage 长期保存数据在客户端,直至人工清除.但是localSto

HTML5的LocalStorage实现记住密码

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 localStorage 方法存储的数据没有时间限制.第二天.第二周或下一年之后,数据依然可用. web storage和cookie的区别 Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪

js中location.search、split()HTML5中localStorage

1. location.search在客户端获取Url参数的方法 location.search是从当前URL的?号开始的字符串 如:http://www.baidu.com/s?wd=baidu&cl=3 它的search就是?wd=baidu&cl=3 如: location.search.substr(1).split("&")[0] 可以返回第一个参数:wd=baidu 如: location.search.split('?')[1] 可以返回所有参数:

[html5]使用localStorage兼容低版本Safari无法使用indexeddb的情况

摘要 简单场景描述:将html5开发的app内嵌入ios app中,有部分数据,需要在本地存储,就想到使用浏览器的localstorage或者indexeddb,另外localstorage存储的方式是key,value的方式,并且value是字符串类型的,一般会将json字符串的方式保存,但用起来不太方便,在使用的时候需要转换为json对象.indexeddb存储的是文档类型,类似于mongodb的document.操作更方便.但对低版本的兼容性不太好. 解决办法 http://git.osc

HTML5的localStorage、sessionStorage和SQL的CRUD的使用

一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据,复杂的数据就更别扯了. 下面是Cookie的限制: 1, 大多数浏览器支持最大为 4096 字节的 Cookie. 2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量.大多数浏览器只允许每个站点存储 20 个 Cookie:如

对HTML5中LocalStorage的一些使用建议

上个月末的w3ctech上,有同行提到了LocalStorage这个话题,我觉得在HTML5的众多新特性中,LocalStorage算是比较实际同时浏览器也比较好实现的特性. LocalStorage的规范描述在这里:http://dev.w3.org/html5/webstorage/ 首先一个细节,LocalStorage只能存储键值对(key-value pair)形式的数据,并且key和value都只能存储为字符串类型.之所以这样说,因为JS是动态语言,我们可以在setItem时传入in

初识html5的localStorage本地存储

一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的网站,数