【HTML5】ローカルストレージとセッションストレージ

javascriptの勉強をしていたところ、テキストボックスなどに入力した値を保持する機能がHTML5にあることを知ったので、メモします。

■イメージ①

一旦テキストボックスに値を入力して、直下のテキストボックスに表示する

前回入力した値はそのまま残っている

これを実現しているのが、HTML5のローカルストレージという機能。これがある前はじゃあどうやって保持してたんだ、ということになるけど、ちょっとまだ調べていない・・・。

■ローカルストレージとセッションストレージの違い

ざっくり言うと、ブラウザを閉じても値が保持されるのが、「ローカルストレージ」でブラウザを閉じてしまうと保持した値が開放されてしまうのが、「セッションストレージ」と覚えてよい。

■実際のソースでどうやってローカルストレージに値を保持して、保持した値を持ってくるかを見てみよう

outputbox.js

var controlPanel,textBox,outputBox;

window.onload = appInit;

function appInit(){

controlPanel = document.getElementById("controlPanel");
textBox = document.getElementById("textBox");
outBox = document.getElementById("outBox");

var applyButton = document.getElementById("applyButton");
var clearButton = document.getElementById("clearButton");

applyButton.addEventListener("click", applyButtonClick, false);
clearButton.addEventListener("click", clearText, false);

loadText();

}

//表示ボタン
function applyButtonClick(event){
var text = textBox.value;
saveText(text);
outBox.value = text;

}

//消去ボタン
function clearText(){
outBox.value = "";
textBox.value = "";
}

//テキストボックスの内容を保存する
function saveText(text){
var storage = localStorage;
if(typeof storage == "undefined") return;

storage.setItem("text", text);・・・①
}

//ローカルストレージから前回の情報を取得
function loadText(){

var storage = localStorage;
if(typeof localStorage == "undefined") return;

var text = storage.getItem("text");・・・②
if(text) outBox.value = text;
}

それぞれ見てみます。

①saveText関数は、テキストボックに入力した値をローカルストレージに保存する処理を行っています。そもそもローカルストレージが利用できるかどうかチェックするために（利用できないブラウザもあるようなので）、typeof演算子を使ってオブジェクトのデータ型を取得。そのときに「undefined」が帰ってくる場合は利用できないので、if文で分岐しておきます。

実際にストレージに値を保存するには、

localStorage.setItem(<キー名>,　<データ>);

とするけど、上では一旦ローカル変数に置き換えてるので、

storage.setItem("text", text);としている。これだけ。

②loadText関数は、saveText関数で保存した値を再取得する処理をおこなっています。saveText関数と同様に、ストレージが利用できるかどうかのチェックを行い、利用できれば、getItemでストレージに格納しているデータを取ってくる。

取ってきかたは、

localStorage.getItem(<キー名>);

なので、これも上と同じく、

storage.getItem("text");で、①で格納した値を取得する。