JavaScript入門[HTML5編]配列をStorageに保存する

toString()を使って配列を保存する

最初はtoString()を使って配列を保存する方法を見てみましょう。

配列.toString()

配列の要素をコンマ「,」を使って繋げた文字列にします。

配列 = 文字列.split(",")

コンマ「,」で区切られた文字列を分割して配列に格納します。

以下の流れでサンプルスクリプトを組んでいます。 スクリプト中のコメントと見比べながら読み進めて下さい。

<form>
<input type="button" id="btn" value="配列の保存">
</form>

<script>

document.getElementById("btn").addEventListener("click",function(){

  //果物名を入れた配列fruitsを作成
  var fruits = new Array("リンゴ","ブドウ","レモン");

  //配列をtoString()で文字列に変換し、変数str1に格納する
  var str1 = fruits.toString();
  alert(str1);

  //セッションストレージに変数str1をkey名「tostr」で書き込む
  sessionStorage.setItem("tostr" , str1 );

  //ストレージからkey名「tostr」のデータを変数str2に読み込む
  var str2 = sessionStorage.getItem("tostr");

  //配列arrを作成し、読み込んだデータを分割して格納する
  var arr = new Array();
  arr = str2.split(",");

  //配列の3番目の要素を表示
  alert( arr[2] );

},false);

</script>

＜サンプル＞

上記のボタンを押すと、最初に「リンゴ,ブドウ,レモン」と表示されると思います。 配列の各要素がコンマで繋がれた文字列に変換されているのが分かります。

続いて「レモン」と表示されます。 配列arrの3番目の要素が、元の配列fruitsの3番目の要素と同じであることが確認できました。 つまり「配列を文字列に変換→Storageに書込→読込→配列に戻す」という処理が成功したことが分かります。

ただこの方法で問題なのは、配列の要素の中に半角コンマが含まれていると駄目な点です。 その場合はtoString()ではなく、for文を使って別の文字で繋いでいく必要があるでしょう。

JSONを使って配列を保存する

今度はJSON形式というものを利用してストレージに保存する方法を見ていきます。 JSONに関してはここでは詳しく述べません。とり合えずやり方だけ見ていきましょう。

配列とJSON文字列との変換に関する命令をまず見ておきましょう。

JSON.stringify( 配列 )

JavaScriptオブジェクト（ここでは配列）をJSON文字列に変換する。

JSON.parse( JSON文字列 )

JSON文字列をJavaScriptオブジェクト（今回は配列）に変換する。

以下にスクリプトの流れを載せておきます。 実際のスクリプト内に記載されたコメントと見比てみてください。

<form>
<input type="button" id="jsn" value="配列の保存">
</form>

<script>

document.getElementById("jsn").addEventListener("click",function(){

  //果物名を入れた配列fruitsを作成
  var fruits = new Array("リンゴ","ブドウ","レモン");

  //配列をJSON文字列に変換してアラート表示させる
  var jstr = JSON.stringify( fruits );
  alert( jstr );

  //JSON文字列をセッションストレージに書き込む
  sessionStorage.setItem( "jsons" , jstr );

  //ストレージから読み込んだJSON文字列を配列に戻す
  var arr = JSON.parse( sessionStorage.getItem("jsons") );

  //配列の2番目の要素をアラート表示
  alert( arr[1] );
  
},false);

</script>

＜サンプル＞

ボタンを押すと、["リンゴ","ブドウ","レモン"]と表示されます。 これがJSON文字列で配列を表記したものです。これをStorageに書き込みます。

続いて「ブドウ」と表示されます。Storageから読み出して配列に戻し、配列arrに格納した2番目の要素は、 配列fruitsの2番目の要素と同じであることが確認できました。