web-storage-cache 使用JS数据缓存

时间:2022-12-26 00:23:37

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&period;Web&period;Caching&period;Cache类 Asp&period;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存储机制&lpar;Web Storage&rpar;

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

  7. 浏览器 Web Storage - sessionStorage &amp&semi; localStorage

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

  8. HTML5权威指南--Web Storage&comma;本地数据库&comma;本地缓存API&comma;Web Sockets API&comma;Geolocation API&lpar;简要学习笔记二&rpar;

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

  9. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don&&num;39&semi;t know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

随机推荐

  1. mysql出现的错误

    (一)ERROR 1005 (HY000): Can't create table '.\day19\user_role.frm' (errno: 121) 今天遇到的这个问题是因为创建了五张表,其中 ...

  2. arch Failed to load module &quot&semi;intel&quot&semi;

    arch启动x的时候出现问题困扰我一天了,终于解决掉了. 错误如下: [ 61.086] (II) LoadModule: "intel" [ 61.087] (WW) Warni ...

  3. The server instance Witness rejected configure request&semi; read its error log file for more information&period; The reason 1427&comma; and state 31&comma; can be of use for

    数据库服务器做了镜像之后,发现有错误信息 The server instance Witness rejected configure request; read its error log file ...

  4. php 通过curl获取远程数据,返回的是一个数组型的字符串,高手帮忙如何将这个数组类型的字符串变成数组。

    如 Array([0] => Array([0] => Array([kd_status] => 已签收[kd_time] => 2014-04-30 18:59:43 [b] ...

  5. Objective-C点语法

    Objective-C点语法 点语法可以简单的理解成是为了让Java等语言的开发人员能够快速适应OC语言而添加的一个新写法 因为Java里没有指针,也没有[xxx xxx]这种调用方式,都是使用点xx ...

  6. 高斯混合模型和EM算法

    使用期望最大化算法(Expectation-Maximization)来进行密度估计(density estimation). 与k-means一样,给定的训练样本是,我们将隐含类别标签用表示.与k- ...

  7. 基础:新建个maven项目

    首先在电脑上配置好Maven环境 第一步:在Eclipse中选择创建Maven Project Next Next Finish 创建好后项目结构如下: 第二步:讲项目转为Web项目,右键项目点击pr ...

  8. PowerBI

    1.官方PowerBI实例:https://docs.microsoft.com/zh-cn/power-bi/sample-tutorial-connect-to-the-samples 2.配置计 ...

  9. 【BZOJ4005】&lbrack;JLOI2015&rsqb; 骗我呢(容斥,组合计数)

    [BZOJ4005][JLOI2015] 骗我呢(容斥,组合计数) 题面 BZOJ 洛谷 题解 lalaxu #include<iostream> using namespace std; ...

  10. &lbrack;Laravel&rsqb; 05 - Controller

    大纲 PHP章节貌似有类似功能,回头看下. 请求 URL 一.URL 处理方法 请求使用的是:symfony/http-foundation组件 $_GET, $_POST, $_COOKIE, $_ ...