解决layuimini 切换页面数据不刷新问题

电玩女神 2022-12-03 13:15 565阅读 0赞

# 问题描述 #

使用的layuimini后台模板，第一次点击左侧菜单栏的时候会刷新页面，然后切换别的菜单之后，再次点击原页面，页面不会刷新，例如当我每成功审核一条数据，跳转到审核历史页面，应该能看到刚才审核的那条数据，但是现在却要每次手动刷新之后，才能看到刚才审核的那条数据。=  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70_pic_center]

# 解决方案 #

利用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;
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7919aa2ff7cd4c278397ae21650b0d0f.png