代码分享,对 HTML5 localStorage 和 sessionStorage 进行了扩展,添加了超时时间,序列化方法。

2016-06-25 14:35:12 +08:00
 wuchangming89

源码地址: https://github.com/WQTeam/web-storage-cache

WebStorageCache 对 HTML5 localStorage 和 sessionStorage 进行了扩展,添加了超时时间,序列化方法。可以直接存储 json 对象,同时可以非常简单的进行超时时间的设置。
优化WebStorageCache自动清除访问的过期数据,避免了过期数据的累积。另外也提供了清除全部过期数据的方法:wsCache.deleteAllExpires();

例子

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();

2875 次点击
所在节点    JavaScript
5 条回复
jsser
2016-06-25 14:37:59 +08:00
谢谢分享,已收藏
ajan
2016-06-26 09:48:09 +08:00
赞,好东西
jsser
2016-06-26 10:04:53 +08:00
@jsser 谢谢支持
jsser
2016-06-26 10:05:04 +08:00
@ajan 谢谢支持
fhefh
2016-06-30 15:59:08 +08:00
nice 收藏~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/288246

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX