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 ...
随机推荐
- 程序执行流程/布尔类型与布尔:运算猜数字游戏;库的使用:turtle
myPrice = 6 while True: guess = int(input()) if guess > myPrice: print('>') elif guess < my ...
- C语言表达式和语句
一.表达式 在C语言中,常量.变量.函数调用以及按C语言语法规则用运算符把运算数连接起来的式子都是合法的表达式 . 最后一类可以理解为运算符和运算对象的组合.例如: 算术表达式 = 算术运算符 + 运 ...
- [LeetCode] Score of Parentheses 括号的分数
Given a balanced parentheses string S, compute the score of the string based on the following rule: ...
- ubuntu16.04开机时的.local问题
开机时显示:您的当前网络有.local域,我们不建议这样做而且这与AVAHI网络服务探测不兼容,该服务已被禁用 解决方法: 在终端输入:sudo gedit /etc/default/avahi-da ...
- ARVE: Augmented Reality Applications in Vehicle to Edge Networks
ARVE:车辆到边缘网中的增强现实应用 本文为SIGCOMM 2018 Workshop (Mobile Edge Communications, MECOMM)论文. 笔者翻译了该论文.由于时间仓促 ...
- 安装与配置Flutter开发环境
这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter. 由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好 ...
- 【RL-TCPnet网络教程】第22章 RL-TCPnet之网络协议IP
第22章 RL-TCPnet之网络协议IP 本章节为大家讲解IP(Internet Protocol,网络协议),通过前面章节对TCP和UDP的学习,需要大家对IP也有个基础的认识. (本章 ...
- [Swift]LeetCode56. 合并区间 | Merge Intervals
Given a collection of intervals, merge all overlapping intervals. Example 1: Input: [[1,3],[2,6],[8, ...
- [Swift]LeetCode152. 乘积最大子序列 | Maximum Product Subarray
Given an integer array nums, find the contiguous subarray within an array (containing at least one n ...
- [Swift]LeetCode164. 最大间距 | Maximum Gap
Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...