javascript - 通过localStorage实现StorageEvent

标签 javascript asynchronous event-handling local-storage setinterval

因为 StorageEvent does not work here ,我想通过 localStorage 实现一个事件处理程序。

假设我们有一个网页如下。对输入字段的任何更改都会触发一个事件,我们将新值保存到 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 中可以存储多条消息,我们应该将它们全部处理然后清空 localStorageJSBin

<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 使用信号量还是有其他解决方法?

enter image description here

编辑1:我尝试通过 lockwaitfor 添加信号量: the senderthe receiver ,但它仍然可能会丢失消息。例如,下面的示例中缺少 123456。这并不奇怪,我认为这是因为当lockfree时,我们同时进入了2个waitfor的回调,然后就搞砸了。

enter image description here

编辑2:我又做了一个镜头,应该效果更好,但我不知道为什么这两个页面无法对齐它们的 localStorage 值:the senderthe receiver

最佳答案

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

我相信它可以解决您上面的问题(错过消息),但是没有changeEvent。我还相信,由于缓存的原因,它无法跨 Mac 上的浏览​​器 (WebKit) 实例(例如 Excel for Mac)看到更改,但应该可以跨选项卡工作。

关于javascript - 通过localStorage实现StorageEvent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44710474/

相关文章:

javascript - 使用 javascript 更改 <label> 元素失败的 style.color

javascript - 下划线,错误检索值

javascript - 使用 ngCordova 的动画方向箭头 "aroundMe"样式

javascript - 输入onBlur触发跨域YQL ajax请求

c# - 有没有办法结合 LINQ 和异步

node.js - 同步调用Redis Server

输入类型 ="file"上的 jQuery 更改方法

javascript - React.js 中鼠标单击时不断增加计数器

java - Spring boot应用程序无法将 `Autowire`代理为新线程的Service类

java - 从 Action 监听器中开始游戏