同じサイトの異なるページでlocalStorage変更イベントにバインドする方法はありますか？

同じページが2つのタブ（this topic）で開かれていて、同様の効果が必要な場合に、変更イベントをlocalStorageにバインドする方法はわかっていますが、1つのサイトの2ページが別のタブで開かれています。何か案は？同じサイトの異なるページでlocalStorage変更イベントにバインドする方法はありますか？

出典

2016-05-09 Nick Kostikov

pingの2ページ目のlocalStorageのlocalStorageが変更された場合の時間間隔 – madalinivascu

、ストレージ・イベントは、他のすべてのページに解雇されますストレージを共有します。イベントを処理し、更新されたデータを取得するだけで済みます。これはsessionStorageでも有効です。 –

@ YinGang私はストレージアイテムを作成しようとしていて、2番目のページはリフレッシュ後にのみ表示されます。 '$（window）.bind（' storage '....'は動作していません。 –

あなたの例を確認して、それを確認してください。

http://www.yoursite.com/page1.html

<html> 
<head> 
    <title>Page 1</title> 
</head> 
<body> 
    <input type="text" id="value"/> 
    <button id="save">Save</button> 
</body> 
<script> 

    function $ID(id){ 
     return document.getElementById(id); 
    } 
    function addHandler(ele,trigger,handler){ 
     if(window.addEventListener){ 
      ele.addEventListener(trigger,handler,false); 
      return false; 
     } 
     window.attachEvent(trigger,handler); 
    } 

    function saveToStorage(){ 
     var value = $ID('value').value; 
     window.localStorage.setItem('key',value); 
    } 

    addHandler($ID('save'),"click",saveToStorage); 
</script> 
</html>

http://www.yoursite.com/page2.html

<html> 
<head></head> 
<body> 
    value: 
    <span id="value"></span> 
</body> 
<script> 

    function addHandler(ele,trigger,handler){ 
     if(window.addEventListener){ 
      ele.addEventListener(trigger,handler,false); 
      return false; 
     } 
     window.attachEvent(trigger,handler); 
    } 

    function onStoargeEvent(e) { 
     var value = localStorage.getItem('key'); 
     console.log('Successfully communicate with other tab'); 
     console.log('Received data: ' + value); 
     document.getElementById('value').innerText = value; 
    } 

    addHandler(window,"storage",onStoargeEvent); 

</script> 
</html>

出典

2016-05-09 11:16:02

ありがとう！これは私が必要とするものです。 –

同じサイトの異なるページでlocalStorage変更イベントにバインドする方法はありますか？

答えて

関連する問題