解決layuimini 切換頁面 資料不重新整理問題

問題描述

使用的layuimini背景模闆，第一次點選左側菜單欄的時候會重新整理頁面，然後切換别的菜單之後，再次點選原頁面，頁面不會重新整理，例如當我每成功稽核一條資料，跳轉到稽核曆史頁面，應該能看到剛才稽核的那條資料，但是現在卻要每次手動重新整理之後，才能看到剛才稽核的那條資料。=

解決方案

利用HTML5的storage事件

當同源頁面的某個頁面修改了localStorage，其餘的同源頁面隻要注冊了storage事件，就會觸發”

是以，localStorage 的例子運作需要如下條件：

同一浏覽器打開了兩個同源頁面

其中一個網頁修改了 localStorage

另一網頁注冊了 storage 事件

例如

1.在A頁面中監聽storage事件

window.addEventListener("storage", function (e) {
       // 當localstorage中的值發生改變時，執行下面代碼，例如重新加載資料
       ...
});
           

2.在B頁面觸發storage事件

//在某個方法執行之後，改變localstorage中的值
    //例如在目前頁面操作某條資料時，使另一個頁面重新整理
    //這裡使用js放法生成一個唯一值，保證每次值都會改變
    localStorage.setItem(key,generateUUID())
    
    function generateUUID() {
        var d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
            d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    }