实现前端缓存，除了自己创建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: 本地缓存的更多相关文章

  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. AIX 10201 HA RAC 安装+升级到10204

    1:查看系统版本 [rac1:root:/hacmp/hacmp5.4/ha5.4/installp/ppc] oslevel -s 6100-06-06-1140 lslpp -al bos.adt ...

  2. 【Linux】CentOS tar压缩与解压命令大全

    tar命令详解 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用 ...

  3. 用cesium本身添加水纹效果

    参考网站:https://blog.csdn.net/XLSMN/article/details/78752669 1.首先来看一下整体效果 2.具体方法如下: 首先,你必须有两张很重要的图片,你可以 ...

  4. Django 外键ForeignKey中的on_delete

    当你在Django中删除了一个有着外键关联的数据时,比如一个作者和他名下的所有的书的信息,书的外键是作者(一个作者可有好多本书),当你把作者的信息从数据库中删除时,Django提供了一下几个参数来对作 ...

  5. 说说C#中list与IList中的区别(转载)

    首先IList 泛型接口是 ICollection 泛型接口的子代,并且是所有泛型列表的基接口. 但是它仅仅是所有泛型类型的接口,并没有太多方法可以方便实用,如果仅仅是作为集合数据的承载体,确实,IL ...

  6. rfcn结构

    这是rfcn模型的rpn网络部分: 这是rfcn模型的rfcn网络部分: 可以看到rpn网络使用的最后一层特征提取层是resnet的res4f,rfcn网络使用的最后一层特征提取层是resnet的re ...

  7. C# WebService 的缓存机制

    C# WebService 的缓存机制   [转]WebService的缓存机制 2008年02月19日 星期二 11:22 WebService的缓存分为两种,一种是简单的输出缓存,一种是强大的数据 ...

  8. vue中去掉烦人的格式警告（eslint ）

    解决办法: 一,源头上解决,下次创建项目时就不要使用eslint连接项目代码 如上图所示,就是在这一步的时候选择no: 二,在build文件夹中找到webpack.base.conf.js文件 找到右 ...

  9. js读取文本内容，支持csv.txt

    js读取文本内容,支持csv.txt <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  10. nodejs学习（一） ---- nodejs + express应用生成器 快速创建应用

    1.node安装及环境配置(自行百度) 2.express安装及配置 (自行百度) 3.通过应用生成器工具 express 快速创建应用骨架   全局安装应用生成器 : npm install exp ...