实现前端缓存，除了自己创建js保存（參考：http://blog.csdn.net/clementad/article/details/46807641）。还能够利用html5的storage方法。

HTML5 提供了两种在client存储数据的新对象：

  • localStorage：没有时间限制的数据存储，在同一个浏览器中，仅仅要没被手动清理，第二天、第二周或下一年之后，数据依旧可用。

  • sessionStorage：针对一个 session 的数据存储。针对一个 session 进行数据存储。当用户关闭浏览器窗体后，数据会被删除（并且仅仅在当前窗体有效）。

下面是使用这两个对象的样例：

  1.   <body>
  2.  
  3. 	<h2>在client存储数据</h2>
  4.     <p>HTML5 提供了两种在client存储数据的新方法：</p>
  5. 	<ul>
  6. 	<li>localStorage：没有时间限制的数据存储</li>
  7. 	<li>sessionStorage：针对一个 session 的数据存储</li>
  8. 	</ul>
  9.  
  10.     <br>
  11.     <h2>localStorage的使用：</h2>
  12.     <p>localStorage存储的数据没有时间限制。在同一个浏览器中，仅仅要没被手动清理，第二天、第二周或下一年之后，数据依旧可用。
  13.  
  14. </p>
  15.     <p>样例：你在本机使用本浏览器第 <span id="visitCount" class="highlight"></span> 次浏览本页面。
  16.  
  17. </p>
  18.  
  19.  	<h2>sessionStorage的使用：</h2>
  20. 	<p>sessionStorage针对一个 session 进行数据存储。
  21.  
  22. 当用户关闭浏览器窗体后，数据会被删除（并且仅仅在当前窗体有效）。</p>
  23.   	<p>样例：你在本次打开此窗体后，第 <span id="visitCountPerSession" class="highlight"></span> 次浏览了本页面。</p>
  24.   </body>
  1.     <script>
  2.     	$(function(){
  3.     		recordVisitCount();
  4.     		recordSessionCount();
  5.     	});
  6.  
  7.     	function recordVisitCount(){
  8.     		if (localStorage.pagecount){
  9. 				localStorage.pagecount=Number(localStorage.pagecount) +1;
  10. 			} else {
  11. 				localStorage.pagecount=1;
  12. 			}
  13. 			$("#visitCount").html(localStorage.pagecount);
  14.     	}
  15.  
  16. 		function recordSessionCount(){
  17. 			if (sessionStorage.pagecount) {
  18. 				sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
  19. 			} else {
  20. 				sessionStorage.pagecount = 1;
  21. 			}
  22. 			$("#visitCountPerSession").html(sessionStorage.pagecount);
  23. 		}
  24. 	</script>

执行结果例如以下：

（原创文章。转载请注明转自Clement-Xu的csdn博客。）

HTML5: 本地缓存的更多相关文章

  1. HTML5本地缓存数据

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

  2. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  3. HTML5 本地缓存 window.localStorage

    简单运用 html <div onclick="storage('invoice')"></div> js 设置  与 获取 function storag ...

  4. HTML5本地缓存localStorage和sessionStorage的操作方法收集

    说明: Web Storage 包含如下两种机制: sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开 ...

  5. vue日历/日程提醒/html5本地缓存

    先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2.“今天”回到今天:“+”添加日程 3.localStorage存储日程 index,html <body> <div ...

  6. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  7. HTML5离线存储和本地缓存

    一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...

  8. HTML5离线缓存（Application Cache）

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

  9. HTML5 离线缓存管理库

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

随机推荐

  1. python远程控制电脑

    python拥有大量的第三方库,且语法简单.今天老杨就用python实现远程控制电脑 ​ 所谓,谋定而后动,在实现任何一个需求之前,我们需要先分析,捋清楚一个思路,远程控制电脑,无非就是接收远程的命令 ...

  2. Java基础(十三)--深拷贝和浅拷贝

    在上篇文章:Java基础(十二)--clone()方法,我们简单介绍了clone()的使用 clone()对于基本数据类型的拷贝是完全没问题的,但是如果是引用数据类型呢? @Data @NoArgsC ...

  3. js-时间戳转字符串

    function createTime(v){ var now = new Date(v); var yy = now.getFullYear(); //年 var mm = now.getMonth ...

  4. MFC定时器的使用

    巧妙地使用定时器能达到意想不到的效果,写界面的时候能实现渐变,也能帮助多线程控制等我们知道,在VC的MFC中,已经为我们封装好了很多全面和强大的函数集,所以在MFC编程时,巧妙地调用MFC函数库可以为 ...

  5. LeetCode（54）Spiral Matrix

    题目 Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral ...

  6. 在linux服务器上搭建Struts2项目运行环境

    服务器上工作: 首先要先装java https://www.cnblogs.com/lamp01/p/8932740.html 然后装好tomcat https://www.cnblogs.com/y ...

  7. Linux学习笔记01

    1.Linux不靠扩展名区分文件类型2.存储设备必须先挂载才能使用3.Windows下的程序不能直接在Linux中安装和运行 一.服务器的管理预配置Linux的目录的作用:/bin/存放系统命令的目录 ...

  8. 九度oj 题目1473：二进制数(stack)

    题目1473:二进制数 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:9371 解决:2631 题目描述: 大家都知道,数据在计算机里中存储是以二进制的形式存储的. 有一天,小明学了C语 ...

  9. 【区间DP+好题】String painter

    https://www.bnuoj.com/v3/contest_show.php?cid=9149#problem/G [题意] 给定两个长度相同的字符串A,B.每次操作都能把A中的任意一个子段变成 ...

  10. 贝尔数--Codeforces908E. New Year and Entity Enumeration

    给n<=50个长度m<=1000的二进制数,记他们为集合T,求满足下面条件的集合S数:令$M=2^m-1$,1.$a \epsilon S \Rightarrow a \ \ xor \ ...