Question

我在窗口DOM-Object中添加了一个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。非常感谢任何帮助。

Answer 1

某些浏览器不支持存储事件，并且大多数支持它的浏览器只会在存储被其他窗口更改时才会调用它。所以，在两个窗口中打开你的页面。单击一个窗口中的链接，您可能会在另一个窗口中看到该事件。

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

Answer 2

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

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

不调用localStorage eventListener

2 个答案: