JavaScript

Web Storageの使い方

はじめに

JavaScriptで扱うデータを手軽に永続化させるためのインターフェースであるWeb Storageの使い方の基礎について説明します。

従来用いられていたCookieは容量が小さい(4KB程度)ため、現在では容量が大きい(5MB程度)Web Storageの方が利用されています。

Web Storage

Web Storageはブラウザ側でKey-Value形式でデータを保存することが可能です。

Web Storageの実体はグローバルオブジェクトに定義されているlocalStorageとsessionStorageという2種類のオブジェクトです。

これらのオブジェクトに対して通常のオブジェクトと同様にプロパティを書き込むことで、データはページを遷移しても保存され続けます。

localStorageは意図的に消さない限りデータは残り続けます。sessionStorageは同一セッション内でのみデータが残ります。

読み書き

データの保存にはsetItemメソッド、データの参照にはgetItemメソッドを用います。

// 次の3つは等価
localStorage.setItem('apple', '200');
localStorage.apple = '200';
localStorage['apple'] = '200';

// 次の3つも等価
var data = localStorage.getItem('apple');
var data = localStorage.apple;
var data = localStorage['apple'];

削除

// 次の3つは等価
localStorage.removeItem('apple');
delete localStorage.apple;
delete localStorage['apple'];

一括削除

localStorage.clear();

データの列挙

for (var i = 0; i < localStorage.length; ++i) {
    var key = localStorage.key(i);
    var value = localStorage[key];

簡単なアプリ

keyとvalueを指定してsaveするとlocalStorageに保存され、tableとして表示されるアプリです。
keyを指定してdeleteするとlocalStorageから削除されます。

注意点としては、script.jsでSERVICE_NAMEという名前の上にデータを保存しています。これはデータ内のプロパティ名の汚染を防ぐためのnamespaceです。

またlocalStorageを読み書きしているのは、ページを開く時と閉じる時です。

ページを開いている間はstorageという変数にキャッシュしています。

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta lang='ja'>

        <link rel='stylesheet' href='style.css'>
        <script src='script.js'></script>

        <title></title>
    </head>
    <body>
        <div>
            <table>
                <tr><td>key</td><td><input id='key'></td></tr>
                <tr><td>value</td><td><input id='value'></td></tr>
            </table>
            <button onclick='save()'>Save</button>
            <button onclick='del()'>Delete</button>
        </div>


        <div>
            <table id='list' border='1' cellspacing='0' cellpadding='10'>
                <tr><th>key</th><th>value</th></tr>
            </table>
        </div>
    </body>
</html>
script.js
var SERVICE_NAME = 'SERVICE_NAME';
var storage = null;

window.onload = function() {
    try {
        storage = JSON.parse(localStorage[SERVICE_NAME] || '{}');
    } catch(e) {
        storage = {};
    }

    show();
}

window.onbeforeunload = function() {
    localStorage[SERVICE_NAME] = JSON.stringify(storage);
}

function save() {
    var key = document.getElementById('key').value;
    var value = document.getElementById('value').value;

    if (key && value) {
        storage[key] = value;
    }

    window.location.reload();
}

function del() {
    var key = document.getElementById('key').value;
    if (key) {
        delete storage[key];
    }

    window.location.reload();
}

function show() {
    var listElement = document.getElementById('list');

    for (var key in storage) {

        var trElement = document.createElement('tr');
        var keyElement = document.createElement('td');
        keyElement.textContent = key;
        var valueElement = document.createElement('td');
        valueElement.textContent = storage[key];

        listElement.appendChild(trElement);
        trElement.appendChild(keyElement);
        trElement.appendChild(valueElement);
    }
}
style.css
input {
    display: inline;
}

div {
    margin: 10px;
}