Html5 localStorage 缓存

时间:2022-09-07 09:12:08

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 缓存的更多相关文章

  1. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  2. HTML5本地缓存数据

    //HTML5本地缓存数据 function putObj(key, data) { if (!!window.localStorage) { var obj = { "key": ...

  3. HTML5 Web缓存&amp&semi;运用程序缓存&amp&semi;cookie&comma;session

    在介绍HTML5 web缓存前,来认识一下cookie和session: session: 由于HTTP是无状态的,你是谁?你干了什么?抱歉服务器都是不知道的. 因此session(会话)出现了,它会 ...

  4. 将css和js缓存到localStorage缓存,提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  5. HTML5离线缓存(Application Cache)

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  6. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  7. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  8. &lpar;转载&rpar;HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  9. localStorage存值取值以及存取JSON&comma;以及基于html5 localStorage的购物车

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...

随机推荐

  1. JavaScript —— 对象的取值与赋值

    可能是因为用惯了 Java ,对一个对象取值/赋值喜欢用 setXXX() 和 getXXX() . 在 JavaScript 中使用 setValue() 时,遇到了个奇怪的问题,所以查了下 Jav ...

  2. C&num;全角半角转换函数

    Code#region 全角半角转换 /// <summary> /// 转全角的函数(SBC case) /// </summary> /// <param name= ...

  3. 批量生成卡号密码的php程序

    <?php header('Content-Type:text/html; charset=utf-8'); function MakeCard() { set_time_limit(0); / ...

  4. springmvc学习笔记&lpar;简介及使用&rpar;

    springmvc学习笔记(简介及使用) 工作之余, 回顾了一下springmvc的相关内容, 这次也为后面复习什么的做个标记, 也希望能与大家交流学习, 通过回帖留言等方式表达自己的观点或学习心得. ...

  5. OpenCV探索之路(二十一)如何生成能在无opencv环境下运行的exe

    我们经常遇到这样的需求:我们在VS写好的程序,需要在一个没有装opencv甚至没有装vs的电脑下运行,跑出效果.比如,你在你的电脑用opencv+vs2015写出一个程序,然后老师叫你把程序发给他,他 ...

  6. 配置AIX系统互信关系

    解释: 信任关系指一台远程服务器的用户以相同的用户名接入到另外一台服务器,而无需提供口令. 双机之间建立信任关系后,可以使用“rcp”和“rlogin”等命令. 操作步骤: 1.以root用户登录双机 ...

  7. Django模板中的数字自增

    Django框架的模板提供了{% for %} 标签来进行循环 例如对集合进行循环是比较简单的 {% for row in v1 %} <div>{{row.name}}</div& ...

  8. JavaScript——变量

    本文简述了JavaScript变量的数据类型,以及变量类型检测与类型转换 一.介绍 JavaScript的变量有6种数据类型,包含5种原始类型和1种对象类型.本人比较喜欢用逻辑图的形式总结知识点,这样 ...

  9. Android 关于缓存的一些类

    在做项目的时候,难免需要将一些数据存储在手机中,之前用sqlite和sharepreference,但是使用起来不是很方便.最近用到了一些缓存的类,非常方便,特此记录下来. ASimpleCache ...

  10. 【Codeforces】CF 2 B The least round way(dp)

    题目 传送门:QWQ 分析 求结尾0的数量QwQ. 10只能是$ 2 \times 5 $,我们预处理出每个数因子中2和5的数量. 我们接着dp出从左上到右下的经过的最少的2的数量和最少的5的数量.两 ...