一篇文章帶你了解JavaScript的Storage接口
一、概念
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>
注：
如果瀏覽器只打開一個窗口，可能觀察不到這個事件。
比如同時打開多個窗口，當其中的一個窗口導致儲存的數據發生改變時，只有在其他窗口才能觀察到監聽函數的執行。可以通過這種機制，實現多個窗口之間的通信。
四、總結
本文基于JavaScript 基礎。介紹了相關的屬性和方法。通過案例的分析分步進行講解。介紹了Storage 事件在實際的應用，在實際應用中遇到的難點，提過有效的解決方案。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學習有幫助。
本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。
