cookieの値に基づいてdivを挿入したり削除したりしています。チェックボックスをオンまたはオフにして、Cookieの値を更新します。これは1つのタブでうまく動作します。 同じページの複数のタブが開いている場合でも、他のタブのdivの更新方法Cookieの値はブラウザの場合と同じですが、Cookieの値に対してdivを追加または削除する方法は変わりません。複数のタブのCookieに基づいてdiv要素の値を更新します
5
A
答えて
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>
関連する問題
- 1. 入力値に基づいてdiv要素(ボックス)の色を変更します
- 2. 更新フィールドは複数のオプションに基づいて複数の値を持つ
- 3. 複数のdivを矢印に基づいて変更する
- 4. 子要素の値に基づいて親要素のCSSを変更する
- 5. XPathは複数の値を返す子の子の値に基づいて要素を選択しますか?
- 6. 複数のキーに基づいてコレクションの要素を挿入します
- 7. 条件に基づいて複数の行の列値を更新する
- 8. 複数の値に基づいてMySQLの列を更新する
- 9. 複数のラジオボタンの合計値に基づいてdiv値を変更します
- 10. バインドされた値に基づいて要素のプロパティを変更します。
- 11. 複数の条件に基づいてフィールドを更新する
- 12. 異なる列の複数の値をMysql内の値に基づいてヌルに更新します
- 13. 要素に基づいて複数のリストに分割リストは
- 14. shinydashboardの選択したタブに基づいて要素の値を変更する
- 15. 子要素の数に基づいて親要素を選択
- 16. Excelの値を別の値に基づいて更新する
- 17. ul li要素に基づいてdivの高さを拡張しますか?
- 18. 複数のワークシートの列の値に基づいて新しいワークブックを生成
- 19. 選択値に基づいて複数のdivが表示されます
- 20. data.tableグループの最後の要素を条件に基づいて更新する
- 21. jqueryはCookieに基づいてフォントサイズを変更しますか?
- 22. angular2 - 以前の値に基づいて値を更新する
- 23. 動的に更新要素(その他の要素に加えられた変更に基づいて)
- 24. 複数のdivをドロップダウンの選択に基づいて表示
- 25. 他の要素のプロパティに基づいて要素のスタイルを変更
- 26. ViewModelのプロパティに基づいてdivクラスを変更します
- 27. divに基づいてスクロールのフォント色を変更します
- 28. クリックしたdiv要素に基づいてスタイルシートを適用します
- 29. 前の行の値に基づいて列を更新する
- 30. 別のDateInputの値に基づいてDateInputを更新する
参照[ 'のpostMessage()'](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) –
コード例 –
を投稿してくださいコードが大きすぎて投稿することができません – Pratyush