【HTML　Javascript】ローカルストレージへのデータ保存方法

Djangoに関しては、まだまだ素人なのですが、それもあってやっていくたびに新しい発見があったりしています。

その中の１つが、html、javascript側でのデータ保存になります。

html、javascriptを作成中に画面側で、

・一度画面を閉じて次に開いた時にもそのデータを残しておきたい

・ある画面で作成していた変数のデータを別の画面でも取り出したい

というようなことがあったりします。

他にも方法はあるかもしれませんがローカルストレージを活用することがその場合の１つの解決方法になるのではないかと思います。

既に知っている人には当たり前のことかもしれませんが、javascriptからブラウザにデータ保存するというものです。

HTML5から導入されたWebAPIの一種ということで、ブラウザにもよりますがおよそ最大5MBまでブラウザ側にデータを保存できるというものです。

データを保持しておくには非常にいいのですが、逆に注意点もあります。

削除処理を書かないと永遠に残り続けるということになりますので、その結果、データがたまり続けたり、また、javascriptからアクセスできるのでユーザーの個人情報などは載せないようにしたほうがいいということもあります。

使い方の一例ですが、まずローカルストレージにデータを格納する場合には、Javascriptで、

localStorage.setItem('key1', 'value1');

のように記載します。

こうすることで、ローカルストレージの'key1'に'value1'が格納されます。

取り出す場合には、

var value1 = localStorage.getItem('key1')

にて、'key1'に格納されたデータが取り出され、変数value1に格納されます。

もう１つ別の記載方法としては、

まず、

var storage = localStorage;

のように、一度localStorageを変数においておきます。

こうすることで、それ以降、

storage.completeFlg = 0;

や、

if (storage.completeFlg == 1){
}

のようにstorage.（key名）のような形で扱えるようになります。

これら使用したキーを削除する方法は、以下のようになります。

指定したキーを削除する場合には、

localStorage.removeItem('key1');

とします。

これにて、'key1'のデータを削除することができます。

また、

localStorage.clear();

とすれば、まとめてすべてのデータを削除できます。

自分もそうでしたが、これらを知っているかどうかで、かなりやれることの幅に違いが出たり、やりやすさに違いが出たりするのではないかと思います。