天天看點
傳回

緩存

1、Cookie

JavaScript是運作在用戶端的腳本，是以一般是不能夠設定Session的，因為Session是運作在伺服器端的。而cookie是運作在用戶端的，是以可以用JS來設定cookie。

cookie的結構：簡單地說，cookie是以鍵值對的形式儲存的，即key=value的格式。各個cookie之間一般是以“;”分隔。

cookie是浏覽器提供的一種機制，它将document 對象的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而并不是JavaScript本身的性質。cookie是存于使用者硬碟的一個檔案，這個檔案通常對應于一個域名，當浏覽器再次通路這個域名時，便使這個cookie可用。是以，cookie可以跨越一個域名下的多個網頁，但不能跨越多個域名使用。 

cookie機制将資訊存儲于使用者硬碟，是以可以作為全局變量，這是它最大的一個優點。它可以用于以下幾種場合。 

（1）儲存使用者登入狀态。（2）跟蹤使用者行為。（3）定制頁面。（4）建立購物車，例如淘寶網就使用cookie記錄了使用者曾經浏覽過的商品，友善随時進行比較。 

cookie能完成的部分應用，還有更多的功能需要全局變量。cookie的缺點主要集中于安全性和隐私保護。主要包括以下幾種： 

（1）cookie可能被禁用。當使用者非常注重個人隐私保護時，他很可能禁用浏覽器的cookie功能； 

（2）cookie是與浏覽器相關的。這意味着即使通路的是同一個頁面，不同浏覽器之間所儲存的cookie也是不能互相通路的； 

（3）cookie可能被删除。因為每個cookie都是硬碟上的一個檔案，是以很有可能被使用者删除； 

（4）cookie安全性不夠高。所有的cookie都是以純文字的形式記錄于檔案中，是以如果要儲存使用者名密碼等資訊時，最好事先經過加密處理。 

JS設定cookie:

假設在A頁面中要儲存變量username的值("jack")到cookie中,key值為name，則相應的JS代碼為：

document.cookie = ‘name = ’+ username;

緩存

JS讀取cookie:

假設cookie中存儲的内容為：name=jack;password=123

則在B頁面中擷取變量username的值的JS代碼如下：

var username=document.cookie.split(";")[0].split("=")[1];

//JS操作cookies方法!

//寫cookies

function setCookie(name,value)

{

var Days = 30;

var exp = new Date();

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

讀取cookies

function getCookie(name)

{

var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

if(arr=document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}



删除cookies

function delCookie(name)

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval=getCookie(name);

if(cval!=null)

document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}
緩存

完整代碼

緩存
//如果需要設定自定義過期時間,那麼把上面的setCookie　函數換成下面兩個函數就ok;

function setCookie(name, value, time) {

    var strsec = getsec(time);

    var exp = new Date();

    exp.setTime(exp.getTime() + strsec * 1);

    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}



function getCookie(name) {

    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

    if (arr = document.cookie.match(reg))

        return unescape(arr[2]);

    else

        return null;

}



function delCookie(name) {

    var exp = new Date();

    exp.setTime(exp.getTime() - 1);

    var cval = getCookie(name);

    if (cval != null)

        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}



function getsec(str) {

    alert(str);

    var str1 = str.substring(1, str.length) * 1;

    var str2 = str.substring(0, 1);

    if (str2 == "s") {

        return str1 * 1000;

    } else if (str2 == "h") {

        return str1 * 60 * 60 * 1000;

    } else if (str2 == "d") {

        return str1 * 24 * 60 * 60 * 1000;

    }

}

setCookie("name", "hayden");

alert(getCookie("name"));

//這是有設定過期時間的使用示例：

//s20是代表20秒

//h是指小時，如12小時則是：h12

//d是天數，30天則：d30

setCookie("name", "hayden", "s20");
緩存

2、localStorage

一、什麼是localstorage？

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般浏覽器支援的是5M大小，這個在不同的浏覽器中localStorage會有所不同。

二、localstorage的優勢與局限

localStorage的優勢

1、 localStorage拓展了cookie的4K限制

2、 localStorage會可以将第一次請求的資料直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的資料庫，相比于cookie可以節約帶寬，但是這個卻是隻有在高版本的浏覽器中才支援的

localStorage的局限

1、 浏覽器的大小不統一，并且在IE8以上的IE版本才支援localStorage這個屬性

2、 目前所有的浏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換

3、 localStorage在浏覽器的隐私模式下面是不可讀取的

4、 localStorage本質上是對字元串的讀取，如果存儲内容多的話會消耗記憶體空間，會導緻頁面變卡

5、 localStorage不能被爬蟲抓取到

localStorage與sessionStorage的唯一一點差別就是localStorage屬于永久性存儲，而sessionStorage屬于當會話結束的時候，sessionStorage中的鍵值對會被清空

三、localstorage的使用

這裡要特别聲明一下，如果是使用IE浏覽器的話，那麼就要UserData來作為存儲，這裡主要講解的是localStorage的内容，是以userData不做過多的解釋，而且以部落客個人的看法，也是沒有必要去學習UserData的使用來的，因為目前的IE6/IE7屬于淘汰的位置上，而且在如今的很多頁面開發都會涉及到HTML5\CSS3等新興的技術，是以在使用上面一般我們不會去對其進行相容

首先在使用localStorage的時候，我們需要判斷浏覽器是否支援localStorage這個屬性

緩存
if(！window.localStorage){

      alert("浏覽器支援localstorage");

      return false;

}else{

     //主邏輯業務

}

localStorage的寫入，localStorage的寫入有三種方法

if(！window.localStorage){

            alert("浏覽器支援localstorage");

            return false;

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.a=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

 }
緩存

這裡要特别說明一下localStorage的使用也是遵循同源政策的，是以不同的網站直接是不能共用相同的localStorage

注意：存儲進去的是int類型，但是列印出來卻是string類型，這個與localStorage本身的特點有關，localStorage隻支援string類型的存儲。

localStorage的讀取

緩存
if(!window.localStorage){

            alert("浏覽器支援localstorage");

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.a=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

            //第一種方法讀取

            var a=storage.a;

            console.log(a);

            //第二種方法讀取

            var b=storage["b"];

            console.log(b);

            //第三種方法讀取

            var c=storage.getItem("c");

            console.log(c);

        }
緩存

這裡面是三種對localStorage的讀取，其中官方推薦的是getItem\setItem這兩種方法對其進行存取，不要問我這個為什麼，因為這個我也不知道

我之前說過localStorage就是相當于一個前端的資料庫的東西，資料庫主要是增删查改這四個步驟，這裡的讀取和寫入就相當于增、查的這兩個步驟

下面我們就來說一說localStorage的删、改這兩個步驟

改這個步驟比較好了解，思路跟重新更改全局變量的值一樣，這裡我們就以一個為例來簡單的說明一下

緩存
if(!window.localStorage){

            alert("浏覽器支援localstorage");

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.b=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(storage.a);

            // console.log(typeof storage["a"]);

            // console.log(typeof storage["b"]);

            // console.log(typeof storage["c"]);

            /*分割線*/

            storage.a=4;

            console.log(storage.a);

        }
緩存

這個在控制台上面我們就可以看到已經a鍵已經被更改為4了

localStorage的删除

緩存
1、 将localStorage的所有内容清除

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            console.log(storage);

            storage.clear();

            console.log(storage);

2、 将localStorage中的某個鍵值對删除

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            console.log(storage);

            storage.removeItem("a");

            console.log(storage.a);
緩存

localStorage的鍵擷取

緩存
var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            for(var i=0;i<storage.length;i++){

                var key=storage.key(i);

                console.log(key);

            }
緩存

使用key()方法，向其中出入索引即可擷取對應的鍵。

四、localstorage的其他注意事項

一般我們會将JSON存入localStorage中，但是在localStorage會自動将localStorage轉換成為字元串形式

這個時候我們可以使用JSON.stringify()這個方法，來将JSON轉換成為JSON字元串

示例：

緩存
if(!window.localStorage){

            alert("浏覽器支援localstorage");

        }else{

            var storage=window.localStorage;

            var data={

                name:'xiecanyong',

                sex:'man',

                hobby:'program'

            };

            var d=JSON.stringify(data);

            storage.setItem("data",d);

            console.log(storage.data);

        }
緩存

讀取之後要将JSON字元串轉換成為JSON對象，使用JSON.parse()方法

緩存
var storage=window.localStorage;

            var data={

                name:'xiecanyong',

                sex:'man',

                hobby:'program'

            };

            var d=JSON.stringify(data);

            storage.setItem("data",d);

            //将JSON字元串轉換成為JSON對象輸出

            var json=storage.getItem("data");

            var jsonObj=JSON.parse(json);

            console.log(typeof jsonObj);
緩存

3、sessionStorage

sessionStorage用于本地存儲一個會話（session）中的資料，這些資料隻有在同一個會話中的頁面才能通路并且當會話結束後資料也随之銷毀。是以sessionStorage不是一種持久化的本地存儲，僅僅是會話級别的存儲。下面是其用法:

緩存
<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>SessionStorage</title>

    <script type="text/javascript">

    window.onload = function() {

        //首先獲得body中的3個input元素

        var msg = document.getElementById("msg"); //文本框要輸入的内容

        var getData = document.getElementById("getData"); //擷取資料

        var setData = document.getElementById("setData"); //儲存資料

        var removeData = document.getElementById("removeData"); //移除資料

        setData.onclick = function() //存入資料

            {

                if (msg.value) {

                    sessionStorage.setItem("data", msg.value); //把data對應的值儲存到sessionStorage

                    alert("資訊已儲存到data字段中");

                } else {

                    alert("資訊不能為空");

                }

            }

        getData.onclick = function() {

            //擷取資料

            var msg = sessionStorage.getItem("data");

            if (msg) {

                alert("data字段中的值為：" + msg); //把data對應的值彈出來

            } else {

                alert("data字段無值！");

            }

        }

        removeData.onclick = function() //移除資料

            {

                var msg = sessionStorage.getItem("data");

                sessionStorage.removeChild(msg);

            }

    }

    </script>

</head>



<body>

    <input id="msg" type="text" />

    <input id="setData" type="button" value="儲存資料" />

    <input id="getData" type="button" value="擷取資料" />

    <input id="removeData" type="button" value="移除資料" />

</body>

</html>
緩存

另外還有一點要注意的是，其他類型讀取出來也要進行轉換。

4、ApplicationCache

applicationCache是html5新增的一個離線​​應用​​功能

•離線浏覽: 使用者可以在離線狀态下浏覽​​網站​​内容。

•更快的速度: 因為資料被存儲在本地，是以速度會更快.

•減輕伺服器的負載: 浏覽器隻會下載下傳在伺服器上發生改變的資源。

在對應用進行緩存的時候需要一個manifest檔案，

cache manifest 格式如下

首行必須是CACHE MANIFEST

接下來可以分為三段： CACHE， NETWORK，與 FALLBACK

CACHE:這是緩存檔案中記錄所屬的預設段落。在 CACHE: 段落标題後(或直接跟在 CACHE MANIFEST 行後)列出的檔案會在它們第一次下載下傳完畢後緩存起來。NETWORK:在 NETWORK: 段落标題下列出的檔案是需要與伺服器連接配接的白名單資源。所有類似資源的請求都會繞過緩存，即使使用者處于離線狀态。可以使用通配符。FALLBACK:FALLBACK: 段指定了一個後備頁面，當資源無法通路時，浏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示後備頁面。兩個 URI 都必須使用相對路徑并且與清單檔案同源。可以使用通配符。

CACHE， NETWORK， 和 FALLBACK 段落可以以任意順序出現在緩存清單檔案中，并且每個段落可以在同一清單檔案中出現多次。

applicationcache/

├── static/

│   ├── css/

│   │ └── example.css

│   └── js/

│     └── example.js

└── index.jsp

#代碼如下

#example.css

#clock { font: 2em sans-serif; }

#example.js

window.onload = function(){

        　　window.onload = function(){

        　　　　setInterval(function(){

                　　　　　　document.getElementById('clock').innerHTML = new Date();

        　　　　},1000);

　　};

};

#index.jsp

<link type="text/css" href="static/css/example.css" rel="stylesheet"/>

<script src="static/js/example.js"></script>

<div id="clock"></div>

我們加html5新增的神器manifest檔案

檔案添加在static檔案夾下，檔案内容如下

#example.manifest

CACHE MANIFEST

./js/example.js

../index.jsp

NETWORK:

./css/exmaple.css

這時需要修改index.jsp檔案内容

<html> --> <html manifest="static/example.manifest">

檔案說明對js和jsp進行緩存，而css檔案則列入白名單不緩存，再次啟動服務。。。。

通路的時候你看到的頁面是沒任何變化的，跟第一次通路的頁面是一個鳥樣的，不過你按下F12就會看到浏覽器已經對的的檔案進行緩存了

在resources->application cache選項下可以看到浏覽器緩存的是什麼東東，也可以使用 chrome://appcache-internals/ 指令在Chrome浏覽器中進行檢視删除。

好了**奇迹的時刻到了，我再次把服務停了。。。。。。再次通路，竟然可以通路到，不會像第一次那樣提示挂了。

但是樣式沒了。。。那就是我們剛剛把樣式置為白名單了，沒有緩存下來

如果你的manifest檔案修改了，你可以手動或自動更新它

1.自動更新 

浏覽器除了在第一次通路 Web 應用時緩存資源外，隻會在 cache manifest 檔案本身發生變化時更新緩存。而 cache manifest 中的資源檔案發生變化并不會觸發更新。

2.手動更新 

開發者也可以使用 window.applicationCache 的接口更新緩存。方法是檢測 window.applicationCache.status 的值，如果是 UPDATEREADY，那麼可以調用 window.applicationCache.update() 更新緩存。示範代碼如下。

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

　　window.applicationCache.update();

}

applicationCache狀态值

UNCACHED(未緩存)　　一個特殊的值，用于表明一個應用緩存對象還沒有完全初始化。

IDLE(空閑)　　應用緩存此時未處于更新過程中。

CHECKING(檢查)　　清單已經擷取完畢并檢查更新。

DOWNLOADING(下載下傳中)　　下載下傳資源并準備加入到緩存中，這是由于清單變化引起的。

UPDATEREADY(更新就緒)　　一個新版本的應用緩存可以使用。有一個對應的事件 updateready，當下載下傳完畢一個更新，并且還未使用 swapCache() 方法激活更新時，該事件觸發，而不會是 cached 事件。

OBSOLETE(廢棄)　　應用緩存現在被廢棄。

也可以線上狀态檢測

1.navigator.onLine 

navigator.onLine 屬性表示目前是否線上。如果為 true, 表示線上；如果為 false, 表示離線。當網絡狀态發生變化時，navigator.onLine 的值也随之變化。開發者可以通過讀取它的值擷取網絡狀态。

2.online/offline 事件 

當開發離線應用時，通過 navigator.onLine 擷取網絡狀态通常是不夠的。開發者還需要在網絡狀态發生變化時立刻得到通知，是以 ​​HTML5​​ 還提供了 online/offline 事件。當線上 / 離線狀态切換時，online/offline 事件将觸發在 body 元素上，并且沿着 document.body、document 和 window 的順序冒泡。是以，開發者可以通過監聽它們的 online/offline 事件來獲悉網絡狀态。

緩存 字段 json 資料 css
上一篇: PHP緩存之檔案緩存
下一篇: beta版本沖刺第二天

繼續閱讀