html5存储

html5除了新增标签，使得代码更具语议之外，更重要的就是存储了。

一.html5本地存储

数据都保存成key/value形式，一个web页面只可以访问自己的数据。

支持浏览器为IE8+，Firefox，Chrome，Opera和Safari 5都支持这个特性。

localStorage和sessionStorage

他们都是以key/value形式来存储数据。只是前者是永久保存（即浏览器重启后还会保原先的数据），后者是在关闭浏览器之后就消失。

首先得对浏览器是否支持做判断if(typeof(Storage)!=="undefined")

1 if (typeof(Storage)!=="undefined"){
2   localStorage.sitename="bty";
3   localStorage.lastvisit= new Date();
4   document.getElementById("result").innerHTML="欢迎访问: " + localStorage.sitename + " (" + localStorage.lastvisit + ")";
5 }else{
6   document.getElementById("result").innerHTML="对不起，你的浏览器不支持web storage...";
7 }

其次，数据是以键值存储，localStorage里设置个属性叫sitename，值为"bty"。

小例示范localStorage和sessionStorage的区别

1 <p onclick="clickCounter()">click me</p>
2 <p id="result"></p>

localStorage当关闭浏览器，再打开，clickcount从之前计算的数字开始。

 1 function clickCounter(){
 2  if(typeof(Storage)!=="undefined"){
 3 
 4    if (localStorage.clickcount){
 5      localStorage.clickcount=Number(localStorage.clickcount)+1;
 6    }else{
 7      localStorage.clickcount=1;
 8    }
 9    document.getElementById("result").innerHTML="你点击了按钮 " + localStorage.clickcount + " 次！";
10  }else {
11    document.getElementById("result").innerHTML="你的浏览器不支持web storage";
12  }
13 }

sessionStorage当关闭浏览器，再打开，clickcount从1开始。

 1 function clickCounter(){
 2 if(typeof(Storage)!=="undefined"){
 3   if (sessionStorage.clickcount){
 4     sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
 5   }else{
 6     sessionStorage.clickcount=1;
 7   }
 8   document.getElementById("result").innerHTML="你点击了按钮 " + sessionStorage.clickcount + " 次！";
 9 }else{
10   document.getElementById("result").innerHTML="你的浏览器不支持web storage";
11   }
12 }

参考文献：http://www.gbtags.com/gb/share/970.htm

二.离线存储

离线缓存是当没有网络时，用户还能访问该页面，包括图片js。

当然，在此之前，我们首先要确定浏览器的状态（在线 or 不在线）。

window.navigator.onLine   //该属性只读，返回的是 true 即在线的状态 或者 false 则离线状态.

离线存储的运行机制是每个需要离线使用的网页都指定一个后缀名为.manifest的文本文件。这个文本文件。这个文件罗列了谇网页离线使用时所需要的所有资源文件包括html，图片，js等。支持离线存储的会自动读取.manifest文件。下载文件中所罗列的文件，将其缓存在本地以务网络断开时使用。支持离线存储的浏览器为除ie外。

1，在需要被离线缓存的页面里写<html manifest="offline.manifest"> 命名随意，后缀用manifest，之后所有offline都只是命名。每一个要需要到离线存储的页面都要在html属性上添加这个文件。

2，

如果是Apache的服务器，需要在.htaccess文件。追加一句代码：

AddType text/cache-manifest .manifest  // 这句代码意思为。让manifest文件拥有正确的MIME类型，即text/cache-manifest

还可以加上如下代码。以下代码是为了阻止浏览器缓存.manifest缓存文件。
```
<Files offline.manifest>
    ExpiresActive on
    ExpiresDefault "access"
</Files>
```

如果在Tomcat服务器下，需要在Tomcat目录下的conf/web.xml文件中配置manifest类型

<mime-mapping>
    <extension>manifest</extension>
    <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

3，在.manifest里必须写的。

CACHE MANIFEST
#v1

CACHE :
hp.html
css/index.css
img/banner.jpg
img/bannerTop.jpg
img/logo.png

NETWORK:
*

FALLBACK:
//hp.html

.manifset文件必须以CACHE MANIFEST开头。

#v1表示其版本号　（用于修改页面内容时，.manifset缓存文件没有更新，则可能导致浏览器使用之前已有的缓存文件。修改.manifset文件则是通知浏览器更新它。一般缓存文件不会做大的修改，所有改个版本号是最好的。）

CACHE :则罗列了所有离线后要使用的的文件。路径是相对于该.manifest而言的。

NETWORK:则是罗列不需要被缓存的文件。即写在这里面的文件在网络畅通时都会跳过浏览器缓存。如果你想网站内容在网络畅通下及时更新。可以使用*。

FALLBACK:则表示当离线时会询问每一个访问的页面"是否有离线缓存?"，如果没有则使用这里的页面。

以上如果省略了CACHE 则是把用户访问的每一个页面都缓存下来，但是只缓存网页，图片js之类的不会被缓存着。

CACHE MANIFEST
#v2
FALLBACK:
//hp.html
NETWORK:
*

ApplicationCache对象缓存状态

该对象记录着web应用程序的缓存状态，可以通过该缓存状态手动更新资源文件的缓存。缓存状态可以通过window.applicationCache.status获得。它有6种状态

interface ApplicationCache : EventTrget{
    const unsigned short UNCACHED = 0;     　　 //未缓存
    const unsigned short IDLE = 1;      　　　　// 空闲状态
    const unsigned short CHECKING = 2; 　　　　 //检查中
    const unsigned short DOWNLOADING = 3; 　　 //下载中
    const unsigned short UPDATEREADY  = 4; 　　//更新准备中
    const unsigned short OBSOLETE = 5;  　　　　//过期状态
    readonly attrbute unsigned short  status; 
}

applicationCache对象事件分为8个事件。

checking       当user agent检查更新时，或第一次下载manifest清单时，它往往会是第一个被触发的事件
noupdate       当检查到manifest中清单文件不需要更新时，触发该事件
downloading    第一次下载或更新manifest清单文件时，触发该事件
progress       该事件与downloading类似，但downloading事件只触发一次，progress事件则在清单文件下载过程中周期性触发
cached         当manifest清单文件下载完毕及成功缓存后，触发该事件
upadateready   此事件的含义表示缓存清单文件已经下载完毕，可通过重新加载页面读取缓存文件或通过方法swapCache()切换到新的缓存文件，常用于本地缓存更新版本后的提示。
obsolete       假如访问manifest缓存文件返回404错误，或者401(永久消失)。时触发该事件
error          要触发些事件，需以下条件之一：
                 1.已经触发obsolete事件
                 2.manifest文件没有改变，但缓存文件中存在文件下载失败
                 3.获取manifest资源文件时发生致命错误
                 4.当更新本地缓存时，manifest文件再次被更改

相关推荐