ゼロからはじめるプログラミング講座の第四十九回です。前回に続きローカルストレージについて解説していきます。今回は配列をJSON形式で保存する方法をやります。

 

 

 

JSON形式を知ろう。

JSONとは

データの整形の型、記述方式です。他の言語とやり取りするためによく使われます。

JavaScript←JSON形式→C言語

JavaScript←JSON形式→Python

JavaScript←JSON形式→PHP

このように間にJSON形式を挟むことで様々な言語に対応させることができます。

JSON形式になおさず直接べつの言語形式にすることももちろんできますが、その場合は対応させる言語の数だけデータを直す必要が出てきます。

各言語がJSONを読み込める形に直す機能を持っていれば、JSON形式にするだけで色々な言語とデータをやりとりできるようになります。

そういう理由でJSONが生まれ広く使われています。

 

言語の形式を変換することをParse（パース）と言います。

詳細なJSONの記述方法は今回解説しません。

 

 

localStorageにJSON形式でvalueを保存してみよう。

まずは連想配列を作ってそのままローカルストレージに保存してみます。

let arr = {one:"1",two:"2",three:"3"}
localStorage.setItem("arr",arr)
console.log(localStorage.getItem("arr"))

ローカルストレージから取り出してみると連想配列の中身は入っておらず、Objectという形式だけが入っています。ローカルストレージには文字列だけしか渡せないので連想配列（オブジェクト）はダメということですね。

 

連想配列をローカルストレージに保存するには一度JSON形式に直す必要があります。

JSON.stringify(値)

というメソッドを使います。値には色々なものが入ります。配列や数値などなど。

連想配列をJSON形式に変換して渡してみましょう。

またJSON形式で保存されたローカルストレージの値を取り出すときもJSON形式からJavaScriptの形式に戻す必要があります。変換（パース）です。戻す場合は、

JSON.parse(JSON形式の文字列)

というメソッドを使います。保存してから取り出して表示してみましょう。

 

let arr = {one:"1",two:"2",three:"3"}
arr = JSON.stringify(arr) // JSON形式にする
localStorage.setItem("arr",arr)
console.log(JSON.parse(localStorage.getItem("arr"))) // JSON形式から戻す

上手く目的の結果が得られましたね。

これでkeyに配列を保存することができるのでローカルストレージが扱いやすくなります

 

ローカルストレージで保存できるデータ量はユーザーの環境によってことなります。

具体的にはブラウザごとによって違います。おおよその目安はスマホの場合は5MBまでPCの場合は10MBまで一部は容量無制限のブラウザもあります。

10MBだと3万文字ぐらいですかね？ツールによっては文字を大量に記憶させたい場合もあるので保存しきれないこともあります。その場合は外部ファイルに保存しましょう。

 

お疲れ様でした。次回は外部ファイル保存を解説します。

次も頑張って記事を作るのでチャレンジしてください！