前言

本篇介绍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的相关内容和存在问题,将连接放在这里供园友查看。

慎用manifest

HTML5离线篇

小结

关于HTML5客户端存储的知识相对要简要一些。缓存相关内容,LZ仅仅是在w3school上运行了一下范例,网上搜集了一些其他相关信息,因为缺乏离线环境,自己没有动手实践。好吧,写这么一点东西竟然用了两个半小时。。。今天就到这里吧。

HTML5简单入门系列(三)的更多相关文章

  1. HTML5简单入门系列(五)

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

  2. HTML5简单入门系列(六)

    前言 之前几篇已经将HTML5的主要新增元素和特性简单介绍完毕,LZ一直在犹豫还要不要把其他元素也写出来,因为其实没什么东西可以写,就是自己用到时看一下就行.不过为了入门系列的完整,犹豫再三,还是决定 ...

  3. HTML5简单入门系列(八)

    前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...

  4. HTML5简单入门系列(一)

    前言 随着HTML5的流行,LZ作为一个web开发者,也决定学习一下前端前沿技术. HTML5 是下一代的HTML,它将成为 HTML.XHTML 以及 HTML DOM 的新标准.它是W3C( Wo ...

  5. HTML5简单入门系列(九)

    前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光 ...

  6. HTML5简单入门系列(七)

    前言 本篇详细介绍canvas画布的API.说是详细介绍,也只是一些常用的API及简单实例和说明.LZ本人也还没有看完全部,下篇会介绍剩余的一些内容. 本篇的示例中,LZ加入了注释,为的是只简单介绍A ...

  7. HTML5简单入门系列(二)

    前言 上篇中写到HTML5中的画布(canvas)元素,查看了canvas其他的资料,发现这个元素相关内容太多,鉴于本系列只是基础(主要是LZ也是初学),不再做太多介绍,有机会的话再单独写相关内容.说 ...

  8. HTML5简单入门系列(四)

    前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线 ...

  9. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

随机推荐

  1. 03--理解HelloWorld结构

    作为程序猿还是要代码来说事的,现在开始进入到具体的代码中来.国际惯例HelloWorld打头阵,我也不能免这个俗. Win32入口函数中主要代码如下: main.cpp // 创建应用实例 AppDe ...

  2. CentOS和Ubuntu的区别

    CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释出的源代 ...

  3. Linux - Reset a MySQL root password

    Use the following steps to reset a MySQL root password by using the command line interface. Stop the ...

  4. (转)syslog日志等级

    设施.优先级”(facility.priority)设施(facility): kern 0 内核日志消息 user 1 随机的用户日志消息 mail 2 邮件系统日志消息 daemon 3 系统守护 ...

  5. Codeforces 229D Towers

    http://codeforces.com/problemset/problem/229/D 题意:有n(1<=n<=5,000)座塔排在一条直线上,从左到右每个塔的高度分别为hi(1&l ...

  6. 《Programming WPF》翻译 第6章 5.我们进行到哪里了?

    原文:<Programming WPF>翻译 第6章 5.我们进行到哪里了? WPF提供了资源工具,让我们运用在用户界面中,动态并具有一致性.我们可以在资源字典中存储任意资源,并且可以遍及 ...

  7. PowerShell_零基础自学课程_2_Powershell与Cmd以及Unix/Linux Shell

    上篇文章我说道,windows为了改变用户对其console界面的诟病,于是就从windows   vista开始,计划要改变这种局面,于是就有 了Powershell的出现. 1.兼容shell命令 ...

  8. Doxygen安装使用

    Doxygen是一个 C++.C.Java.Objective-C.Python.IDL(CORBA和Microsoft flavors).Fortran.VHDL.PHP.C#和D语言的文檔生成器. ...

  9. Duff策略

    Tom Duff首先在C语言中提出了展开循环的构想,所以这种模式被称之为Duff策略.Duff策略背后的思想是每一次循环完成标准循环的1-8次.首先通过数组值得总数除以8来取定循环次数.Duff发现对 ...

  10. SPRING源码分析:IOC容器

    在Spring中,最基本的IOC容器接口是BeanFactory - 这个接口为具体的IOC容器的实现作了最基本的功能规定 - 不管怎么着,作为IOC容器,这些接口你必须要满足应用程序的最基本要求: ...