HTML5: 本地缓存
实现前端缓存，除了自己创建js保存（參考：http://blog.csdn.net/clementad/article/details/46807641）。还能够利用html5的storage方法。
HTML5 提供了两种在client存储数据的新对象：
- localStorage：没有时间限制的数据存储，在同一个浏览器中，仅仅要没被手动清理，第二天、第二周或下一年之后，数据依旧可用。
- sessionStorage：针对一个 session 的数据存储。针对一个 session 进行数据存储。当用户关闭浏览器窗体后，数据会被删除（并且仅仅在当前窗体有效）。
下面是使用这两个对象的样例：
<body> <h2>在client存储数据</h2>
<p>HTML5 提供了两种在client存储数据的新方法：</p>
<ul>
<li>localStorage：没有时间限制的数据存储</li>
<li>sessionStorage：针对一个 session 的数据存储</li>
</ul> <br>
<h2>localStorage的使用：</h2>
<p>localStorage存储的数据没有时间限制。在同一个浏览器中，仅仅要没被手动清理，第二天、第二周或下一年之后，数据依旧可用。 </p>
<p>样例：你在本机使用本浏览器第 <span id="visitCount" class="highlight"></span> 次浏览本页面。 </p> <h2>sessionStorage的使用：</h2>
<p>sessionStorage针对一个 session 进行数据存储。 当用户关闭浏览器窗体后，数据会被删除（并且仅仅在当前窗体有效）。</p>
<p>样例：你在本次打开此窗体后，第 <span id="visitCountPerSession" class="highlight"></span> 次浏览了本页面。</p>
</body>
<script>
$(function(){
recordVisitCount();
recordSessionCount();
}); function recordVisitCount(){
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
} else {
localStorage.pagecount=1;
}
$("#visitCount").html(localStorage.pagecount);
} function recordSessionCount(){
if (sessionStorage.pagecount) {
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
} else {
sessionStorage.pagecount = 1;
}
$("#visitCountPerSession").html(sessionStorage.pagecount);
}
</script>
执行结果例如以下：
（原创文章。转载请注明转自Clement-Xu的csdn博客。）
HTML5: 本地缓存的更多相关文章
- HTML5本地缓存数据
//HTML5本地缓存数据 function putObj(key, data) { if (!!window.localStorage) { var obj = { "key": ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- HTML5 本地缓存 window.localStorage
简单运用 html <div onclick="storage('invoice')"></div> js 设置 与 获取 function storag ...
- HTML5本地缓存localStorage和sessionStorage的操作方法收集
说明: Web Storage 包含如下两种机制: sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开 ...
- vue日历/日程提醒/html5本地缓存
先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2.“今天”回到今天:“+”添加日程 3.localStorage存储日程 index,html <body> <div ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- HTML5离线存储和本地缓存
一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...
- HTML5离线缓存（Application Cache）
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
随机推荐
- 谈谈JVM内存区域的划分
我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存,用户缓冲用户IO等待导致CPU的等 ...
- Java IO(一)--File类
File类不是单指文件,它既可以代表一个文件名称,又可以代表一个目录下的一组文件.可以用来创建.删除.遍历文件等 public static void main(String[] args) { St ...
- vitualbox网络设置链接
网文摘录地址:https://blog.csdn.net/yushupan/article/details/78404395 vitualbox网络设置: 一.NAT模式 特点: 1.如果主机可以上网 ...
- 1.C#冒泡排序
冒泡 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.这步做完后,最后的元素会是最大的数. 针对所有的元素重复以上的步骤,除了最后一 ...
- 编程规范:allocator
一.作用 标准库allocator类定义在头文件memory中,它帮助我们将内存分配和对象构造分离开来 allocator<T> a //定义一个名为a的allocator对象,它可以为类 ...
- flutter 上传图片 image_picker 的使用
Github地址: https://github.com/flutter/plugins/tree/master/packages/image_picker packages地址: https://p ...
- Java中a=a++ 和 a=++a（转）
转自https://blog.csdn.net/lovepluto/article/details/81062176 如果问 a++ 和 ++a 的区别,估计很多都能回答上来.a++ 是先取 a 的值 ...
- Java中创建对象的内存图
所有人都知道面向对象思想,Java中的对象的创建在内存中是如何创建的,传智播客的视频看了一遍,把一些讲解的比较清晰的内容记录下来,方便记忆的更加深刻,Java中创建对象的过程,首先要理解JVM中栈.堆 ...
- 基于flask的网页聊天室（一）
基于flask的网页聊天室(一) 基本目标 基于flask实现的web聊天室,具有基本的登录注册,多人发送消息,接受消息 扩展目标 除基本目标外添加当前在线人数,消息回复,markdown支持,历史消 ...
- 去面试Python工程师，这几个基础问题一定要能回答，Python面试题No4
今天的面试题以基础为主,去面试Python工程师,这几个基础问题不能答错 第1题:列表和元组有什么不同? 列表和元组是Python中最常用的两种数据结构,字典是第三种. 相同点: 都是序列 都可以存储 ...