ローカルストレージへの保存と読み出し
HTMLフォームに入力されたデータをローカルストレージに保存してみます。ローカルストレージに保存するにはsetItem()メソッドを使います。setItem()の第1引数にはキーの名前を、第2引数には保存したい内容を指定します。
・書式
window.localStorage.setItem(キー名, 内容)
保存したデータはgetItem()メソッドで読み出します。setItem()で指定したキーの名前をgetItem()の引数に指定します。
・書式
window.localStorage.getItem(キー名)
ローカルストレージは上記のようにメソッドを使う方法以外にも、配列形式でのアクセスや、プロパティとしてもアクセスできます。たとえばキー名が「ascii」で保存内容が"連載データ"であれば以下の方法でアクセスできます。
window.localStorage.setItem("ascii", "連載データ")
window.localStorage.ascii = "連載データ"
window.localStorage["ascii"] = "連載データ"
保存したデータは以下のようにして読み出します。変数dataに、読み出した内容（"連載データ"）が入ります。
data = window.localStorage.getItem("ascii")
data = window.localStorage.ascii
data = window.localStorage["ascii"]
このように、ローカルストレージの扱いは非常に簡単です。さっそくサンプルを見てみましょう。サンプル2は入力されたフォームのデータを保存／読み込むスクリプトです。最初に、ブラウザーがローカルストレージに対応しているか調べて、未対応の場合は以後の処理を中止します。
if (!window.localStorage) return
あとはボタンがクリックされたらローカルストレージの内容を保存または読み出す処理を実行するだけです（サンプル2はIE8では動作しません。IE9では問題なく動作します）。
テキストフィールドに名前と年齢を入力し「保存」ボタンをクリックする
ローカルストレージに保存するとアラートダイアログが表示される
ローカルストレージに保存したデータは「読み出し」ボタンをクリックする
データが読み出されたという旨のアラートダイアログが表示される
保存されたデータがテキストフィールドに表示される
<h1>ローカルストレージに保存/読み出し</h1>
<form>
名前：<input type="text" name="uName" id="uName"><br>
年齢：<input type="text" name="uAge" id="uAge"><br>
<input type="button" value="保存" id="dSave"><br>
<input type="button" value="読み出し" id="dLoad"><br>
</form>
<script>
(function(){
// ローカルストレージが使えるか調べる。使えない場合は何もしない
if (!window.localStorage) return;
// ローカルストレージにフォーム内容を保存する
document.getElementById("dSave").addEventListener("click", function(){
window.localStorage.setItem("uName", document.getElementById("uName").value);
window.localStorage.setItem("uAge", document.getElementById("uAge").value);
alert("データを保存しました");
}, true);
// ローカルストレージからフォームにデータを戻す
document.getElementById("dLoad").addEventListener("click", function(){
var val = window.localStorage.getItem("uName");
if (!val){
alert("名前のデータは保存されていません");
return;
}
document.getElementById("uName").value = val;
val = window.localStorage.getItem("uAge");
if (!val){
alert("年齢のデータは保存されていません");
return;
}
document.getElementById("uAge").value = val;
alert("データを読み出しました");
}, true);
})();
</script>
