JavaScript入門[HTML5編]Storageの読み書き

Storageの読み書き

最初に、Storageの読み書きの方法を見ておきましょう。

localStorage.setItem( キー名 , 値 )

ローカルストレージに値を書き込みます。

sessionStorage.setItem( キー名 , 値 )

セッションストレージに値を書き込みます。

変数 = localStorage.getItem( キー名 )

ローカルストレージから値を取り出し、変数に代入します。

変数 = sessionStorage.getItem( キー名 )

セッションストレージから値を取り出し、変数に代入します。

ローカルストレージはデータを永続的に保存できますが、 セッションストレージはブラウザ（またはタブ）を閉じるまでデータを保存します。

古いブラウザ（Internet Explorer 8より前等）ではStorageに対応していません。 それで、それらのブラウザを考慮しなければいけない場合、以下のようにif文で処理を分けると良いでしょう。

if( window.localStorage ){ 処理1 } else { 処理2 }
if( window.sessionStorage ){ 処理1 } else { 処理2 }

Storageのサンプルスクリプト

では実際にStorageを使ったスクリプトを見てみましょう。 今回はどうでもいいデータを残さないため、セッションストレージを使います。

<form name="fm">
<input type="text" name="dat" value="">
<input type="button" id="save" value=" 保存 ">
<input type="button" id="load" value=" 読込 ">
</form>

<script>
//保存ボタンをクリックした時の処理
document.getElementById("save").addEventListener("click",function(){

  var str = document.fm.dat.value;
  sessionStorage.setItem( "test" , str );   //Storageに書き込み
  alert("「" + str + "」を保存しました。");

},false);


//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){

  var txt = sessionStorage.getItem("test");  //Storageから読み込み
  if ( txt == null ) txt = "データがありません！";
  if ( txt == "" ) txt = "文字が入力されていません！";
  alert("「" + txt + "」");

},false);
</script>

＜サンプル＞何か文字を入力して、保存ボタンを押してください。 セッションストレージに保存されます。その後、読込ボタンを押してください。 保存された文字列がアラート表示されます。

スクリプトの説明

上述のサンプルスクリプトを詳しく見ていきましょう。

フォーム部分

<form name="fm">
<input type="text" name="dat" value="">
<input type="button" id="save" value=" 保存 ">
<input type="button" id="load" value=" 読込 ">
</form>

まずはフォーム部分です。フォーム名は「fm」，テキストボックス名は「dat」にしました。 またボタン２つは後でイベントを追加するため、id名を指定しています。 「save」と「load」にしています。

保存ボタンにクリックイベントを追加

document.getElementById("save").addEventListener("click",function(){
  …処理…
},false);

次に、スクリプト部分を見ていきます。最初にid名「save」が付いたボタンに、 addEventListener()を使ってクリックイベントを追加しています。

sessionStorageに書き込む

var str = document.fm.dat.value;
sessionStorage.setItem( "test" , str );
alert("「" + str + "」を保存しました。");

続いて、保存ボタンを押した時の処理を見ていきましょう。 最初にフォームのテキストボックスの値を取得して、変数strに代入しています。

次にsetItem()を使って、セッションストレージに書き込みを行なっています。 key名は「test」、保存する文字列は変数str（テキストボックスの文字列）です。

そしてalert()を使い保存文字列をダイアログで表示しています。

読込ボタンにクリックイベントを追加

document.getElementById("load").addEventListener("click",function(){
  …処理…
},false);

今度は読込ボタンにクリックイベントを追加します。id名「load」が付いたボタンに、 addEventListener()でクリックイベントを追加します。

sessionStorageから読み込む

var txt = sessionStorage.getItem("test");
if ( txt == null ) txt = "データがありません！";
if ( txt == "" ) txt = "文字が入力されていません！";
alert("「" + txt + "」");

読込ボタンを押した時の処理を見ていきましょう。 まずはgetItem()を使って、sessionStorageから読込を行ないます。 key名は「test」です。読み込んだ値を変数txtに代入します。

読み込んだ文字列をif文でチェックします。 key名「test」がsessionStorageに存在していない場合、nullが変数txtに入ります。 それで、nullの場合は「データがありません！」という文字列に書き換えます。

テキストボックスに何も入力せず保存ボタンを押した場合、 文字列は空になります。if文で変数txtをチェックし、 空の場合には「文字が入力されていません！」に置き換えます。

最後にalert()を使って、変数txtをダイアログ表示します。 sessionStorageに文字列が保存されていればその文字列が、 またはif文で置き換えられた文字列が表示されます。

次のページでは、Storageのデータ数とkey名を取得する方法を見ます。