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>
// create WebStorageCache instance.
var wsCache = new WebStorageCache();
// cache 'wqteam' at 'username', expired in 100 seconds
wsCache.set('username', 'wqteam', {exp : 100});
</script>

例子:

ar wsCache = new WebStorageCache();

// 缓存字符串'wqteam' 到 'username' 中, 超时时间100秒
wsCache.set('username', 'wqteam', {exp : 100}); // 超时截止日期,可用使用Date类型
var nextYear = new Date();
nextYear.setFullYear(nextYear.getFullYear() + 1);
wsCache.set('username', 'wqteam', {exp : nextYear}); // 获取缓存中 '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();

  

web-storage-cache 使用JS数据缓存的更多相关文章

  1. Cache 应用程序数据缓存

    System.Web.Caching 命名空间提供用于缓存服务器上常用数据的类.此命名空间包括 Cache 类,该类是一个字典,您可以在其中存储任意数据对象,如哈希表和数据集.它还为这些对象提供了失效 ...

  2. 第十七课:js数据缓存系统的原理

    这一章主要讲的是jQuery的缓存系统的历史发展,以及他自己的框架的缓存系统的实现.都是源码解析. 我就挑几个重点讲下: (1)jQuery的缓存机制的原理 jQuery的缓存机制实现的原理是在元素中 ...

  3. System.Web.Caching.Cache类 Asp.Net缓存 各种缓存依赖

    Cache类,是一个用于缓存常用信息的类.HttpRuntime.Cache以及HttpContext.Current.Cache都是该类的实例. 一.属性 属性 说明 Count 获取存储在缓存中的 ...

  4. Web Storage:浏览器端数据储存机制

    目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...

  5. HTML 5 Web Storage 使用

    在html中,可以使用 Web Storage API 来保存数据在浏览器客户端,这样可以避免重复从服务器加载数据. 有两种API, sessionStorage 和 localStorage ,它们 ...

  6. HTML5分析实战Web存储机制(Web Storage)

    Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...

  7. 左手Cookie“小甜饼”,右手Web Storage

    目录 1. Web Storage 2. Cookie机制 3. 二者的联系与区别 1.Web Storage 1.1 概述 Web Storage是HTML5提供的一种新的浏览器端数据储存机制,它提 ...

  8. 浏览器 Web Storage - sessionStorage & localStorage

    storage事件 当储存的数据发生变化时,会触发storage事件.我们可以指定这个事件的回调函数. window.addEventListener("storage",onSt ...

  9. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

随机推荐

  1. nginx 容器反向代理网址的设置

    先讲一下场景:  nginx 容器要和SpringBoot 容器部署在一台机器上, nginx 为 SpringBoot 提供反向代理, 需要在 nginx.conf 中写上 SpringBoot 的 ...

  2. mac air中编译安装swoole

    本机php版本, 我的7.3.0 1 下载swoole源码 https://github.com/swoole/swoole-src/releases 我下载的版本是swoole-src-4.3.3. ...

  3. egret中三种单利的写法。

    1 普通的单例写法 缺点:每个单例类里都要写instance和getInstance. class Single{ private static instance:Single; public sta ...

  4. 软件测试为什么需要学习Linux的知识?Linux学到什么程度?-log5

    ​软件测试为什么需要学习Linux的知识?学到什么程度?-log5 Dotest软件测试学堂-董浩 公司目前90%的服务器操作系统不是Windows,而是Linux(RedHat.Debian.Cen ...

  5. Java基础14-缓冲区字节流;File类

    作业解析 阐述BufferedReader和BufferedWriter的工作原理, 是否缓冲区读写器的性能恒大于非缓冲区读写器的性能,为什么,请举例说明? 答: BufferedReader对Rea ...

  6. Windows安装docker (带安装包)

    docker安装包链接 链接:https://pan.baidu.com/s/1JBk8GCH6j_WeGdoaUuIoWw 提取码:8kgg 我电脑上有了git所以没有勾选最后一个 安装完成后将此目 ...

  7. C#学习笔记——MDI窗体(多文档界面)

    1.设置父窗体: 如果要将某个窗体设置为父窗体,只需将该窗体的IsMdiContainer属性设置为True即可. 2.设置子窗体: 通过设为某个窗体的MdiParent属性来确定该窗体是那个窗体的子 ...

  8. 开头不讲"Hello Word",读尽诗书也枉然 : Word 操作组件介绍 - Spire.Doc (转)

      [原文地址]http://www.cnblogs.com/liqingwen/p/5898368.html 序 本打算过几天简单介绍下组件 Spire.XLS,突然发现园友率先发布了一篇,既然 x ...

  9. Salesforce知识整理(一)之Lightning Web Component Tools

    目录 LWC知识整理(一) 工具 Salesforce CLI Visual Studio Code(VS Code) Developer Hub(Dev Hub) 开启Dev Hub 相关资料 茶余 ...

  10. SQL08 清空日志文件语句

    --1.先查询数据的日志文件的名称 USE lwlz_zhiluo GO SELECT name FROM SYS.database_files WHERE type_desc='LOG' --2.执 ...