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 ...
随机推荐
- 自行搭建私有云kodexplorer
kodexplorer是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!最近百度网盘还发出申明,说要限制使用空间.用别人的东西 ...
- 日常问题181101: ueditor文本编辑器
下载地址: https://ueditor.baidu.com/website/download.html#ueditor 把下载好的文件整个复制到根目录(或是,想要存放的目录) 引入css: < ...
- gym 101628
前几天感冒了三天没怎么写题...今天好很多了打个三星场找点手感. 不行啊我好菜啊.只会8个..补题的话,再说吧.G题感觉值得一补. 补了G,K不想写B不会. 说实话这个三星场还是很新人向的,知识点也蛮 ...
- css知识总结
---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...
- AWS MVC 详解
由于新工作是在AWS PaaS平台上进行开发,为不耽误工作,先整理一下AWS MVS的使用规范,快速上手.对AWS PaaS平台的相关介绍留到以后再来补充.本文几乎是对官方学习文档的整理,有遗漏的后补 ...
- django 利用pillow 进行简单的设置验证码(python)
1.导入模块 并定义一个验证状态 from PIL import Image, ImageDraw, ImageFont from django.utils.six import BytesIO de ...
- unittest批量执行测试用例
现有四个测试用例分别在两个.py文件中,如何执行这些文件? unittest中有这样处理:unittest.TestLoader().discover() 第一个文件test_case1.py fro ...
- js中的cookie
cookie就是一个存放数据的东西,存储量很小4kb,存放在客户端上和应用设备上. 应用场景 用户注册,用户登录,购物车. Chrome浏览器在计算机中存放cookie的位置 C:\Users\Adm ...
- CentOS6 安装 MySQL5.7
CentOS 6.10 编译安装 Mysql 5.7.23 X64 1.添加用户组和用户 1) 添加用户组和用户 groupadd mysql 2) 添加用户 useradd -g mysql -s ...
- CentOS 7 安装配置 OpenVPN 客户端
安装 epel yum 源: $ rpm -ivh http://mirrors.sohu.com/fedora-epel/6/x86_64/epel-release-6-8.noarch.rpm $ ...