【JavaScript】Web Storage の使い方

ユーザーのローカルにデータが保存できるWeb Storageを使ってみます。

Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みです。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。 Web Storageを利用すると、ユーザーごとにカスタマイズされた情報を提供することが可能となります。 この仕組みはクッキー（HTTP cookie）とよく似ていますが、クッキーに比べて保存できる容量が大きいため、 例えば、オフラインでもウェブアプリケーションを動作させられるだけの必要十分なデータをユーザーのローカル環境に保存することなどが可能となります。

HTMLクイックリファレンス

Web Storageは二種類

Web StorageはlocalStorageとsessionStorageの二種類があります。

Web Storageを使用する上での注意点

• 保存容量が1オリジン当たり5MBまで。
• 全て文字列として保存されるため、数値を利用する場合は取得時に変換が必要。
• スマホなどプライベートモードでは利用できない。

Web Storageの基本的な使い方

利用可否、保存、取得、削除などの基本的な使い方を簡単にまとめます。

Web Storageが利用可能か調べる

ユーザーがCookieの受け入れを拒否していたり、スマホでプライベートモードを有効にしている場合、Web Storageが利用できません。ですので、最初にユーザーのWeb Storage利用可否をチェックします。

if (localStorage) {
    // 処理
}

または

try {
    localStorage.setItem('_test', 0);
    localStorage.removeItem('_test');
    // 処理       
} catch(e) {
    alert(e);
}

Storageを変数へ

localStorageで運用していたものをsessionStorageへ変更した場合などに発生する、書き直し手間や修正ミスを防ぐため、最初に変数へ退避させます。

var st = localStorage; // もしくは sessionStorage
st.test = 'test';

以下、上記の設定をした上でのコードとなります。

保存

st.setItem('test', 'test');
st.test = 'test';
st['test'] = 'test';

取得

// 個別取得
st.getItem('test'); // 存在しなければ null
st.test;            // 存在しなければ undefined
st['test'];         // 存在しなければ undefined

// 全て取得
for (var key in st) {
    st[key];
}

for (var i = 0, len = st.length; i < len; i++) {
    var k = st.key(i);
    st.getItem(k);
}

削除

// 個別削除
st.removeItem('test');
delete st.test;

// 全て削除（同オリジンのストレージ全てが削除されるので注意）
st.clear();

オブジェクトの扱い

現在、ストレージへの保存は文字列のみであり、配列やオブジェクトの保存ができません。保存するためにはJSON文字列へと変換する必要があります。

var obj = {name: '山田', age: '30'};

// 保存
st.setItem('test', JSON.stringify(obj));

// 取得
var test = JSON.parse(st.getItem('test'));

localStorageで有効期限を設定する

応用編としてlocalStorageに有効期限を設定し、Cookie的な使い方をしてみます。Cookieと比較して保存容量が多くHTTP通信が発生しない利点があります。

以下、24時間有効なオブジェクトをlocalStorageへ保存するためのコードです。

var obj = {
    name: '山田',
    age: 30
};

try {
    localStorage.setItem('_test', 0);
    localStorage.removeItem('_test');

    setStorage('test', obj, 60 * 60 * 24);
    var test = getStorage('test');

    if (test !== undefined) {
        for (var key in test) {
            alert(key + ':' + test[key]); // name:山田 age:30
        }
    }
} catch(e) {
    alert(e);
}

function setStorage(key, value, expire)
{
    expire = expire === undefined ? false: (new Date).getTime() + expire * 1000;
    var data = {
        expire: expire,
        value:  value
    };
    localStorage.setItem(key, JSON.stringify(data));
}

function getStorage(key)
{
    var st = localStorage[key];
    if (st === undefined) {
        return undefined;
    }
    st = JSON.parse(st);
    if (st.expire === false || st.expire > (new Date).getTime()) {
        return st.value;
    } else {
        localStorage.removeItem(key);
        return undefined;
    }
}