客戶端存儲

時間 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文件再次被更改