localStorage事件监听器没有被调用

发布于 2024-10-24 17:50:23 字数 1225 浏览 2 评论 0原文

我向窗口 DOM 对象添加了一个 eventListener,并希望跟踪对 localStorage 所做的更改。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script language="JavaScript"><!-- 
        window.addEventListener('storage', storageEventHandler, false);
        function storageEventHandler(evt){
            console.log("oldValue: " + evt.oldValue );
            console.log("storage event called key: " + evt.key );
            console.log("newValue: " + evt.newValue );

        }
        $(document).ready(function(event) {
            $('#link1').click(function(event){
                event.preventDefault();
                localStorage.setItem('page', 2000);
                console.log(localStorage.getItem('page'));
            });
            $('#link2').click(function(event){
                event.preventDefault();
                localStorage.setItem('page', 998);
                console.log(localStorage.getItem('page'));

            });

         });
    </script>
</head>
</html>

不知何故,即使当我单击 link1 或 link2 时 localStorage 值发生更改, storageEventHandler 也永远不会被调用。 非常感谢任何帮助。

I added an eventListener to the window DOM-Object and want to keep track of the changes made to localStorage.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script language="JavaScript"><!-- 
        window.addEventListener('storage', storageEventHandler, false);
        function storageEventHandler(evt){
            console.log("oldValue: " + evt.oldValue );
            console.log("storage event called key: " + evt.key );
            console.log("newValue: " + evt.newValue );

        }
        $(document).ready(function(event) {
            $('#link1').click(function(event){
                event.preventDefault();
                localStorage.setItem('page', 2000);
                console.log(localStorage.getItem('page'));
            });
            $('#link2').click(function(event){
                event.preventDefault();
                localStorage.setItem('page', 998);
                console.log(localStorage.getItem('page'));

            });

         });
    </script>
</head>
</html>

Somehow the storageEventHandler is never called even though the localStorage value is changed when I click link1 or link2.
Any help is much appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

好菇凉咱不稀罕他 2024-10-31 17:50:23

某些浏览器不支持存储事件,并且大多数支持它的浏览器只会当不同窗口/选项卡更改存储时调用它。因此,在两个窗口中打开您的页面。单击一个窗口中的链接,您可能会在另一个窗口中看到该事件。

假设您的页面已经知道其自己的窗口中与 localStorage 的所有交互,并且仅在不同的窗口更改内容时才需要通知。当然,这是一个愚蠢的假设。但是,localStorage 是一个新事物。希望他们最终能弄清楚这一切。

Some browsers don't support the storage event, and most of the browsers that do support it will only call it when the storage is changed by a different window/tab. So, open your page up in two windows. Click the links in one window and you will probably see the event in the other.

The assumption is that your page will already know all interactions with localStorage in its own window and only needs notification when a different window changes things. This, of course, is a foolish assumption. But, localStorage is a new thing. Hopefully, they'll eventually figure it all out.

月牙弯弯 2024-10-31 17:50:23

storage 事件处理程序只会影响其他窗口。每当 localStorage 内的一个窗口发生某些变化时,所有其他窗口都会收到通知,并且如果需要采取任何操作,可以通过侦听 storage 的处理函数来实现事件。

对于同一窗口,您必须在调用 localStorage.setItem() 后手动调用 storageEventHandler 函数才能在同一窗口中实现相同的行为。

The storage event handler will only affect other windows. Whenever something changes in one window inside localStorage all the other windows are notified about it and if any action needs to be taken it can be achieved by a handler function listening to the storage event.

For same window you have to manually call the storageEventHandler function after localStorage.setItem() is called to achieve the same behaviour in the same window.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文