Html5 localStorage 缓存
1.客户端页面临时存贮数据变化多段,cookie ,session, data-xxx , hidden input 这些司空见惯不废话,我们采用 localStorage
特点:1.数据不会删除,除非显示调用 clear. 2.数据量大 最大据有关测试为 2.6M左右
本次使用场景是:需要加载一部分数据,数据量比较大,更新不频繁。采用 localStorage 页面主要代码如下:
<script type="text/javascript">
var curtime = new Date().getTime();
var exp = ;//5分钟后过期
if (window.localStorage) {
//支持
alert("支持");
} else {
//不支持
alert("不支持");
}
cacheInit();
function cacheInit() {
var exp = localStorage.getItem("exp");
if (!exp) {
localStorage.setItem("exp", curtime);//JSON.stringify({val:value,time:curtime}) 可设置缓存对象 eg: json对象等
}
}
function setCache(key, val) {
localStorage.setItem(key, val);
}
function getCache(key, delay) {
delay = delay || exp;
var exp_temp = localStorage.getItem("exp");
var temp_dely = ((new Date().getTime() - exp_temp) / );
if (temp_dely > delay) {
localStorage.clear();//过期后清除缓存
cacheInit();
} else {
return localStorage.getItem(key);//获取存储的元素JSON.parse(localStorage.getItem(key))
}
}
function Test() {
alert("test");
setCache("", "");
}
function TestGet(obj) {
return getCache("", obj);
}
</script>
PS:适合客户端做一些数据的存贮。调用 插入 :setCache(key, val) 获取:getCache(key, 6) 即可。
Html5 localStorage 缓存的更多相关文章
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5本地缓存数据
//HTML5本地缓存数据 function putObj(key, data) { if (!!window.localStorage) { var obj = { "key": ...
- HTML5 Web缓存&运用程序缓存&cookie,session
在介绍HTML5 web缓存前,来认识一下cookie和session: session: 由于HTTP是无状态的,你是谁?你干了什么?抱歉服务器都是不知道的. 因此session(会话)出现了,它会 ...
- 将css和js缓存到localStorage缓存,提高网页响应速度
适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...
- HTML5离线缓存(Application Cache)
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...
随机推荐
- Gradle 学习一
参考教程:https://guides.gradle.org/consuming-jvm-libraries/ 安装Gradle 下载地址:https://guides.gradle.org 配置环境 ...
- java将数据库中查询到的数据导入到Excel表格
1.Maven需要的依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> ...
- Js 运行机制和Event Loop
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- MVC Web.Config 配置错误
配置一个MVC项目的 SessionState,查阅了大量的资料,发现都是直接在web.config中直接加入类似的语句就可以了 <sessionState timeout="60&q ...
- python编程从入门到实战1-3章
print('hellow world') """ 多行注释"""#大小写print('i love you')mssage='hellow ...
- win10常用快捷键
记住Win10一些常用的快捷键,在使用电脑的过程中,可以快速的切换不同的功能窗口,减少鼠标的操作.大大提高工作效率.来看看下面这些常用的. Win键+Tab:激活任务视图 Win键+A:激活操作中心 ...
- Data Center手册(2): 安全性
有个安全性有下面几种概念: Threat:威胁 Vulnerability: 安全隐患 Attack: 攻击 有关Threat 常见的威胁有下面几种 DoS(Denial of Service拒绝服务 ...
- MemCache详细解读
MemCache是什么 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高 ...
- MySQL InnoDB 备份与恢复七种方式
有几种方式: 1 mysqldump, 这种方式不仅适用于InnoDB,还适用于其它类型的存储引擎,如MyISAM.备份的时候将数据库备份成SQL(包含drop,create,insert等语句),恢 ...
- 分布式服务框架介绍:最成熟的开源NIO框架Netty
尽管JDK提供了丰富的NIO类库,网上也有很多NIO学习例程,但是直接使用Java NIO类库想要开发出稳定可靠的通信框架却并非易事,原因如下: 1)NIO的类库和API繁杂,使用麻烦,你需要熟练掌握 ...