Parce que StorageEvent does not work here, je souhaite implémenter un gestionnaire d'événements par localStorage.Implémenter un StorageEvent par localStorage
Supposons que nous ayons une page Web comme suit. Tout changement dans le champ de saisie déclenchera un événement, nous sauvegardons la nouvelle valeur dans 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>
Et nous avons une autre page Web qui écoute. Il analyse localStorage par setInterval. Il s'agit en fait d'un tube : plusieurs messages peuvent être stockés dans localStorage, et nous devons tous les traiter, puis vide 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>
Mais ce qui est important, est que nous devons nous assurer que aucun message est manqué par le récepteur. Malheureusement, ce n'est pas le cas pour le moment, par exemple, j'ai tapé rapidement 123456789 dans le champ de saisie, puis 12345 manquait sur le côté du récepteur. C'est probablement parce que l'expéditeur a généré 12345 juste après que le destinataire a lu le localStorage et avant que le destinataire vide le localStorage.
Est-ce que quelqu'un sait comment résoudre ce problème? Devrions-nous avoir un sémaphore pour localStorage ou y a-t-il une autre solution?
Edit 1: J'ai essayé d'ajouter un sémaphores par lock et waitfor: the sender et the receiver, mais il peut encore manquer des messages. Par exemple, 123456 est manquant dans l'exemple ci-dessous. Ce n'est pas surprenant, je pense que c'est parce que quand lock est free, nous avons entré simultanément le rappel du 2 waitfor, puis il a foiré.
Edit 2: J'ai fait un autre coup de feu qui est censé fonctionner mieux, mais je ne sais pas pourquoi les deux pages ne peuvent aligner leur valeur localStorage: the sender et the receiver
Donc, juste pour obtenir ce tout droit, vous voulez capturer toutes ces valeurs sur le site web 2: 1,12,123,1234,12345,123456,1234567,12345678,123456789. Et non: 1,2,3,4,5,6,7,8,9 droite ?? Ou voulez-vous juste 123456789? –
Oui, tous les «1,12,123,1234,12345,123456,1234567,12345678,123456789» que l'expéditeur envoie ... – SoftTimur
Encore une question. Est-ce que cette hypothèse est correcte: Vous souhaitez attacher un gestionnaire d'événements à une zone de texte dans une autre fenêtre, en utilisant le stockage local? –