HTML入門 | HTML5 API | Web Storage

Web Storage API

Web Storage APIは、従来のCookie(cookie)の問題点を克服するために、Webブラウザが直接データ(data)を保存できるようにする。

HTML5以前は、アプリケーションがサーバーにデータを要求するたびに、その情報をCookie(cookie)に保存していた。
しかしWeb Storageは、ユーザー側でより多くの情報を安全に保存できるようにする。
Web Storageは最低5MB以上の大きな領域を持ち、この情報は決してサーバーへ送信されない。

このWeb Storageは、オリジン(origin)ごとに1つだけ存在する。
オリジン(origin)とは、ドメイン(domain)とプロトコル(protocol)の組み合わせで構成される識別子である。
したがって、1つのオリジンに属するすべてのWebページは同じデータ(data)を保存し、同じデータにアクセスできる。

Web Storage APIをサポートする主要Webブラウザのバージョンは次のとおりである。

Web Storage対応の確認

Web Storageを使用する前に、まずユーザーのWebブラウザがこれをサポートしているかどうかを確認する必要がある。

構文

if (typeof(Storage) !== "undefined") {
    // Web Storage用のコード部分
} else {
    // Web Storageをサポートしないブラウザ向けの案内部分
}

Web Storageオブジェクト

Web Storage APIは、ユーザーがデータを保存できるように2つのオブジェクトを提供する。

• sessionStorageオブジェクト: 1つのセッション(session)だけのためのデータを保存するオブジェクト
• localStorageオブジェクト: 保存期限のないデータを保存できるオブジェクト

sessionStorageオブジェクト

sessionStorageオブジェクトは、1つのセッション(session)だけのためのデータを保存する。
したがって、ユーザーがブラウザタブやウィンドウを閉じると、このオブジェクトに保存されたデータは消える。

例

function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount) { 
            sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; 
        } else { 
            sessionStorage.clickcount = 1; 
        }
        document.getElementById("counter").innerHTML = "カウンターの現在回数は " + sessionStorage.clickcount + " です!";
    }
}

localStorageオブジェクト

localStorageオブジェクトは、保存期限のないデータを保存する。 したがって、ブラウザタブやウィンドウが閉じられたり、コンピュータを再起動したりしても、保存されたデータは消えない。

例

function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) { 
            localStorage.clickcount = Number(localStorage.clickcount) + 1; 
        } else { 
            localStorage.clickcount = 1; 
        }
        document.getElementById("counter").innerHTML = "カウンターの現在回数は " + localStorage.clickcount + " です!";
    }
}