HTML5简单入门系列(三)
前言
本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存。
客户端存储数据介绍
HTML5 提供了两种在客户端存储数据的新方法:
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
以前的客户端存储数据都是由cookie完成的,它存在问题是:Cookie的大小是受限的,并且每次请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽;另外cookie还需要指定作用域,不可以跨域调用。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。
Web Storage存储和访问
localStorage 和 sessionStorage 拥有一样的存取接口,下边已sessionStorage为例说明
接口
sessionStorage.getItem(key) ---- 获取指定key的本地存储的值
sessionStorage.setItem(key,value) ---- 将value存储到key字段中
sessionStorage.removeItem(key) ---- 删除指定ke的本地存储的值
sessionStorage.length ---- sessionStorage的项目数
sessionStorage.clear() ---- 清空sessionStorage的项目
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
示例
<!DOCTYPE HTML>
<html>
<body> <script type="text/javascript"> if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s)."); </script> <p>刷新页面会看到计数器在增长。</p> <p>请关闭浏览器窗口,然后再试一次,计数器会继续计数。</p> </body>
</html>
该示例使用localStorage,实现页面浏览次数计数的功能,没刷新一次页面即可完成一次计数,关闭标签页或浏览器之后重新打开,仍然可以连续计数(只限当前机器,和asp.net的application对象是不同的,一个是客户端存储,一个服务端存储)。该示例若将localStorage替换成sessionStorage则可以统计某一个用户在当前回话中访问(刷新)页面的次数(同源页面是可以共享sessionStorage的)。
HTML 5 应用程序缓存介绍
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
使用应用程序缓存
1、如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性
2、manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
3、创建manifest文件(如manifestDemo.appcache),manifest 文件的建议的文件扩展名是:".appcache"。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。对于浏览器来说,manifest的加载是要晚于其他资源的,这就导致check manifest的过程是滞后的,发现manifest改变,所有浏览器的实现都是紧随着做静默更新资源,以保证下次浏览时应用到更新。另外引入manifest的页面,即使没有被列入缓存清单中,仍然会被用户代理缓存。
CACHE MANIFEST
# VERSION 0.3 # 直接缓存的文件
CACHE:
/theme.css
/logo.gif
/main.js
# 在线链接的文件
NETWORK:
login.asp
# 替代方案
FALLBACK:
/html5/ /404.html
manifest 文件可分为三个部分:
- CACHE - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
manifest文件中第一行 CACHE MANIFEST是必须的。
CACHE 下定义的资源在网络断开的情况下仍然可用。资源列表必须是一行对应一个资源。
而NETWORK下定义的则需要联网访问。在定义了CACHE之后,可以使用'*'号定义NETWORK,即排除显式定义的缓存列表外其他资源都不缓存。
FALLBACK则是一种替代方案,前边的路径(文件夹或者路径)访问失败时使用后边的替补页展示。
重要的提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改(参阅下面的提示)
- 由程序来更新应用缓存
LZ在查看这节内容时,搜索到其他很多manifest的相关内容和存在问题,将连接放在这里供园友查看。
小结
关于HTML5客户端存储的知识相对要简要一些。缓存相关内容,LZ仅仅是在w3school上运行了一下范例,网上搜集了一些其他相关信息,因为缺乏离线环境,自己没有动手实践。好吧,写这么一点东西竟然用了两个半小时。。。今天就到这里吧。
HTML5简单入门系列(三)的更多相关文章
- HTML5简单入门系列(五)
前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...
- HTML5简单入门系列(六)
前言 之前几篇已经将HTML5的主要新增元素和特性简单介绍完毕,LZ一直在犹豫还要不要把其他元素也写出来,因为其实没什么东西可以写,就是自己用到时看一下就行.不过为了入门系列的完整,犹豫再三,还是决定 ...
- HTML5简单入门系列(八)
前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...
- HTML5简单入门系列(一)
前言 随着HTML5的流行,LZ作为一个web开发者,也决定学习一下前端前沿技术. HTML5 是下一代的HTML,它将成为 HTML.XHTML 以及 HTML DOM 的新标准.它是W3C( Wo ...
- HTML5简单入门系列(九)
前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光 ...
- HTML5简单入门系列(七)
前言 本篇详细介绍canvas画布的API.说是详细介绍,也只是一些常用的API及简单实例和说明.LZ本人也还没有看完全部,下篇会介绍剩余的一些内容. 本篇的示例中,LZ加入了注释,为的是只简单介绍A ...
- HTML5简单入门系列(二)
前言 上篇中写到HTML5中的画布(canvas)元素,查看了canvas其他的资料,发现这个元素相关内容太多,鉴于本系列只是基础(主要是LZ也是初学),不再做太多介绍,有机会的话再单独写相关内容.说 ...
- HTML5简单入门系列(四)
前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线 ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
随机推荐
- pyopenssl
https://pyopenssl.readthedocs.org/en/stable/ pyopenssl是一个封装了openssl的python模块. 使用它可以方便地进行一些加解密操作. 1.产 ...
- Scala学习笔记--提取器unapply
提取器就是一个带有unapply方法的对象.你可以把unapply方法当做是伴生对象中apply方法的反向操作. apply方法接收构造参数,然后将他们变成对象. 而unapply方法接受一个对象,然 ...
- LeetCode_Subsets
Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...
- Keil C51 详细设置
一.target名更改 打开Keil后,左侧Project Workspace中的target可改,方法:右击Target——Manage Compnents——双击待修改项即可,若要添加,使用对话框 ...
- 软硬结合的可穿戴式app
可穿戴设备已经非常的火热了,各种手环.手表之类的硬件设备已经层出不穷,并且功能也已经越发强大,从简单的运动.心率追踪,到现在的血糖.心电图监测,“量化自我”的愿景似乎已经变得越来越明朗,但也正是在这样 ...
- Poj2946-The Warehouse(bfs+哈希)
题目我就不粘贴了... 题意:给出地图,最大8*8,出口用'E'表示,空地用'.'表示,数字表示此处有多少个箱子,主人公的起点应该是在有箱子的地方,他可以朝四个方向移动,但是只有两种方式 一种是他移动 ...
- QQ聊天界面的布局和设计(IOS篇)-第二季
QQChat Layout - 第二季 本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了.有些细节可能会一带而过, 如有疑问, 相互交流进步~. 在第一季中我们完成了Q ...
- UVa156.Ananagrams
题目连接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- javascript的事件处理
首先了解一下什么是事件?事件是web浏览器通知应用程序发生了什么事情.我们可以通过一些方式注册事件用来监听一些我们需要处理的事件.事件包含一下一些属性: 事件类型:用来说明是什么类型事 ...
- 从java8 说起函数式编程
写在前面 为什么要用函数式编程.看例子: final List<BigDecimal> prices = Arrays.asList( new BigDecimal("10&qu ...