読者です 読者をやめる 読者になる 読者になる

底辺過ぎてちょっとビビる

26歳からIT業界にいるエンジニアが、まったく成長できてないことを確認するブログ。備忘録的に使いたいとも考えています。

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

HTML javascript

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

 

 

■イメージ①

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

f:id:starscream1999:20141202161052j:plain

f:id:starscream1999:20141202161142j:plain

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

f:id:starscream1999:20141202161219j:plain

 

 

これを実現しているのが、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の中で利用しているだけなのかな。その辺もちょっとあいまい。

 

3日でマスターHTHL&CSS

3日でマスターHTHL&CSS

 
HTML教科書 HTML5レベル1

HTML教科書 HTML5レベル1

 
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
 
スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

 
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)