在前端开发过程中，我们经常会使用 localStorage 来存储和读取数据。然而，在 IE11 中，当我们在 iframe 中使用 localStorage 时，可能会遇到事件被触发两次或者根本不触发的情况。这是因为 IE11 在处理 iframe 中的 localStorage 事件时存在一些问题。
问题原因
IE11 中的 localStorage 实现存在一个“同步”问题：当在同一个页面中设置了 localStorage 后，它会立即触发 storage 事件，而当在 iframe 中设置 localStorage 时，如果父级页面没有定义 localStorage，则会创建新的 localStorage 对象并触发 storage 事件。
但是，由于 IE11 中的 localStorage 实现是同步的，这意味着在触发 storage 事件之前，浏览器会先执行所有同步代码。如果你在 storage 事件回调函数中修改了 localStorage，那么它将再次触发 storage 事件，从而导致事件被重复触发。
另外，如果你在 iframe 中设置了 localStorage，但父级页面没有定义 localStorage，那么将无法触发 storage 事件，因为父级页面不知道 localStorage 的存在。
解决方案
有几种方法可以解决这个问题。
方案一：使用 setTimeout
如果你在 storage 事件回调函数中修改了 localStorage，那么可以通过使用 setTimeout 来解决重复触发事件的问题。例如：
---------------------------------- ----------- -
-- ------ --- -------- -
--------------------- -
----------------------------- ---- --------
-- ---
-
---这里我们使用了一个零毫秒的超时来确保在事件处理完之后再执行代码。
方案二：检测是否为iframe
另一个解决方案是检查当前页面是否在 iframe 中，如果是，则在父级页面中设置 localStorage，然后在 iframe 中监听 message 事件。当接收到来自父级页面的消息时，更新本地存储并触发 storage 事件。
-- ------------ --- ----------- -
-- ----- -- -- ------
---------------------------------- ----------- -
-- ------------ --- --------------- -- ---------- --- -------- -
----------------------------- --------------
--- ------------ - --- -----------------
---------------- - -----------
--------------------- - -------------
-----------------------------------
-
---
- ---- -
-- ----- --- -- -- ------
----------------------------- -------- --------
-这里我们使用了 window.postMessage API 来在父级页面和 iframe 之间发送消息。
方案三：使用 polyfill
最后，你可以使用一个专门针对 IE11 的 localStorage polyfill 来解决此问题。例如，ie11-localstorage 是一个很好的选择。
------ ------------ ---- --------------------
----------------------------- -------- --------
---------------------------------- ----------- -
-- ------ --- -------- -
----------------------------- ---- --------
-
---总结
在 IE11 中，在 iframe 中使用 localStorage 可能会遇到事件被触发两次或者根本不触发的问题，这是因为 IE11 在处理 iframe 中的 localStorage 事件时存在一些问题。通过使用 setTimeout、检测是否为 iframe 或者使用 polyfill 等方法，我们可以有效地解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25746