2016-06-14 3 views
5

cookieの値に基づいてdivを挿入したり削除したりしています。チェックボックスをオンまたはオフにして、Cookieの値を更新します。これは1つのタブでうまく動作します。 同じページの複数のタブが開いている場合でも、他のタブのdivの更新方法Cookieの値はブラウザの場合と同じですが、Cookieの値に対してdivを追加または削除する方法は変わりません。複数のタブのCookieに基づいてdiv要素の値を更新します

+0

参照[ 'のpostMessage()'](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) –

+0

コード例 –

+0

を投稿してくださいコードが大きすぎて投稿することができません – Pratyush

答えて

3

私はうまくいく方法を考え出しました。グローバルスコープの変数を使用してクッキーの価値を保存しました。クッキーの値が変数の値と同じでないかどうかを確認するメソッドを定義し、ページをリフレッシュします。

しかし、現在のページを更新する必要がない場合は、Cookieを更新するたびに変数の値を更新してください。

基本的に私は他のタブをリフレッシュしていますが、現在のタブはリフレッシュしていません。私はこれがこれを行うための最良の方法ではないことを知っていますが、それは仕事をするでしょう。

より効率的なものが見つかったら投稿してください。

1

クッキーの代わりにローカルストレージを使用しても問題がなければ、storageイベントを使用できます。このイベントは、ローカルストレージが変更されたときに発生します。

実行例についてはhttp://synccheckbox.site44.com/を参照してください。以下の貼り付けコード:

<!doctype html> 
<html> 
<head> 
    <style>html { font-family:Arial }</style> 
</head> 
<body> 
    This checkbox should synchronize between open tabs: 
    <input type="checkbox" id="checkbox" /> 

    <script> 
     function updateCheckbox() { 
      document.getElementById('checkbox').checked = 
       (localStorage.checked === 'true'); 
     } 
     updateCheckbox(); 

     document.getElementById('checkbox').addEventListener('change', function() { 
      localStorage.checked = this.checked; 
     }); 

     window.addEventListener('storage', function() { 
      updateCheckbox(); 
     }); 
    </script> 
</body> 
</html> 
+0

は良いしないだろう – Pratyush

+0

あなたは何を意味するのか分かりません。ローカルストレージはブラウザ機能です...ブラウザでしかアクセスできません。 – smarx

+0

私は@Pratyushは、いくつかのPHP変数に、ローカルストレージから取得した値を操作したいと思うし、私はjsの中だけでなく、私の場合は、PHPので、ローカルストレージ文句を言わない仕事で私のクッキーを使用して、mは@Anantその実現可能性 – Anant

関連する問題