localStorage單頁面及不一樣頁面監聽變更

 分析

H5本地存儲有兩個API,一個是Web Storage,還有一個是Web SQL。無論是哪個,都是基於JavaScript語言來使用,而Web Storage提供了兩種存儲類型 API:  sessionStorage 和 localStorage,兩者的差別主要是數據的保存時長及數據的共享方式。javascript

那麼,如何監測本地存儲webstorage的數據是否改變呢?html

在H5中,window對象裏面有一個storage事件,咱們能夠進行監聽或者指定其事件處理函數的方法,在其餘頁面修改了sessionstorage或者localstorage中的值時,就會觸發註冊了storage事件。java

咱們先看一下幾個屬性:web

一、event.key 屬性:屬性值爲在 session 或 localStorage 中被修改的數據鍵值。移動web開發

二、event.oldValue 屬性:屬性值爲在 sessionStorage 或 localStorage 中被修改的值。瀏覽器

三、event.newValue 屬性:屬性值爲在 sessionStorage 或 localStorage 中被修改後的值session

四、event.url 屬性:屬性值爲修改 sessionStorage 或 localStorage 中值的頁面的URL地址app

五、event.storageArea 屬性 : 屬性值爲被變更的 sessionStorage 對象或 localStorage 對象函數

引用《h5移動web開發指南》上的話:this

「當同源頁面的某個頁面修改了localStorage,其他的同源頁面只要註冊了storage事件,就會觸發」

因此,localStorage的例子運行須要以下條件:

  • 同一瀏覽器打開了兩個同源頁面
  • 其中一個網頁修改了localStorage
  • 另外一網頁註冊了storage事件

很容易犯的錯誤是,在同一個網頁修改本地存儲,又在同一個網頁監聽,這樣是沒有效果的。

 例子

接下來咱們經過兩個例子來體驗一下。

實時監聽的頁面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用storage事件實時監視Web Storage中的數據</title>
    </head>
    <body>
        <script type="text/javascript">

            //利用storage事件實時監視wev Storage中的數據
            window.addEventListener('storage',function (e) {//e只是一個傳參
                //獲取被修改的鍵值
                if (e.key == 'test') {
                    //獲取將要被添加內容的元素
                    var output = document.getElementById('output');
                    //將獲取到的修改值在元素中輸出
                    output.innerHTML = '原有值:' + e.oldValue;
                    output.innerHTML += '<br />新值:' + e.newValue;
                    output.innerHTML += '<br />變更頁面地址:' + utf8_decode(unescape(e.url));

                    //分別打印會發現內容一致
                    console.log(e.storageArea);
                    console.log(localStorage);
                    //此行代碼只在Chrome瀏覽器中有效
                    console.log(e.storageArea === localStorage);//輸出true

                }
            },false);
            function utf8_decode (utftext) {
                var string = '';
                var i = c = c1 = c2 = 0;
                //獲取URL全部字符
                while (i < utftext.length) {
                    //獲取URL並將URL中全部 Unicode 編碼獲取
                    c = utftext.charCodeAt(i);
                    //對 Unicode 編碼進行處理轉化成字符串
                    if (c < 128) {
                        string += String.fromCharCode(c);
                        i++;
                    }
                    else if ((c < 191) && (c < 224)) {
                        c2 = utftext.charCodeAt(i + 1);
                        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                        i += 2;
                    }
                    else {
                        c2 = utftext.charCodeAt(i + 1);
                        c3 = utftext.charCodeAt(i + 2);
                        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                        i += 3;
                    }
                }
                return string;
            }
        </script>
        <output id="output"></output>
    </body>
</html>

修改localStorage中數據的頁面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用於修改localStorage 中數據的頁面的代碼</title>
    </head>
    <body>
        <script type="text/javascript">
            function setLOcalStorage () {
                //設置test鍵值下的內容等於input框中的內容
                localStorage.test = document.getElementById('text1').value;
            }
        </script>
        請輸入一些值:<input type="text" id="text1" />
        <button onclick="setLOcalStorage()">設置</button>
    </body>
</html>

實際效果: 

代碼中用到的函數:

charCodeAt()    可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。 fromCharCode() 可接受一個指定的 Unicode 值,而後返回一個字符串。 unescape() 可對經過 escape() 編碼的字符串進行解碼。

下面是關於Unicode碼的一些註解:

Unicode只有一個字符集,中、日、韓的三種文字佔用了Unicode中0x3000到0x9FFF的部分 
Unicode目前廣泛採用的是UCS-2,它用兩個字節來編碼一個字符, 好比漢字」經」的編碼是
0x7ECF,注意字符碼通常用十六進制來 表示,爲了與十進制區分,十六進制以0x開頭,0x7ECF
轉換成十進制 就是32463,UCS-2用兩個字節來編碼字符,兩個字節就是16位二進制, 2的16
次方等於65536,因此UCS-2最多能編碼65536個字符。 編碼從0到127的字符與ASCII編碼的
字符同樣,好比字母」a」的Unicode 編碼是0x0061,十進制是97,而」a」的ASCII編碼是0x61,
十進制也是97, 對於漢字的編碼,事實上Unicode對漢字支持不怎麼好,這也是沒辦法的, 簡
體和繁體總共有六七萬個漢字,而UCS-2最多能表示65536個,才六萬 多個,因此Unicode只
能排除一些幾乎不用的漢字,好在經常使用的簡體漢字 也不過七千多個,爲了能表示全部漢字,
Unicode也有UCS-4規範,就是用 4個字節來編碼字符

 擴展

若是非得要在同一網頁監聽怎麼辦?能夠重寫localStorage的方法,拋出自定義事件:

<script>
    var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.key = key;
        setItemEvent.newValue = newValue;
        setItemEvent.oldValue = localStorage.getItem(key);
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    }
    window.addEventListener("setItemEvent", function (e) {
        console.log('key: '+e.key);
        console.log('newValue: '+e.newValue);
        console.log('oldValue: '+e.oldValue);
    });
    localStorage.setItem("nm","1234");
</script>
相關文章
相關標籤/搜索