移動Web——localStorage，sessionStorage，Storage事件監聽

기다 리 고 있 었 네.發表於2020-11-14
WebSession事件

1.0localStorage是storage的例項，Storage還提供以下方法和屬性：

1.setItem(key,value) 該方法接收一個鍵名和值作為引數，將會把鍵值對新增到儲存中，如果鍵名存在，則更新其對應值
2.getItem(key) 接收一個鍵名作為引數，返回鍵名所對應的值
3.removeItem(key) 接收一個鍵名做引數，並將該鍵名從儲存中刪除
4.length 用於訪問Storage物件中的item的數量
5.key(n) 訪問第n個key的名稱
6.claer() 清楚當前域下所有localStorage內容

<body>
    <input type="text" name="" id="username">
    <input type="button" value="localStroageId 設定資料" id="localStroageId">
    <input type="button" value="localStroageId 獲取資料" id="getlocalStroageId">
    <input type="button" value="localStroageId 刪除資料" id="removelocalStroageId">
    <script>
        
        document.getElementById('localStroageId').onclick = function(){
            // 1.將使用者通過 input輸入的資料儲存到localStorage中
            var username = document.getElementById('username').value;
            window.localStorage.setItem("username", username);
        }
        document.getElementById('getlocalStroageId').onclick = function(){
            // 2.從localStorage獲取資料
            var username = document.getElementById('username').value;
            alert(username);
        }
        document.getElementById('removelocalStroageId').onclick = function(){
            // 3.刪除localStorage的中資料
            var username = document.getElementById('username').value;
            window.localStorage.removeItem("username", username);
                        
        }
    </script>
</body>

2.sessionStorage簡介
1.sessionStorage主要用於區域儲存,只在單個頁面的會話期內有效
2.session翻譯成中文就是會話的意思,一次會話是指從一個瀏覽器視窗開啟到關閉的期間,關閉瀏覽器,會話結束
3.sessionStorage也是Storage的例項
4.sessionStorage 和 localStorage的方法基本一致,區別就是儲存資料的生命週期不同,localStorage 是永久性儲存,
sessionStorage 的生命週期和會話保持一致,會話結束時資料消失,並且 sessionStorage 的儲存資料只在當前瀏覽器視窗中有效

<body>
    姓名：<input type="text" name="" id="username">
    年齡：<input type="text" name="" id="age">
    <input type="button" value="sessionStorage 設定資料" id="sz">
    <input type="button" value="sessionStorage 獲取資料" id="get">
    <input type="button" value="sessionStorage 刪除所有資料" id="remove">
    <script>
        document.getElementById('sz').onclick = function(){
            // 1.獲取姓名和年齡輸入框的值
            var username = document.getElementById("username").value;
            var age = document.getElementById('age').value;
            var user = {
                username:username,
                age:age
            }
            window.sessionStorage.setItem("user", JSON.stringify(user));
            //使用stringify()將json的物件序列號並存入sessionStorage中
        }
        document.getElementById('get').onclick = function(){
            var value = window.sessionStorage.getItem("user");
            alert(value);
        }
        document.getElementById('remove').onclick = function(){
            window.sessionStorage.clear();
        }
    </script>
</body>

3.Storage事件監聽
1.使用Web Storage API 儲存資料時,當儲存的資料發生變化時,會觸發window 物件的storage事件,通過監聽該事件並指定其事件處理函式,可以定義在其他頁面中修改sessionStorage 和 localStorage中的值所要執行的處理
2.監聽storage事件的示例程式碼如下:

<script>
        window.addEventListener('storage', function onStorageChange(event){
            console.log(event.key);
            //回撥函式接收event物件作為一個引數,並且event物件的key屬性儲存發生變化的鍵名
        });
    </script>

在事件處理函式中,處理事件的事件物件(event引數值)具有以下屬性：
1.evet.key 屬性值為sessionStorage 或 localStoage 中被修改的資料鍵值
2.evet.oldValue 屬性值為sessionStorage 或 localStoage 中被修改前的值
3.evet.newValue 屬性值為sessionStorage 或 localStoage 中被修改後的值
4.evet.url 屬性值為sessionStorage 或 localStoage 中頁面的url地址
5.evet.storgaeArea 屬性值為變動的 sessionStorage物件 或 localStoage物件

注意;stroage事件並不在導致資料變化的當前頁面觸發,如果瀏覽器同時開啟一個域名下面的多個頁面,當其中的一個頁面改變sessionStorage或localStorage的資料時,其他所有頁面的storage事件會被觸發,而原始頁面並不出發storage事件，IE除外,storage事件會在其所有頁面觸發

相關文章