因为 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 中可以存储多条消息,我们应该将它们全部处理然后清空 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
最佳答案
尝试较新的 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/