我想对 localstorage 进行一些扩展,让他更适合现在的客户端浏览器开发。
都知道localstorage是作为一个类似客户端的数据库来设计的。使用的API非常简单,这也是它非常好用的原因。参考
但真正用了后发现存在一些可以改进的地方
1、只能存string类型。其他类型会被强转成string类型。当我们想存一个简单js对象的时候,如不做处理,存储的结果会变成'[object Object]'。
2、用惯cookie的都知道有个好用的属性叫 超时时间。但localstorage或者sessionStorage是么有的。
虽然说作为数据库来设计的localstorage并不需要这样的属性。但是实际中使用localstorage确只能更像一个缓存。为什么呢?以移动端为例(pc应该也一样),用户使用浏览器有个类似‘无痕浏览’的功能(特别说下,如果是safari开启这个模式。setItem操作会直接抛出QUOTA_EXCEEDED_ERR异常)。开启这个后,很多数据根本无法长期保存。而且还有各式各样的清缓存app。所以其实localstorage也只能作为缓存来提高性能的方式存在(如缓存某些常用异步请求数据),并不适合作为一种可靠持久化组建。
为此我build了一个项目想和大家一起完善它。
项目地址:https://github.com/WQTeam/web-storage-cache
使用说明:https://github.com/WQTeam/web-storage-cache/blob/master/README_zh_CN.md
gitter地址: https://gitter.im/WQTeam/web-storage-cache
示例:
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');
// 清除客户端中所有缓存
wsCache.clear();
// 为已存在的(未超时的)缓存值设置新的超时时间。
wsCache.touch('username', {exp : 1000});
// 如果缓存中没有key为username2的缓存,则添加username2。反之什么都不做
wsCache.add('username2', 'wqteam', 1000);
// 如果缓存中有key为username的缓存,则替换为新值。反之什么都不做
wsCache.replace('username', 'new wqteam', {exp : 1000});
// 检查当前选择作为缓存的storage是否被用户浏览器支持。如果不支持调用WebStorageCache API提供的方法将什么都不做。
wsCache.isSupported();
由于刚build的不推荐直接拿来使用。除非经过严格测试。
相关推荐
浏览器关闭时清空localStorage储存的数据
浏览器关闭时清空localStorage储存的数据说明需求解决方案及思路 说明 由于不同页面或标签页间无法共享sessionStorage的信息,所以将项目中登录状态存于localStorage中。 需求 需要在用户关闭浏览器时,将localStorage中存储的数据清除。 解决方案及思路 一开始想到了onunload方法,性子急直接撸上去 [removed]=()=>{ localStorage.clear(); } 试了试还挺好使,美滋滋的去改下一个bug~~~也是心大#24, 没过多久胖胖用F5刷新了下页面,一脸懵逼!!跳到登录页直接,由于onunload在咱们浏览
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
今天小编就为大家分享一篇vue 关闭浏览器窗口的时候,清空localStorage的数据示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie、webStorage(localStorage和sessionStorage)。下面我们来一一认识它们。 Cookie基于HTTP规范,用来识别用户。 Cookie是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态。 •会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息) •个性化设置(如用户自定义设置、主题等) •浏览器行为跟踪(如跟踪分析用户行为等)
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同,今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法,需要的朋友参考下吧
本地存储localStorage用法详解
主要为大家详细介绍了本地存储localStorage的用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


