JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<label>入力欄<input type="text" id="sender"></label>
<div style="display: flex; flex-direction: column">
  <div>受け取ったメッセージ</div>
  <div id="receiver"></div>
</div>

JavaScript

// ローカルストレージのイベントを登録
window.onstorage = event => {
  if (event.key === 'msg'){
    // msg というキーに値が設定されたらその新しい値を表示
    document.getElementById('receiver').innerText = event.newValue;
  }
};

// ローカルストレージと input 要素の入力を接続
document.getElementById('sender').addEventListener('input', event => {
  localStorage.setItem('msg', event.currentTarget.value);
});