HTML5のlocalStorageの使い方のまとめ

HTML5のlocalStorageの使い方のまとめ

Posted at June 9,2014 12:55 AM
Tag:[HTML5, localStorage]

HTML5のlocalStorageの使い方のまとめです。

ここではlocalStorageを使った文字列の保存・取得方法に加え、オブジェクトのデータの保存・取得方法についても説明します。

記事の最後にサンプルも掲載しています。

1.localStorageとは

localStorageは、cookieのようにデータをブラウザで永続的に保存できる仕組みで、ブラウザを閉じてもlocalStorageのデータは保存されます。

データは、キーと値の組み合わせで保存されます。

localStorageはwindowsオブジェクトのプロパティなので、正しくは「window.localStorage」ですが、「window.」は省略して実装することができます。

2.localStorageにデータを設定する

localStorageにデータを設定するには、setItem()を利用します。

localStorage.setItem(key, value);

たとえばキーが「foo」、値が「hoge」の場合、

localStorage.setItem("foo", "hoge");

と記述します。

setItem()を利用しない方法も可能です。前述のキーと値の場合、

localStorage[foo]="hoge";
localStorage.foo="hoge";

と書くこともできます。ただしブラウザによっては動作しない可能性があります。

3.localStorageからデータを取得する

localStorageからデータを取得するには、getItem()を利用します。

var value = localStorage.getItem(key);

たとえばキーが「foo」の場合、

var value = localStorage.setItem("foo");

と記述します。

getItem()を利用しない方法も可能です。前述のキーの場合、

var value = localStorage[foo];
var value = localStorage.foo;

と書くこともできます。ただしブラウザによっては動作しない可能性があります。

4.データを削除する

localStorageからデータを削除するには、removeItem()を利用します。

var value = localStorage.removeItem(key);

たとえばキーが「foo」の場合、

var value = localStorage.removeItem("foo");

と記述します。

5.データをすべて削除する

localStorageのデータをすべて削除するには、clear()を利用します。

localStorage.clear();

6.オブジェクトを一意のキーで保存する

localStorageはオブジェクトを保存することも可能ですが、オブジェクトを保存する場合は文字列に一旦変換してから保存することになります。

ここではオブジェクトとしてJSONデータを扱ってみます。

次のようなJSONデータがあるとします。

var obj = {
    foo: 'aaa',
    bar: 'bbb',
    hoge: 'ccc'
};

このデータを保存するには、JSON.stringify()を利用します。

var str = JSON.stringify(obj);
localStorage.setItem("test", str);

JSON.stringify()は、JSON形式のデータを文字列に変換するためのメソッドです。

7.JSONデータを取得する

保存したJSONにデータを取得するには、getItem()で取得した文字列データをJSON形式に戻す必要があります。

JSON形式に戻すには、JSON.parse()を利用します。

var str = localStorage.getItem("test");
var obj = JSON.parse(str);

JSON.parse()は文字列をJSON形式に変換するためのメソッドです。

parse()の代わりにeval()でも可能なようです。

var obj = eval('(' + str + ')');

戻したデータに追加するには、次のようにすればOKです。

obj[fuga] = "ddd";

JSONに限らず、オブジェクトを保存する場合は文字列に変換する必要があります。

たとえばDateオブジェクトであれば、toString()で文字列に変換してから保存します。

var date = new Date();
localStorage.setItem("test", date.toString());

8.サンプル

localStorageにJSON形式のデータを保存する、簡単なサンプルを掲載しておきます。

HTML

<script src="jquery-2.1.1.min.js"></script>
<script src="sample.js"></script>
key: <input id="key" type="text"" />
value: <input id="value" type="text"" />
<input id="put" type="submit" value="Put" />
<input id="remove" type="submit" value="Remove" />
<div id="result"></div>

JavaScript

// localStorageのキー
var key = "test";  
 
// JSONデータ(初期値)
var obj = {
    foo: 'aaa',
    bar: 'bbb',
    hoge: 'ccc'
};
 
// localStorageに保存したデータの表示
var showStorage = function() {
    $('#result').empty();
    var obj = getObject();
    for(var key in obj){
        $('#result').append('<p>' + key + ':' + obj[key] + '<p>');
    }
};
 
// localStorageの文字列をJSONで取得
var getObject = function() {
    var str = localStorage.getItem(key);
    return JSON.parse(str);
};
 
// JSONを文字列でlocalStorageに保存
var setObject = function(obj) {
    var str = JSON.stringify(obj);
    localStorage.setItem(key, str);
};
 
$(function(){
 
    // キーと値の追加
    $('#put').click(function() {
        var key = $('#key').val();
        var value = $('#value').val();
        var obj = getObject();
        if (!obj) {
            obj = new Object();
        }
        obj[key] = value;
        setObject(obj);
        showStorage();
    });
 
    // キーで指定した値の削除
    $('#remove').click(function() {
        var key = $('#key').val();
        var obj = getObject();
        if (obj) {
            delete obj[key];
            setObject(obj);
            showStorage();
        }
    });
 
    // データの全削除
    $('#clear').click(function() {
        localStorage.clear();
        showStorage();
    });
 
    // 初期値をlocalStorageに保存(初回ロード時のみ)
    var data = getObject();
    if (!data) {
        setObject(obj);
    }
 
    // データの表示
    showStorage();
});

全削除後の追加や存在しないキー指定の削除でとエラーにならないよう、変数objの判定も加えています。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)