WebStorageCache 对 HTML5 localStorage 和sessionStorage 进行了扩展，添加了超时时间，序列化方法。可以直接存储 json 对象，同时可以非常简单的进行超时时间的设置。
优化：WebStorageCache自动清除访问的过期数据，避免了过期数据的累积。
另外也提供了清除全部过期数据的方法：wsCache.deleteAllExpires();
用法
下载 最新 WebStorageCache。
使用 WebStorageCache，只要在页面上引入下面代码即可。
<script src="src/web-storage-cache.js"></script> <script> // create WebStorageCache instance. var wsCache = new WebStorageCache(); // cache 'wqteam' at 'username', expired in 100 seconds wsCache.set('username', 'wqteam', {exp : 100}); </script>
也可以在 RequireJS 使用 WebStorageCache：
define(['web-storage-cache'], function(WebStorageCache) { // 初始化 WebStorageCache 实例. var wsCache = new WebStorageCache(); // 缓存字符串'wqteam' 到 'username' 中, 超时时间100秒. wsCache.set('username', 'wqteam', {exp : 100}); });
例子
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);
-
https://github.com/WQTeam/web-storage-cache 使用WebStorageCache，只要在页面上引入下面代码即可。 <script src="src/web-storage-cache.js"></script> <script src="~/scripts/AjaxCache/ajax-cache.js"></script> <script> // c
-
webStorageCache import WebStorageCache from 'web-storage-cache' var wsCache = new WebStorageCache(); // cache 'wqteam' at 'username', expired in 100 seconds wsCache.set('username', 'wqteam', {exp : 1}
-
AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的，具体详细api可查看链接，点击查看详细内容，本文主要是基于AsyncStorage 和 github(react-native-storage),做了一层简单的封装，使用起来相对来说更加方便一些； 具体文件内容如下： import Storage from 'react-native-st
-
react-native-storage 这是一个本地持久存储的封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)。ES6语法，promise异步读取，使用jest进行了完整的单元测试。 安装 npm install react-native-storage –save 使用说明 配置 Web开发 对于Web开发你需要使用webpack和ba
-
简介-本文范围 (Introduction - scope of the article) This series of articles deals with caching in the context of HTTP. When properly done, caching can increase the performance of your application by an orde
-
这是一个本地持久存储的封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)。ES6语法，promise异步读取，使用jest进行了完整的单元测试。 安装 npm install react-native-storage --save 使用说明 配置 Web开发 对于Web开发你需要使用webpack和babel来支持es6模块导入功能。 在we
-
localStorage.js: import {AsyncStorage} from 'react-native'; import Storage from 'react-native-storage'; var storage = new Storage({ // 最大容量，默认值1000条数据循环存储 size: 1000, // 存储引擎：对于RN使用AsyncStorage
-
会话存储 会话存储设计用于用户执行单个事务但可以同时在不同窗口中执行多个事务的场景。 本地存储 本地存储设计用于跨越多个窗口的存储，并且持续超出当前会话。 特别是，出于性能原因，Web应用程序可能希望在客户端存储兆字节的用户数据，例如整个用户创作的文档或用户的邮箱。
-
HTML5引入了两种机制，类似于HTTP会话cookie，用于在客户端存储结构化数据并克服以下缺点。 每个HTTP请求都包含Cookie，从而通过传输相同的数据来减慢Web应用程序的速度。 每个HTTP请求都包含Cookie，从而通过Internet发送未加密的数据。 Cookie限制为大约4 KB的数据。 不足以存储所需的数据。 这两个存储是session storage和local stora
-
Web Storage 是以键值对（key-value）的形式存储数据，要存储的数据需要一个名字作为键，然后就可以使用这个键来读取它的值。键是一个字符串。值可以是 JavaScript 支持的任何数据类型，包括字符串、布尔值、整数和浮点数。但是，它们都会被转换成字符串进行存储。 对任何数据的操作，无非就是增、删、查、改，下面介绍一下Web Storage操作数据的方法，包括存储、修改、读取、删除、
-
sessionStorage 是一个实现了 HTML5 规范中的数据存储的实现，支持主流浏览器。 示例代码： sessionStorage.getItem("test"); // null sessionStorage.setItem("test", "yo"); sessionStorage.getItem("test"); // yo
-
问题内容： 我阅读了有关sessionStorage和localStorage的一些文档，但是我不明白范围是什么：域，特定页面？ 并且如果在上述每个页面上运行（idvalue是查询字符串中的值）： 我最终会存储3个不同的值，还是两个值会互相覆盖？ 问题答案： 这些值将互相覆盖。每个密钥名称对对于协议和域而言都是唯一的，而与路径无关。 可以通过属性更改受影响的域。 -> 可以（子域） -> 不可能
-
Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。 它们有趣的是，在页面刷新后（对于 sessionStorage）甚至浏览器完全重启（对于 localStorage）后，数据仍然保留在浏览器中。我们很快就会看到。 我们已经有了 cookie。为什么还要其他存储对象呢？ 与 cookie 不同，Web 存储对象不会随每个请求被发送到服务器