由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

回答

相關問題