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");で、①で格納した値を取得する。
■セッションストレージの場合は?
localStorage.setItem();→sessionStorage.setItem();に変わるだけのようです。
■クッキー(cookie)と何が違うのか
まだ調べてません。一番最初に言及した、「ローカルストレージとかセッションストレージの前はどうやって保存してたんや」という部分は、クッキーで保存していたようですけど、仕組みはちょっとよくわからない。宿題です。
■ちなみに根本的なことなのだけど、なぜこれがHTML5の機能として扱われるのかがよくわからない。javascriptの機能、ではないの?localStorageというオブジェクトをjavascriptの中で利用しているだけなのかな。その辺もちょっとあいまい。
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (1件) を見る
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)
- 作者: Dustin Boswell,Trevor Foucher,須藤功平,角征典
- 出版社/メーカー: オライリージャパン
- 発売日: 2012/06/23
- メディア: 単行本(ソフトカバー)
- 購入: 68人 クリック: 1,802回
- この商品を含むブログ (118件) を見る