由localStorage执行StorageEvent

由于StorageEvent does not work here，我想通过localStorage实现事件处理程序。由localStorage执行StorageEvent

假设我们有一个网页如下。对输入字段的任何更改都会触发事件，我们将新值保存到localStorage。 JSBin

<html ng-app="app"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    </head> 
    <body ng-controller="Ctrl"> 
    <input type="text" ng-model="text"></input> 
    <div id="console"></div> 
    <script> 
     var app = angular.module('app', []); 
     app.controller('Ctrl', ["$scope", function ($scope) { 
     $scope.$watch('text', function (newValue, oldValue) { 
      var x = "nV: " + newValue; 
      localStorage.setItem("messages", localStorage.getItem("messages") + " " + x) 
      debug(localStorage.getItem("messages")) 
     }, false) 
     }]) 

     function debug(msg) { 
     document.getElementById("console").innerHTML += msg + "<br/>"; 
     } 
    </script> 
    </body> 
</html>

而且我们还有另一个监听的网页。它通过setInterval扫描localStorage。它实际上是一个管道：几条消息可以存储在localStorage中，我们应该将它们全部对待，然后清空localStorage。 JSBin

<html> 
    <body> 
    <div id="console"></div> 
    <script> 
     var listen = setInterval(function() { 
     var m = localStorage.getItem("messages"); 
     if ((m !== "") && (m !== undefined)) { 
      localStorage.setItem("messages", "") 
      treatMessages(m); 
     } 
     }, 100) 

     function treatMessages(messages) { 
     debug(messages) 
     } 

     function debug(msg) { 
     document.getElementById("console").innerHTML += msg + "<br/>"; 
     } 
    </script> 
    </body> 
</html>

但重要的是，我们应该确保没有消息被接收错过。不幸的是，目前情况并非如此，例如，我在输入栏中快速键入123456789，然后在接收器侧丢失12345。这可能是因为发送方在接收方读取localStorage之后以及接收方清空localStorage之前生成了12345。

那么有谁知道如何解决这个问题？我们应该为localStorage设置一个信号灯还是有其他解决方法？

编辑1：我试图通过lock和waitfor添加一个信号：the sender和the receiver，但它仍然可以错过的消息。例如，下面的示例中缺少123456。这并不奇怪，我想这是因为当lock是free时，我们同时输入了2个waitfor的回调，然后就搞砸了。

编辑2：我做这是为了更好地工作又拍，但我不知道为什么两个页面无法使自己的localStorage值：the sender和the receiver

来源

2017-06-22 SoftTimur

所以才得到这个直接，你想在网站2上捕获所有这些值：1,12,123,1234,12345,123456,1234567,12345678,123456789。而不是：1,2,3,4,5,6,7,8,9对吗？或者你只是想123456789？ –

是的，发件人发送的所有'1,12,123,1234,12345,123456,1234567,12345678,123456789' ... – SoftTimur

还有一个问题。这个假设是否正确：您想使用本地存储将事件处理程序附加到另一个窗口中的文本框？ –

尝试更新的IndexedDB。 https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB。它更复杂/更复杂。现在广泛支持：http://caniuse.com/#search=indexeddb。

我相信它可以解决上面的问题（错过的消息），但没有changeEvent。我也相信，由于高速缓存的原因，它无法在Mac上的浏览器（WebKit）实例上看到变化（例如，Mac版的Excel），但应该跨越标签。

来源

2017-06-24 03:41:47

我建议使用localDataStorage来为您触发事件，为每个关键值添加，删除或更改。它甚至可以在单个页面/标签中报告这些事件！此实用程序可以透明地设置/获取以下任何“类型”：Array，Boolean，Date，Float，Integer，Null，Object或String（不需要转换）。

[免责声明]我的实用程序的作者[/免责声明】

一旦你实例化的实用工具，下面的代码片断将让您监视事件：

function localStorageChangeEvents(e) { 
    console.log(
     "timestamp: "  + e.detail.timestamp + " (" + new Date(e.detail.timestamp) + ")" + "\n" + 
     "key: "   + e.detail.key  + "\n" + 
     "old value: "  + e.detail.oldval + "\n" + 
     "new value: "  + e.detail.newval + "\n" 
    ); 
}; 
document.addEventListener(
    "localDataStorage" 
    , localStorageChangeEvents 
    , false 
);

来源

2017-12-01 19:00:10 Mac

由localStorage执行StorageEvent

回答

相关问题