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缓存&运用程序缓存&cookie,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. (转载)HTML5 LocalStorage 本地存储

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

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

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

随机推荐

  1. .NET题目(收集来自网络)

    1: .NET和c#有什么区别? 答: .NET一般是指.NET FrameWork框架,是一种平台,一种技术 c#是一种编程语言,是可以基于.NET平台的应用 2: c#中的委托是什么?事件是不是一 ...

  2. LIS的优化算法O(n log n)

    LIS的nlogn的优化:LIS的优化说白了其实是贪心算法,比如说让你求一个最长上升子序列把,一起走一遍. 比如说(4, 2, 3, 1, 2,3,5)这个序列,求他的最长上升子序列,那么来看,如果求 ...

  3. Python函数式编程之装饰器

    原则:对修改是封闭的,对扩展是开放的,方法:一般不修改函数或者类,而是扩展函数或者类 一:装饰器 允许我们将一个提供核心功能的对象和其他可以改变这个功能的对象’包裹‘在一起, 使用装饰对象的任何对象与 ...

  4. Android Studio 设置不同分辨率的图标Icon

    右键你的项目 -->"NEW"-->"Image Asset" 'Asset Type' 勾选”Image“才可以选择”Path“,其他选项可以自己 ...

  5. return和throw某些特性相似

    拷贝构造函数的调用拷贝构造函数会在以下三中情况下被调用(1)当类的一个对象去初始化该类的另一个对象时 int main(){ Point a(1,2); Point b(a);//用对象a初始化对象b ...

  6. monaco editor + vue的配置

    monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货 ...

  7. [Swift]LeetCode285. 二叉搜索树中的中序后继节点 $ Inorder Successor in BST

    Given a binary search tree and a node in it, find the in-order successor of that node in the BST. Th ...

  8. [Swift]LeetCode769. 最多能完成排序的块 | Max Chunks To Make Sorted

    Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...

  9. 一文掌握 Linux 性能分析之网络篇(续)

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 这是 Linu ...

  10. TortoiseSVN客户端的使用说明

    1 安装TortoiseSVN客户端 准备安装文件,TortoiseSVN-1.6.16.21511-x64-svn-1.6.17.msi,双击进行安装,按照提示步骤安装,安装完成后需重启计算机,SV ...