layer.open({ type: 2, title: ['图片选择器','background-color:#409EFF; font-size:16px;color:#ffffff;border-radius:10px 10px 0 0;'], shadeClose: true, id: 'choose-img-layer', area: ['800px', '600px'], content:['{:url("schoolAppFiles/upLoadFiles/upLoadFilesImgView")}','height:100%;'], success: function(layero, index){ localStorage.setItem('imgLinks', ''); window.addEventListener('storage', function(event) { if (event.key === 'imgLinks') { var data = JSON.parse(event.newValue); console.log('localStorage.getItem("imgLinks")变化了,新值为:',data ); layer.close('choose-img-layer'); } }); }, });纠正这段代码会重复输出的bug
时间: 2023-07-15 22:11:52 浏览: 45
这段代码在打开弹窗时注册了一个 `window.addEventListener` 监听 `localStorage` 的变化,但是每次打开弹窗时都会注册一个新的监听器,导致出现重复输出的问题。为了解决这个问题,可以在关闭弹窗的时候移除该监听器。
修改后的代码如下:
```
var chooseImgLayerIndex = layer.open({
type: 2,
title: ['图片选择器', 'background-color:#409EFF; font-size:16px;color:#ffffff;border-radius:10px 10px 0 0;'],
shadeClose: true,
id: 'choose-img-layer',
area: ['800px', '600px'],
content: ['{:url("schoolAppFiles/upLoadFiles/upLoadFilesImgView")}', 'height:100%;'],
success: function(layero, index) {
localStorage.setItem('imgLinks', '');
window.addEventListener('storage', onStorageEvent);
},
end: function() {
window.removeEventListener('storage', onStorageEvent);
}
});
function onStorageEvent(event) {
if (event.key === 'imgLinks') {
var data = JSON.parse(event.newValue);
console.log('localStorage.getItem("imgLinks")变化了,新值为:', data);
layer.close(chooseImgLayerIndex); // 关闭弹窗
}
}
```
在这个修改后的代码中,我们首先定义了一个变量 `chooseImgLayerIndex` 来存储打开弹窗时返回的索引,然后在打开弹窗时注册监听器,并在关闭弹窗时移除监听器。同时,我们把监听器的处理函数 `onStorageEvent` 定义为独立的函数,以方便移除监听器时使用。在处理函数中,我们通过 `chooseImgLayerIndex` 关闭弹窗。这样就可以避免重复输出的问题了。