H5中的localStorage筆記

時間 2019-11-12

標籤 h5 localstorage 筆記简体版

原文原文鏈接

先來介紹一下localStorage和cookie的區別：javascript

（1）localStorage的存儲容量比cookie更大；html

（2）cookie做爲http規範的一部分，它的主要做用是與服務器進行交互，使http保持鏈接狀態。也就是你每次請求一個新的頁面的時候，cookie都會被髮送過去，這樣無形中就浪費了寬帶。html5

（3)cookie保存是能指定能夠訪問該cookie的範圍；localStorage的訪問範圍就是當前整個網站，不存在訪問範圍這個概念。且，二者都不支持跨域調用。java

html5中的Web Storage包括了兩種存儲方式： sessionStorage和localStorage；chrome

sessionStorage用於本地存儲一個會話的數據，當會話結束時，存儲的數據也會自動銷燬（即當頁面關閉的同時也銷燬數據），所以，sessionStorage不是一個持久化的本地存儲，僅僅是會話級別的存儲。跨域

localStorage用於持久化的本地存儲，除非手動刪除數據，不然會一直保存。瀏覽器

下面是一個h5中localStorage的一個小應用：服務器

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<p>you have viewed this page <span id="count"></span> thimes(s).</p>
<p><input type="button" value="changeStorage" onClick="changeS()"></input></p>
<script type="text/javascript">
    var storage = window.localStorage;
    if(!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
    storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) +1;
    document.getElementById("count").innerHTML = storage.pageLoadCount;
    showStorage();
 // storage事件，在存儲事件的處理函數中是不能取消這個存儲動做的，存儲事件只是瀏覽器在localStorage數據變化發
 //生後給你的一個通知
    
    if(window.addEventListener) {     // 爲了兼容瀏覽器或者本身寫兼容處理函數，或者乾脆不用storage事件
        window.addEventListener("storage", handle_storage, false); // 而是調用一個handle_storage()函數來
    }else if(window.attachEvent) {                                 // 遞歸顯示object
        window.attachEvent("onstorage",handle_storage);
    }

    function handle_storage(e) {   //
        if(!e) {
            e=window.event;
        }
        showObject(e);
    }                 

    function showObject(obj) { //遞歸顯示object
        if(!obj){return;}
        for(var i in obj) {
            if(typeof(obj[i])!="object" || obj[i] == null) {
                document.write(i + ":" + obj[i] + "<br/>");
            }else {
                document.write(i + ":object" + "<br/>");
            }
        }
    }

    storage.setItem("a",5);
    
    function changeS() { //修改一個鍵值，測試storage事件
        if(!storage.getItem("b")) {
            storage.setItem("b",0);
        }
        storage.setItem('b',parseInt(storage.getItem('b'))+1);
    }

    function showStorage() { //循環顯示localStorage裏的鍵值對
        for(var i=0;i<storage.length;i++) {
            //key(i)得到相應的鍵，再用getItem()方法得到對應的值
            document.write(storage.key(i)+ ":" +storage.getItem(storage.key(i)) + "<br>");
        }
    }

</script>
</body>
</html>

接合網上的一篇文章對這個有我本身的一些很粗淺的見解；cookie

localStorage自己帶有的一些本地方法：session

添加鍵值對： localStorage.setItem(key,value);

獲取鍵值對： localStorage.getItem(key);

刪除鍵值對： localStorage.removeItem(key);

清除全部鍵值對： localStorage.clear();

獲取localStorage的屬性名稱（鍵名稱）： localStorage.key(index);

獲取localStorage中保存的鍵值對的數量： localStorage.length;

獲取localStorage完整鍵值對的列子：

localStorage事件

localStorage的storage事件，在存儲事件的處理函數中是不能取消這個存儲動做的。

存儲事件只是瀏覽器在localStorage數據變化發生以後給你的一個通知。注意這裏的的條件是數據真的發生了變化。也就是說，若是當前的存儲區域是空的，你再去調用clear()是不會觸發事件的。或者你經過setItem()來設置一個與現有值相同的值，事件也是不會觸發的。當存儲區域發生改變時就會被觸發。

PS:在firefox和chrome中存儲和讀取都是正常的, 可是對storage事件的觸發彷佛有點問題,chrome修改localStorage能觸發本頁面的storage事件，Firefox 自身頁面修改storage後沒有觸發window的storage事件, 可是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 一樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,一樣當前頁面的設值能觸發同一」起源」下其餘頁面window的storage事件,這看起來彷佛更讓人想的通些.實例推薦PrimeTechBlog的初試WebStorage之localstorage
　　因此建議，爲兼容瀏覽器或者本身寫兼容處理函數，或者乾脆不用storage事件。

也正以下面的這一個代碼段：

這裏引入showObject()函數

至於這個遞歸顯示object有什麼做用仍是沒有弄懂，待之後看到相關方面的知識再來補充——————！