Help us understand the problem. What is going on with this article?

Web Storageの使い方

More than 1 year has passed since last update.

はじめに

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;
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした