小粋空間  -  a cheap joke and a play on words site

HTML5のlocalStorageの使い方のまとめ

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

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

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

１．localStorageとは

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

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

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

２．localStorageにデータを設定する

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

localStorage.setItem(key, value);

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

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

と記述します。

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

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

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

３．localStorageからデータを取得する

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

var value = localStorage.getItem(key);

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

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

と記述します。

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

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

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

４．データを削除する

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

var value = localStorage.removeItem(key);

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

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

と記述します。

５．データをすべて削除する

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

localStorage.clear();

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

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形式のデータを文字列に変換するためのメソッドです。

７．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());

８．サンプル

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の判定も加えています。