瀏覽器storage你真的會用嗎

IMG_20191004_191646R_2.jpg

前言

  • html5標準localstoragesessionStorage 爲現代瀏覽器提供用戶會話級別的數據存取。
  • 它們容許你訪問一個Document 源(origin)的對象 Storage,也就是在遵照同源策略狀況下存取數據。
  • 本文重點不是localstoragesessionStorageAPI的基本用法,而是列舉storage在一些經常使用庫中的用法,促使你對瀏覽器storage存取數據更多可能性的思考。

閱讀本文你將收穫什麼?

  • storageEvent事件的用法
  • 瞭解use-persisted-state中storage的用法

正文

1. storageEvent事件

當前頁面使用的storage被其餘頁面修改時會觸發StorageEvent事件(來源MDN)。 javascript

說明:符合同源策略,在同一瀏覽器下的不一樣窗口, 當焦點頁之外的其餘頁面致使數據變化時,若是焦點頁監聽storage事件,那麼該事件會觸發, 換一種說法就是除了改變數據的當前頁不會響應外,其餘窗口都會響應該事件。html

2. 用法
window.addEventListener("storage",function(event) {
    console.log(event);
});
/**
event的屬性:
key:該屬性表明被修改的鍵值。當被clear()方法清除以後該屬性值爲null。(只讀)
oldValue:該屬性表明修改前的原值。在設置新鍵值對時因爲沒有原始值,該屬性值爲 null。(只讀)  
newValue:修改後的新值。若是該鍵被clear()方法清理後或者該鍵值對被移除,,則這個屬性爲null。  
url:key 發生改變的對象所在文檔的URL地址。(只讀)
*/
3. React hook 狀態管理use-persisted-state中的用法
useEventListener('storage', ({ key: k, newValue }) => {
  if (k === key) {
    const newState = JSON.parse(newValue);
    if (state !== newState) {
      setState(newState);
    }
  }
});

// 監聽state變化
// Only persist to storage if state changes.
useEffect(
  () => {
    // persist to localStorage
    set(key, state);

    // inform all of the other instances in this tab
    globalState.current.emit(state);
  },
  [state]
);
4. iframe中使用

一樣符合同源策略的iframe也能夠觸發storage事件,利用iframe能夠實現當前頁不觸發storageEvent事件的問題,方案以下:html5

btn.onclick = function () {
  if (iframe) {
    iframe.contentWindow.localStorage.setItem("key", val.value);
  }
};

window.addEventListener("storage", function (e) {
  console.log(e);
});

function prepareFrame() {
  iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  iframe.style.display = "none";
}
prepareFrame();
利用 storageEvent事件還能夠作哪些事情那?歡迎留言討論
注意:

IE瀏覽器除外,它會在全部頁面觸發storage事件。java

相關文章
相關標籤/搜索