サンプル
サンプル
このサンプルをローカルファイルとして実行した場合は、ブラウザのセキュリティ設定によっては、タブ、ウィンドウの間でのリアルタイムでの同期は動作しない場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>Web Storage メモ帳</title>
<style type="text/css">
#note{
width:800px;
height:600px;
}
</style>
</head>
<body>
<h1>Web Storage メモ帳</h1>
<p>
入力するたびにテキストがローカルストレージに保存されます。<br>
別のタブやウィンドウで更新した場合でも内容を同期します。<br>
ブラウザを閉じてから再び開いた時も内容を復元します。</p>
<textarea id="note"></textarea>
<p><input type="button" onclick="onClear()" value="クリア"></p>
<script type="text/javascript">
var KEY = "my-note";
var note = document.getElementById("note");
// ローカルストレージに保存されている内容をテキストエリアに設定する
var text = localStorage.getItem(KEY);
if(text != null){
note.value = text;
}
// テキストエリアが更新されるたびにローカルストレージを更新する
// IE8以前ではattachEvent
note.addEventListener("keyup",function(event){
localStorage.setItem(KEY,note.value);
},false);
// 別のタブやウィンドウでの更新を反映する
window.addEventListener("storage", function(event){
var value = localStorage.getItem(KEY);
if(event.key == KEY && note.value != value){
note.value = value;
}
},false);
// 内容をクリアする。
function onClear(){
localStorage.setItem(KEY,"");
note.value = "";
}
</script>
</body>
</html>
関連項目
（関連する項目はありません）
