localStorageでウインドウ間のデータ送受信 – てまりのユニバーサルデザイン

以前、WebSocket（Socket.io）やAjaxのポーリングを使い、別の出力画面を操作するWebアプリを作っていました。しかし、条件次第では、ローカルストレージを使うのが一番簡単そうです。

WebSocketの遅延に困った

ブラウザの送信画面から、他のブラウザの受信画面にデータを送る方法で、WebSocketがあります。チャットでよく使われる技術です。

ただ、たまに遅延がひどくて困ります。結局、安定して運用できる、ポーリングを採用することがありました。サーバーに一定間隔でデータを取りに行く、昔ながらの方法です。

ブラウザのウインドウ間で完結

作るWebアプリによっては、WebSocketもポーリングも必要ないことがあります。

送信画面と受信画面を同じPCで立ち上げ、ディスプレイを２つ繋ぎ、それぞれを表示する場合です。

この場合は、データを送受信するためのサーバーは必要ありません。ブラウザのウインドウ間で、データをやり取りできればOKです。

localStorageを使う

使う技術は、localStorageです。

localStorageの変更を感知して、イベントを発火させることで、ブラウザの別ウインドウ間で、データを送受信できます。

サンプルとして、ブラウザからタイマーを送信（保存）して、ほかのウインドウで表示するものを作りました。

PCに負荷をかけまくると遅延しますが、ほぼリアルタイムで反応します。

送信側のHTML・JavaScript

1秒ごとに、localStorageにタイマーの数字を保存しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Send localStorage</title>
</head>
<body>
<p>送信</p>
<p id="timer"></p>
<script>
const $timer = document.getElementById('timer');
let n = 0

setInterval(()=>{
  n++;
  localStorage.setItem('timer', n);
  $timer.innerText = n;
}, 1000);
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Send localStorage</title>

</head>

<body>

const $timer = document.getElementById('timer');

let n = 0

setInterval(()=>{

n++;

localStorage.setItem('timer', n);

$timer.innerText = n;

}, 1000);

</script>

</body>

</html>

受信側のHTML・JavaScript

localStorageの変更を感知した時、タイマーの数字を表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Receive localStorage</title>
</head>
<body>
<p>受信</p>
<p id="timer"></p>
<script>
const $timer = document.getElementById('timer');

window.addEventListener('storage', (e)=>{
  if(e.key === 'timer') {
    $timer.innerText = e.newValue;
  }
});
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Receive localStorage</title>

</head>

<body>

const $timer = document.getElementById('timer');

window.addEventListener('storage', (e)=>{

if(e.key === 'timer') {

$timer.innerText = e.newValue;

}

});

</script>

</body>

</html>

localStorageは手軽

今回のような技術を使う場面は限られていると思います。

例えば、タイマーアプリで操作画面をノートパソコンに表示して、接続したディスプレーにタイマーを映し、会場に見せるような場合でしょうか。

使用する機会は少ないですが、手軽に作れるので、ちょっとしたイベントで利用するのは良いかもしれません。