我想对 localstorage 进行一些扩展，让他更适合现在的客户端浏览器开发。

notCharming 2015-06-19 02:11:33

localStorage是HTML5新增的属性。随着各种浏览器的升级越来越多设备支持H5。特别是移动智能设备方面，基本完全普及。
都知道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();