BLOG

ブログ（ EdTech, web制作, DX ）

EdTech Web制作・システム DX プロジェクトマネジメント講座 Webディレクション講座ワークスタイル

2015.02.23 edit

長澤諭

HTML5でローカルにデータベースが作れる「Web Storage」を使ってみた！

もはや皆さまおなじみの「HTML5」ですが、今回はその機能の１つの「Web Storage」について特徴から動きについてざっくりと触れてみたいと思います。

はじめまして！昨年の10月よりspiceworksのsystem担当として入社しました「長澤」です！
以前にもブログにはちょっとだけ出ています…

これです！！

違う違う…

これです！！

※元ネタの内容はぜひこちらをご覧ください！！

以後お見知り置きをお願いしますm(_ _)m
プログラムについてはまだまだひよっこで、毎日英数字の羅列との格闘を繰り広げています。
そんなフレッシュで脂の乗った長澤が贈るブログに少しの間お付き合いください。

■Web Storageとは

ローカルにデータを保存する仕組み。
種類は「session Storage」と「local Storage」の2つ。
データ保存容量は約5MB(※ブラウザ及びバージョンにより異なります)
javascriptにて操作を行う。
キーバリュー型データベース。

なので従来からある「Cookie」より多くデータの保存が可能！
これはなかなかいいですねー(^_^)

■「session Storage」と「local Storage」の違い

「session Storage」：セッションが有効な間データが保持される ≠ ブラウザを閉じたときに消える。
「local Storage」：明示的な削除がない限り永続的に保持される ≠ ブラウザを閉じても消えない。

じゃあ実際にソースコードを交えて操作してみたいと思います。

まずは

■対応ブラウザの判定

「localStorage」 or 「sessionStorage」で判定が可能

window.onload = function () {
    // ローカルストレージ対応判定
     if(!localStorage) {
         alert('ローカルストレージに対応していない');
     }
     // セッションストレージ対応判定
     if(!sessionStorage) {
         alert('セッションストレージに対応していない');
     }
}

これでブラウザが対応していなければアラートが出ます
次に

■データの保存と読み込み

方法は以下の3通り。

メソッド
プロパティ
連想配列

では「メソッド」の方法から
保存は「localStorage」オブジェクトの「setItem」メソッドを使います。
読み込みは「getItem」メソッドを使います。

// 保存
function methodSave() {
	var key = 'nagasawa';
	var val = 'satoshi';
	localStorage.setItem(key, val);
}
// 読み込み
function methodRead() {
	var name = localStorage.getItem('nagasawa');
	alert(name);
}

これで私の名前の「satoshi」が出てくるはず…

でた！

次に「プロパティ」の方法です
保存は「localStorage」オブジェクトに任意のプロパティ名を付けます。
読み込みは「localStorage」のプロパティ名を宣言するだけ。

// 保存
function propertySave() {
    var val = 'shinjuku';
    localStorage.tokyo = val;
}
// 読み込み
function propertyRead() {
    var address = localStorage.tokyo;
    alert(address);
}

…

うん！おっけー！

最後に「連想配列」の方法です
保存は「localStorage」オブジェクトの配列に任意のキー名を付けます。
読み込みは「localStorage」の配列のキー名を宣言するだけ。

// 保存
function hashsave() {
    var val = 'works';
    localStorage['spice'] = val;
}
// 読み込み
function hashroad() {
    var company = localStorage['spice'];
    alert(company);
}

…

完璧やー！

また、オブジェクトリテラルとしてまとめて処理することも可能です。その際は
保存は「JSON.stringify」でJSON文字列に変換します。
読み込みは「JSON.parse」で元の連想配列に変換します。

function batch() {
    var hash = {
        'nagasawa' : 'satoshi',
        'tokyo' : 'shinjuku',
        'spice' : 'works'
    };
    // JSON文字列に変換後保存
    localStorage.setItem('object', JSON.stringify(hash));
    // 連想配列に変換後読み込み
    var batch = JSON.parse(localStorage.getItem('object'));
    for(key in batch) {
        alert(key + ':' + batch[key]);
    }
}

個人的にはやっぱり「オブジェクトリテラル」がいいですねー(~_~)
他にも様々なメソッド、プロパティがありますので一部紹介します。