HTML5简练入门种类

来源:http://www.smjxgs.com 作者:4887王中王鉄算盘奖结果 人气:89 发布时间:2019-08-12
摘要:从Wep page到Application,wepapplication 需要做一个选择,是Web app还是Native app,当然,还有第三种,Hybrid app。 现在手机用户越来越多,电脑终端浏览器也在不断的更新换代,推陈出新,网页

从Wep page到Application,wepapplication

需要做一个选择,是Web app还是Native app,当然,还有第三种,Hybrid app。

现在手机用户越来越多,电脑终端浏览器也在不断的更新换代,推陈出新,网页已经不仅仅是用来分享信息这么简单,可以用来做更多的事情。

需要做一个选择,是Web app还是Native app,当然,还有第三种,Hybrid app。

前言

本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存。

本地存储升级

在以前,浏览器几乎不具备太多的存储能力。HTML5在存储方面做了重大的改进,提供了localStorage和sessionStorage对象用于小型数据的存储,更提供了WebDatabase以存储大量数据。

现在手机用户越来越多,电脑终端浏览器也在不断的更新换代,推陈出新,网页已经不仅仅是用来分享信息这么简单,可以用来做更多的事情。

客户端存储数据介绍

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

以前的客户端存储数据都是由cookie完成的,它存在问题是:Cookie的大小是受限的,并且每次请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽;另外cookie还需要指定作用域,不可以跨域调用。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

cookie与cookie的局限

Http本身是一种无状态无链接的协议,用户在浏览器上请求一个动作时,服务器不会知道用户上一个动作做了什么,因此,如果要存储诸如登录与否、已登录文本等状态信息是非常麻烦的。cookie的发明则满足了大部分的状态存储的需求。从根本上讲,cookie就是一段存储在客户端(浏览器)的文本,我们既可以在服务器响应返回时设置cookie,也可以在前端通过javascript进行修改。cookie有域限制,不同域的cookie相互不影响,也不能互相访问。

可以在谷歌浏览器的控制台输入document.cookie来查看当前网页所有可用的cookie,也可以通过这样的方式document.cookie="uid=123"来设置cookie,这条语句不会覆盖之前的cookie,只是自动添加到原先cookie的后面,不同的键值对用";"分隔。除了域的限制以外,还有一个大小和数量的限制对于我们数据存储来说,影响很大。不同的浏览器采用了不同的限制策略,但都不会很多。

本地存储升级

在以前,浏览器几乎不具备太多的存储能力。HTML5在存储方面做了重大的改进,提供了localStorage和sessionStorage对象用于小型数据的存储,更提供了WebDatabase以存储大量数据。

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);   }

来自HTML5的Web Storage

相比较于cookie而言,HTML5规范中的WebStorage更适合用作本地数据存储。Web Storage的使用非常方便,速度更快也更安全,只会存储在浏览器中而不会随HTTP请求发送到服务器端。它可以轻松存储大量数据而丝毫不会影响你网站的性能。

cookie与cookie的局限

Http本身是一种无状态无链接的协议,用户在浏览器上请求一个动作时,服务器不会知道用户上一个动作做了什么,因此,如果要存储诸如登录与否、已登录文本等状态信息是非常麻烦的。cookie的发明则满足了大部分的状态存储的需求。从根本上讲,cookie就是一段存储在客户端(浏览器)的文本,我们既可以在服务器响应返回时设置cookie,也可以在前端通过javascript进行修改。cookie有域限制,不同域的cookie相互不影响,也不能互相访问。

可以在谷歌浏览器的控制台输入document.cookie来查看当前网页所有可用的cookie,也可以通过这样的方式document.cookie="uid=123"来设置cookie,这条语句不会覆盖之前的cookie,只是自动添加到原先cookie的后面,不同的键值对用";"分隔。除了域的限制以外,还有一个大小和数量的限制对于我们数据存储来说,影响很大。不同的浏览器采用了不同的限制策略,但都不会很多。

示例

图片 1图片 2

<!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>

View Code

该示例使用localStorage,实现页面浏览次数计数的功能,没刷新一次页面即可完成一次计数,关闭标签页或浏览器之后重新打开,仍然可以连续计数(只限当前机器,和asp.net的application对象是不同的,一个是客户端存储,一个服务端存储)。该示例若将localStorage替换成sessionStorage则可以统计某一个用户在当前回话中访问(刷新)页面的次数(同源页面是可以共享sessionStorage的)。

Web Storage使用

浏览器内置了两个已经实例化好了的对象,一个是sessionStorage,另一个是localStorage。

其中sessionStorage中存储的数据只是在单页面会话期间有效,sessionStorage更类似于一个页面上的全局变量。而localStorage的数据则会被持久化到客户端,而且永远不会过期(cookie可以设置过期时间),并且其容量也不会像cookie那样受限。

无论是sessionStorage还是localStorage,都可以使用下述这些方法或属性:

setItem(key,value)    getItem(key)    removeItem(key)    length    key(n)    clear()

这两者的区别是存储数据的生命周期不一样,只要一直在这个域内连续访问,存储在sessionStorage的数据会一直存在,一旦关闭页面或浏览器,所有sessionStorage存储的数据都会消失(也就是说,sessionStorage不会将数据存入磁盘)。

来自HTML5的Web Storage

相比较于cookie而言,HTML5规范中的WebStorage更适合用作本地数据存储。Web Storage的使用非常方便,速度更快也更安全,只会存储在浏览器中而不会随HTTP请求发送到服务器端。它可以轻松存储大量数据而丝毫不会影响你网站的性能。

HTML 5 应用程序缓存介绍

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

storage事件

对Storage对象进行的所有修改都会触发文档上的storage事件。其中事件对象会有以下属性:

domain        key     oldValue    newValue

例如:

document.addEventListener("storage", function(e) {console.log("Storage changed. Name '" e.Key "'"); });

由于这个事件有兼容性问题,一般不建议使用。

当然,并不是说localStorage大小可以无限使用,对于不同的浏览器,有不一样的设定,但大体上会给每个域设有5MB的存储空间,这对于大多数应用来说,已经足够了。

Web Storage使用

浏览器内置了两个已经实例化好了的对象,一个是sessionStorage,另一个是localStorage。

其中sessionStorage中存储的数据只是在单页面会话期间有效,sessionStorage更类似于一个页面上的全局变量。而localStorage的数据则会被持久化到客户端,而且永远不会过期(cookie可以设置过期时间),并且其容量也不会像cookie那样受限。

无论是sessionStorage还是localStorage,都可以使用下述这些方法或属性:

setItem(key,value)    getItem(key)    removeItem(key)    length    key(n)    clear()

这两者的区别是存储数据的生命周期不一样,只要一直在这个域内连续访问,存储在sessionStorage的数据会一直存在,一旦关闭页面或浏览器,所有sessionStorage存储的数据都会消失(也就是说,sessionStorage不会将数据存入磁盘)。

 使用应用程序缓存

1、如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性

2、manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

3、创建manifest文件(如manifestDemo.appcache),manifest 文件的建议的文件扩展名是:".appcache"。

缓存和应用缓存

HTML5提供了一种独特的缓存机制:Application Cache(应用缓存)

顾名思义,这是为应用程序而生的缓存机制。主要是可以将服务器端的资源文件缓存至本地,至少有以下三个有点:

加速应用启动速度---省却了下载文件的时间

离线访问--利用离线缓存下来的页面和文件资源继续未完成的工作

节省服务器资源--更少的请求,意味着更小的服务器压力。

storage事件

对Storage对象进行的所有修改都会触发文档上的storage事件。其中事件对象会有以下属性:

domain        key     oldValue    newValue

例如:

document.addEventListener("storage", function(e) {console.log("Storage changed. Name '" e.Key "'"); });

由于这个事件有兼容性问题,一般不建议使用。

当然,并不是说localStorage大小可以无限使用,对于不同的浏览器,有不一样的设定,但大体上会给每个域设有5MB的存储空间,这对于大多数应用来说,已经足够了。

 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 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

应用缓存的基本使用

一般而言,针对单页应用启用。

缓存和应用缓存

HTML5提供了一种独特的缓存机制:Application Cache(应用缓存)

顾名思义,这是为应用程序而生的缓存机制。主要是可以将服务器端的资源文件缓存至本地,至少有以下三个有点:

加速应用启动速度---省却了下载文件的时间

离线访问--利用离线缓存下来的页面和文件资源继续未完成的工作

节省服务器资源--更少的请求,意味着更小的服务器压力。

更新缓存

一旦应用被缓存,它就会保持缓存直到发生下列情况:

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

LZ在查看这节内容时,搜索到其他很多manifest的相关内容和存在问题,将连接放在这里供园友查看。

慎用manifest

HTML5离线篇

manifest

在文档中开启应用缓存非常简单,只需要在HTML标签中添加一个manifest属性,并指定manifest文件即可。

<!DOCTYPE html>

<html manifest="/appcache.manifest">

//这个html文件本身一定会被缓存

</html>

而appcache.manifest其实就是一个文本文件,里面指定了需要浏览器缓存的资源,比如像下面这个样子:

CACHE MANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

浏览器首次加载页面时会读取该文件,并下载和缓存它指定的资源,上面例子中缓存了四个文件,由于缓存是一次性的,因此如果四个文件有任何一个文件不可用,整个缓存行为将失败。除了文件中指定的四个需要缓存的文件以外,指定manifest文件的html文档也会被缓存下来。

要注意服务器在返回此文件时必须设置MIME类型为text/cache-manifest,不同服务器指定MIME类型的方式不同,基于NodeJS的Web服务器Express中设置MIME的方式如下:

res.type('text/cache-manifest')

res.sendfile(appcache.manifest文件路径)

manifest文件还可以指定一些特别的缓存行为,下面是一个完整格式的示例

CACHE MNIFEST

#指定会被缓存的资源

/favicon.ico

images/logo.png

stylesheetes/style.css

javascripts/app.js

#必须在有网络时访问的资源

NETWORK:

/api

#降级访问

FALLBACK:

#根目录如果不可用,则读取offline.html文件

/    /offline.html

#所有images/目录下的文件不可用时被请求,则读取images/offline.jpg

images/    images/offline.png

任何一个manifest文件都可以包含CACHE NETWORK 和FALLBACK三个不同的部分,它们分别表示如下:

CACHE:一定会被缓存的资源,浏览器首次加载页面时便下载其后的所有文件。

NETWORK:这些文件属于白名单资源,无论是否处于离线状态,这些资源的访问都会绕过缓存,资源的URL可以使用通配符。

FALLBACK:对于不可访问资源使用后备资源进行访问,两种资源以空格隔开,第一部分表示资源可用时的路径,第二部分表示后备资源缓存路径。资源的URL可以使用通配符。

以上三个部分可以按照任意顺序和数量进行组合。

应用缓存的基本使用

一般而言,针对单页应用启用。

 小结

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

 


缓存更新

著名程序员Phil Karlton曾说过:"在计算机科学领域,有两大难题,如何让缓存失效(cache invalidation)和如何给各种东西命名"

有三种方式进行缓存失效:

修改manifest文件:修改被缓存的文件本身并不会自动更新缓存,但是更改manifest文件本身则会重新下载整个缓存列表。

通过API接口以编程方式进行缓存控制。

用户主动在浏览器中清除缓存数据—对于开发者来说意义不大,最多是在调试的时候根据需要清除缓存来测试程序

由于manifest文件支持注释,而注释的更改也可以使manifest文件变化从而导致更新缓存,我们可以利用这一特点来实现自动更新缓存。使用程序生成一串随机值创建一行注释写入到manifest文件中,这个随机值可以是版本号、文本哈希值和时间戳等。

下面给出的是一个基于NodeJS的简单的版本生成器:

var fs = require('fs'),

mfPath = './public/appcache.manifest',

mfOutputPath = './public/output.manifest'

function gernerateVersionHash() {

//使用当前时间生成一段随机版本号

return ( new Date()).toString(32)

}

fs.readFile(mfPath, function(err, data) {

if(err) throw err;

var output = '# version=' generateVersionHash() 'n' data;

fs.writeFile(mfOutputPath, output, function(err) {

if(err) throw err;

console.log('生成文件成功!路径:' mfOutputPath)

}); })

配置好路径后,每次在更新了应用程序时,只需要运行这个脚本即可更新缓存。当然也可以监视你要保存的资源文件是否被修改来自动生成新版本的manifest文件以实现更新缓存。

manifest

在文档中开启应用缓存非常简单,只需要在HTML标签中添加一个manifest属性,并指定manifest文件即可。

<!DOCTYPE html>

<html manifest="/appcache.manifest">

//这个html文件本身一定会被缓存

</html>

而appcache.manifest其实就是一个文本文件,里面指定了需要浏览器缓存的资源,比如像下面这个样子:

CACHE MANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

浏览器首次加载页面时会读取该文件,并下载和缓存它指定的资源,上面例子中缓存了四个文件,由于缓存是一次性的,因此如果四个文件有任何一个文件不可用,整个缓存行为将失败。除了文件中指定的四个需要缓存的文件以外,指定manifest文件的html文档也会被缓存下来。

要注意服务器在返回此文件时必须设置MIME类型为text/cache-manifest,不同服务器指定MIME类型的方式不同,基于NodeJS的Web服务器Express中设置MIME的方式如下:

res.type('text/cache-manifest')

res.sendfile(appcache.manifest文件路径)

manifest文件还可以指定一些特别的缓存行为,下面是一个完整格式的示例

CACHE MNIFEST

#指定会被缓存的资源

/favicon.ico

images/logo.png

stylesheetes/style.css

javascripts/app.js

#必须在有网络时访问的资源

NETWORK:

/api

http://api.weibo.com

#降级访问

FALLBACK:

#根目录如果不可用,则读取offline.html文件

/    /offline.html

#所有images/目录下的文件不可用时被请求,则读取images/offline.jpg

images/    images/offline.png

任何一个manifest文件都可以包含CACHE NETWORK 和FALLBACK三个不同的部分,它们分别表示如下:

CACHE:一定会被缓存的资源,浏览器首次加载页面时便下载其后的所有文件。

NETWORK:这些文件属于白名单资源,无论是否处于离线状态,这些资源的访问都会绕过缓存,资源的URL可以使用通配符。

FALLBACK:对于不可访问资源使用后备资源进行访问,两种资源以空格隔开,第一部分表示资源可用时的路径,第二部分表示后备资源缓存路径。资源的URL可以使用通配符。

以上三个部分可以按照任意顺序和数量进行组合。

编程接口

更新缓存更好的方式是通过javascript访问离线缓存接口。window.applicationCache对象定义了应用缓存的编程接口。比如我们要更新缓存,可以调用applicationCache.update()方法时,浏览器将先重新获取manifest文件,如果manifest文件有变化,那么就尝试更新用户的缓存。不过此时只是将需要缓存的文件下载下来,当下载完毕,调用applicationCache.swapCache()即可,applicationCache.status属性查询缓存的当前状态。

Application cache的使用不算困难,但是在使用时一定要注意下面这两个问题:

访问页面时,查询参数将会不起作用。如访问index.html?page=1这个url,第一次加载时后端服务器可以取到page=1这个参数,可是当index.html被缓存后,无论如何调正查询参数都是不会向服务器发起请求的,需要注意这一点,如果需要在url中传递参数,可以使用hash,并用javascript处理hash内容。

manifest本身也有可能被缓存,设置过期header是个解决办法。

以上内容来自《HTML5 移动Web开发实战详解》 林珑编著。

page到Application,wepapplication 需要做一个选择,是Web app还是Native app,当然,还有第三种,Hybrid app。 现在手机用户越来越多,电脑终端...

缓存更新

著名程序员Phil Karlton曾说过:"在计算机科学领域,有两大难题,如何让缓存失效(cache invalidation)和如何给各种东西命名"

有三种方式进行缓存失效:

修改manifest文件:修改被缓存的文件本身并不会自动更新缓存,但是更改manifest文件本身则会重新下载整个缓存列表。

通过API接口以编程方式进行缓存控制。

用户主动在浏览器中清除缓存数据—对于开发者来说意义不大,最多是在调试的时候根据需要清除缓存来测试程序

由于manifest文件支持注释,而注释的更改也可以使manifest文件变化从而导致更新缓存,我们可以利用这一特点来实现自动更新缓存。使用程序生成一串随机值创建一行注释写入到manifest文件中,这个随机值可以是版本号、文本哈希值和时间戳等。

下面给出的是一个基于NodeJS的简单的版本生成器:

var fs = require('fs'),

mfPath = './public/appcache.manifest',

mfOutputPath = './public/output.manifest'

function gernerateVersionHash() {

//使用当前时间生成一段随机版本号

return ( new Date()).toString(32)

}

fs.readFile(mfPath, function(err, data) {

if(err) throw err;

var output = '# version=' generateVersionHash() 'n' data;

fs.writeFile(mfOutputPath, output, function(err) {

if(err) throw err;

console.log('生成文件成功!路径:' mfOutputPath)

}); })

配置好路径后,每次在更新了应用程序时,只需要运行这个脚本即可更新缓存。当然也可以监视你要保存的资源文件是否被修改来自动生成新版本的manifest文件以实现更新缓存。

编程接口

更新缓存更好的方式是通过javascript访问离线缓存接口。window.applicationCache对象定义了应用缓存的编程接口。比如我们要更新缓存,可以调用applicationCache.update()方法时,浏览器将先重新获取manifest文件,如果manifest文件有变化,那么就尝试更新用户的缓存。不过此时只是将需要缓存的文件下载下来,当下载完毕,调用applicationCache.swapCache()即可,applicationCache.status属性查询缓存的当前状态。

Application cache的使用不算困难,但是在使用时一定要注意下面这两个问题:

访问页面时,查询参数将会不起作用。如访问index.html?page=1这个url,第一次加载时后端服务器可以取到page=1这个参数,可是当index.html被缓存后,无论如何调正查询参数都是不会向服务器发起请求的,需要注意这一点,如果需要在url中传递参数,可以使用hash,并用javascript处理hash内容。

manifest本身也有可能被缓存,设置过期header是个解决办法。

以上内容来自《HTML5 移动Web开发实战详解》 林珑编著。

本文由4887王中王鉄算盘奖结果发布于4887王中王鉄算盘奖结果,转载请注明出处:HTML5简练入门种类

关键词:

最火资讯