博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【开源】封装HTML5的localstorage
阅读量:4577 次
发布时间:2019-06-08

本文共 2831 字,大约阅读时间需要 9 分钟。

项目名:

项目地址:

API说明:

  

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

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

使用:

 

var wsCache = new WebStorageCache();// 缓存字符串'wqteam' 到 'username' 中, 超时时间100秒wsCache.set('username', 'wqteam', {exp : 100});// 超时截止日期 2015 5 18wsCache.set('username', 'wqteam', {exp : new Date('2015 5 18')});// 获取缓存中 'username' 的值wsCache.get('username');// 缓存简单js对象,默认使用序列化方法为JSON.stringify。可以通过初始化wsCache的时候配置serializer.serializewsCache.set('user', { name: 'Wu', organization: 'wqteam'});// 读取缓存中的简单js对象 - 默认使用反序列化方法为JSON.parse。可以通过初始化wsCache的时候配置serializer.deserializevar 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);

  

转载于:https://www.cnblogs.com/wuchangming/p/4897703.html

你可能感兴趣的文章
js URL中文传参乱码
查看>>
Leetcode 367. Valid Perfect Square
查看>>
UVALive 3635 Pie(二分法)
查看>>
win系统查看自己电脑IP
查看>>
Backup&recovery备份和还原 mysql
查看>>
一道面试题及扩展
查看>>
Unity 3D 我来了
查看>>
setup elk with docker-compose
查看>>
C++ GUI Qt4学习笔记03
查看>>
Java基础回顾 —反射机制
查看>>
c# 前台js 调用后台代码
查看>>
2017-02-20 可编辑div中如何在光标位置添加内容
查看>>
$.ajax()方法详解
查看>>
jquery操作select(增加,删除,清空)
查看>>
Sublimetext3安装Emmet插件步骤
查看>>
MySQL配置参数
查看>>
全面理解Java内存模型
查看>>
存储过程
查看>>
生成器
查看>>
将一个数的每一位都取出来的方法!
查看>>