客户端存储

时间 2019-11-18

标签客户端存储繁體版

原文原文链接

JavaScript第20章客户端存储：http://www.cnblogs.com/ahthw/p/4340930.html (localStorage和sessionStorage、cookie、IE userData)php

HTML5 localStorage本地存储笔记 html

在HTML5中本地存储属性是一个window属性，包括localStorage和sessionStoragehtml5

if(window.localStorage){web

alert("浏览器支持"); 浏览器

}else{缓存

alert("浏览器不支持");服务器

}cookie

HTML5操做使用localStorage:网络

1.三种设置本地存储的方法：session

localStorage.t1="php100";

localStorage["t2"] = "html5";

localStorage.setItem("t3","jQuery");

2.三种访问本地存储的方法

localStotage.t1;

localStorage["t2"];

localStorage.getItem("t3");

3.其余扩展

localStorage.removeItem(); //清除：eg: localStorage.removeItem("t2");

localStorage.clear(); //清除全部

localStorage.length; //得到多少键

localStorage.key(); //获取存储的键的内容 localStorage.getItem(localStorage.key(0));

移动Web的离线应用

1.离线与缓存

离线应用，就是在没有网络的状况下访问Web应用程序时，其实是访问已下载的离线文件资源，并使Web应用程序正常工做

离线应用与网页缓存都是为了更好地缓存各类文件以提升读取的速度，但二者对网络环境的要求有所区别：

1.网页缓存依赖于网络的存在，而离线应用在离线状态下任然可用

2.网页缓存主要缓存当前页面相关内容，也仅限于当前页面的读取。离线应用则主要缓存文件，只要设置缓存文件的页面，都能在离线状态下读取该文件。

离线设备的支持：

if(window.applicationCache){

//浏览器支持离线应用，在此编写离线应用功能

}

2.applicationCache 和 manifest

HTML5标准提供的离线应用，开发者通常须要注意如下3种特性：

1.离线资源缓存

开发者在开发Web应用程序的离线应用时，必须使用一种方案来讲明Web应用程序中的哪些文件资源须要在离线状态下工做。

当设备所在的浏览器处于在线状态时，被指定缓存的资源文件便会缓存到本地。此后，若用户在离线状态时再次访问该Web应用程序，浏览器便会自动加载本地资源文件，让用户可以正常使用该Web应用程序

离线应用程序将使用manifest类型的文件做为须要配置缓存资源文件的配置文件。

2.ApplicationCache 对象缓存状态

ApplicationCache对象记录着Web应用程序的缓存状态，开发者能够经过该缓存状态手动更新资源文件的缓存

3.在线状态的检测

HTML5标准提供了onLine方法用于检测当前网络是否在线。开发者能够根据方法判断出浏览器是否在线，以便可以处理各类业务。

3.manifest文件

离线应用包含一个manifest文件，此文件记录着哪些资源文件须要离线应用缓存，哪些资源须要经过网络访问等信息

        <!DOCTYPE html>
　　   <html manifest="cache.manifest">
    　　　　<head>
        　　　　<meta charset="utf-8">
        　　　　<title>判断设备是否能上网</title>
      　　</head>
    　　　　<body>
    　　　　</body>
　　 </html>

1.只须要在页面的HTML标签中增长manifest属性，并指定manifest文件，就能够实现支持HTML5离线应用。

2.因为manifest文件的MIME类型是text/cache-manifest,所以web服务器须要经过配置MIME类型，才能识别manifest文件。

例如在Tomcat服务器下，开发人员须要在Tomcat目录下的conf/web.xml文件中配置manifest类型。

在web.xml中mime-mapping类型处增长以下代码便可：

<mine-mapping>

<extension>manifest</extension>

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

</mine-mapping>

3.CACHE MANIFEST文件

该代码的做用是通知浏览器下面的内容是一个应用离线的清单文件。在清单文件内容中，共有三种类型的清单文件，如：

CACHE MANIFEST

#缓存文件

index.html

test.js

#不做缓存

NETWORK

/images/

FALLBACK

offline.html index.html

根据上述示例代码：

第一种类型的文件，其文件清单在CACHE MANIFEST 的后面，此部分文件被定义为须要缓存的文件。当网络不可用或不在线时，此部分文件便会经过本地缓存直接读取

第二种类型的文件清单则在定义NETWORK行下面，该文件清单被指定为不管文件是否已被缓存，都必须从网络中下载。

第三种类型的文件清单被指定为FALLBACK类型文件，该文件清单的前半部分表示当前没法获取到该文件的时候，则请求转发到后半部分的文件。

4.applicationCache对象和事件

applicationCache对象记录着本地缓存的各类状态及事件。缓存的状态能够经过window.applicationCache.status得到。其状态包括6种：

interface ApplicationCache : EventTarget{

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 attribute unsigned short status;

}

applicationCache缓存对象事件表

事件名称	说明
Cheching	当user agent 检查更新时，或第一次下载manifest清单时，它每每会是第一个被触发的事件
Noupdate	当检查到manifest中清单文件不须要更新时，触发该事件
downloading	第一次下载或更新manifest清单文件时，触发该事件
Progress	该事件与downloading相似，但downloading事件只触发一次。progress事件则在清单文件下载过程当中周期性触发
Cached	当manifest清单文件下载完毕及成功缓存后，触发该事件
updateready	此事件的含义表示缓存清单文件已经下载完毕，可经过从新加载页面读取缓存文件或经过方法swapCache()切换到新的缓存文件。经常使用于本地缓存更新版本后的提示
Obsolete	假如访问manifest缓存文件返回HTTP404错误(页面未找到)或410错误（永久消失）时，触发该事件
Error	若要达到触发该事件，须要知足如下几种状况之一：已经触发obselete事件 manifest文件没有改变，但缓存文件中存在文件下载失败获取manifest资源文件时发生致命错误当更新本地缓存时，manifest文件再次被更改

经过对上述每一个事件的简单描述，读者基本上了解了离线应用的事件。在实际应用中咱们能够经过事件监听，并根据当前applicationCache对象的状态处理相关业务。如：

applicationCache.addEventListener('updateready',function(){

//资源文件下载中，能够在此部分增长业务功能

});

咱们在使用applicationCache本地缓存的同时，每每须要判断当前浏览器的状态（在线或离线）。HTML5正好提供了一个属性，用于判断当前浏览器是否在线，代码：

window.navigator.onLine //onLine 属于只读属性，返回的是布尔值true或false

if(window.navigator.onLine){ //当前浏览器在线 }else{ //当前浏览器不在线 }