一篇文章帶你了解JavaScript的Storage接口

作者：前端進階者 2021-08-06 07:51:48

開發后端

Storage 接口用于腳本在瀏覽器保存數據。兩個對象部署了這個接口：window.sessionStorage和window.localStorage。

[[415795]]

大家好，我進階學習者。

一、概念

Storage 接口用于腳本在瀏覽器保存數據。兩個對象部署了這個接口：window.sessionStorage和window.localStorage。

二、屬性和方法

1. Storage.setItem()

Storage.setItem()方法用于存入數據。它接受兩個參數，第一個是鍵名，第二個是保存的數據。如果鍵名已經存在，該方法會更新已有的鍵值。該方法沒有返回值。

window.sessionStorage.setItem('key', 'value'); 
window.localStorage.setItem('key', 'value');

注:

Storage.setItem()兩個參數都是字符串。如果不是字符串，會自動轉成字符串，再存入瀏覽器。

window.sessionStorage.setItem(3, { foo: 1 }); 
window.sessionStorage.getItem('3') // "[object Object]"

代碼解析：

setItem方法的兩個參數都不是字符串，但是存入的值都是字符串。

如果儲存空間已滿，該方法會拋錯，寫入不一定要用這個方法，直接賦值也是可以的。

2. Storage.getItem()

Storage.getItem()方法用于讀取數據。它只有一個參數，就是鍵名。如果鍵名不存在，該方法返回null。

window.sessionStorage.getItem('key') 
window.localStorage.getItem('key')

鍵名應該是一個字符串，否則會被自動轉為字符串。

3. Storage.key()

Storage.key()接受一個整數作為參數(從零開始)，返回該位置對應的鍵值。

window.sessionStorage.setItem('key', 'value'); 
window.sessionStorage.key(0) // "key"

結合使用Storage.length屬性和Storage.key()方法，可以遍歷所有的鍵。

for (var i = 0; i < window.localStorage.length; i++)  
{   
  console.log(localStorage.key(i)); 
}

三、Storage 事件

Storage 接口儲存的數據發生變化時，會觸發 storage 事件，可以指定這個事件的監聽函數。

window.addEventListener('storage', onStorageChange);

監聽函數接受一個event實例對象作為參數。這個實例對象繼承了 StorageEvent 接口，有幾個特有的屬性，都是只讀屬性。

屬性	解析
StorageEvent.key	字符串，表示發生變動的鍵名。如果 storage 事件是由clear()方法引起，該屬性返回null。
StorageEvent.newValue	字符串，表示新的鍵值。如果 storage 事件是由clear()方法或刪除該鍵值對引發的，該屬性返回null。
StorageEvent.oldValue	字符串，表示舊的鍵值。如果該鍵值對是新增的，該屬性返回null。
StorageEvent.storageArea	對象，返回鍵值對所在的整個對象。也說是說，可以從這個屬性上面拿到當前域名儲存的所有鍵值對。
StorageEvent.url	字符串，表示原始觸發 storage 事件的那個網頁的網址。

如果非要在同一個網頁中監聽怎么辦?

重寫localStorage的方法, 拋出自定義的事件

<!DOCTYPE html> 
<html> 
    <head lang="en"> 
        <title>A</title> 
    </head> 
    <body> 
        <script> 
            var orignalSetItem = localStorage.setItem; 
            localStorage.setItem = function(key, newValue) { 
                var setItemEvent = new Event("setItemEvent"); 
                setItemEvent.newValue = newValue; 
                window.dispatchEvent(setItemEvent); 
                orignalSetItem.apply(this, arguments); 
            } 
            window.addEventListener("setItemEvent", function(e) { 
                alert(e.newValue); 
            }); 
            localStorage.setItem("nm", "1234"); 
</script> 
    </body> 
</html>