English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 基本教程

HTML5 API

HTML5 メディア

HTML5 グラフィックス

HTML5 クライアントストレージ

HTML5 クライアントストレージは、cookieよりも良いローカルストレージ方法です。HTMLを使用して5ユーザーのブラウジングデータをローカルに保存できます。

HTMLとは何ですか？5 Webクライアントストレージ？

HTMLを使用して5ユーザーのブラウジングデータをローカルに保存できます。

少し前には、ローカルストレージはcookieを使用していました。しかし、Webストレージはより安全で速くする必要がありました。これらのデータはサーバー上に保存されませんが、これらのデータはユーザーがウェブサイトのデータをリクエストする際にのみ使用されます。また、サイトのパフォーマンスに影響を与えずに大量のデータを保存することもできます。

データはキーで保存されます。/値対が存在し、webページのデータはそのページのみがアクセスおよび使用を許可されます。

ブラウザのサポート

Internet Explorer 8+, Firefox, Opera, Chrome, そしてSafariはWebストレージをサポートしています。

注意： Internet Explorer 7 及び以前のIEバージョンではwebストレージはサポートされていません。

localStorageとsessionStorage　

クライアント側でデータを保存するための2つのオブジェクトは：

  • localStorage - 整个サイトのデータを長期保存するために使用され、保存されたデータには期限がなく、手動で削除するまで保存されます。

  • sessionStorage - 同一のウィンドウ（またはタブ）で一時的にデータを保存し、ウィンドウやタブを閉じるとデータが削除されます。

webストレージを使用する前に、ブラウザがlocalStorageとsessionStorageをサポートしているか確認する必要があります：

if(typeof(Storage)!=="undefined")
{
　　　　//　はい！localStorageとsessionStorageオブジェクトはサポートされています。
　　　　//　一部のコード...
} else {
　　　　//　申し訳ありません！webストレージはサポートされていません。
}

localStorageオブジェクト

localStorageオブジェクトに保存されたデータには時間制限はありません。次の日に、次の週、または来年でもデータは利用可能です。

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎トレーニングウェブ(oldtoolbag.com)</title>　
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "基础教程网";
　　document.getElementById("result").innerHTML = "サイト名："　+　localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="申し訳ありません、あなたのブラウザはwebストレージをサポートしていません";
}
</script>
</body>
</html>
テストを見てみる ‹/›

例解：

  • key="sitename"とvalue="基础教程网"を使用してlocalStorageのキーを作成します。/値対。

  • キー値が"sitename"の値を検索し、id="result"の要素にデータを挿入します。

上記の例はこんな感じでも書けます：

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎トレーニングウェブ(oldtoolbag.com)</title>　
</head>
<body>
<script>
//　保存
localStorage.sitename = "基础教程网";
//　検索
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>
テストを見てみる ‹/›

localStorageから"sitename"を削除します：

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎トレーニングウェブ(oldtoolbag.com)</title>　
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>
テストを見てみる ‹/›

localStorageもsessionStorageも、使用できるAPIは同じです。よく使われるものには以下のようなものがあります（localStorageを例に取ります）:

  • データを保存：localStorage.setItem(key,value);

  • データを読み取る：localStorage.getItem(key);

  • 単一のデータを削除：localStorage.removeItem(key);

  • すべてのデータを削除：localStorage.clear();

  • 特定のインデックスのキーを取得：localStorage.key(index);

ヒント: キー/値は通常文字列で保存されますが、必要に応じてこの形式を変換できます。

以下の例は、ユーザーがボタンをクリックした回数を示しています。

コード内の文字列値を数字类型に変換:

!DOCTYPE　html
<html>
<head>
<meta　charset="utf-8">　
<title>基礎トレーニングウェブ(oldtoolbag.com)</title>　　　　　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(localStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="あなたはボタンをクリックしました"　+　localStorage.clickcount　+　「回数　」;
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="申し訳ありません、あなたのブラウザはwebストレージをサポートしていません";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">クリックして！</button></p>
<div id="result"></div>
<p>このボタンをクリックしてカウンタの増加を確認してください。</p>
<p>ブラウザのタブ（またはウィンドウ）を閉じ、このページを再び開くと、カウンタはカウントを続けます（リセットされません）。</p>
</body>
</html>
テストを見てみる ‹/›

sessionStorageオブジェクト

sessionStorageメソッドは、セッションごとにデータをストレージします。ユーザーがブラウザのウィンドウを閉じると、データが削除されます。

sessionStorageをどう作成し、アクセスするか：

!DOCTYPE　html
<html>
<head>
<meta　charset="utf-8">　
<title>基礎トレーニングウェブ(oldtoolbag.com)</title>　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(sessionStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="このセッションであなたはこのボタンをクリックしたことがあります"　+　sessionStorage.clickcount　+　「回数　」;
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="申し訳ありません、ブラウザはwebストレージをサポートしていません";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">クリックして！</button></p>
<div id="result"></div>
<p>このボタンをクリックしてカウンタの増加を確認してください。</p>
<p>ブラウザのタブ（またはウィンドウ）を閉じ、このページを再び開くと、カウンタがリセットされます。</p>
</body>
</html>
テストを見てみる ‹/›

Web Storageでシンプルなウェブサイトリストプログラムを開発します

ウェブサイトリストプログラムは以下の機能を実現します：

  • ウェブサイト名、URLを入力して、ウェブサイト名をキーとしてlocalStorageに保存できます；

  • ウェブサイト名に基づいてURLを検索します；

  • 現在保存されているすべてのウェブサイトをリストアップします；

以下のコードはデータの保存と検索に使用されます：

save() と find() メソッド

//データを保存　　
function save(){　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, siteurl);
　　　　alert("追加成功");
}
//データを検索　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var sitename = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");　　
　　　　find_result.innerHTML = search_site　+　"のURLは："　+　sitename;　　
}

以下に完全な例を示します：

!DOCTYPE　html
<html>　　
<head>　　
　　　　<meta　charset="utf-8">　　
　　　　<title>HTML5ローカルストレージのWeb　Storage編</title>　　
</head>　　
<body>　　
　　　　<div　style="border:　2px　dashed　#ccc;width:320px;text-align:center;">　　　　　
　　　　　　　　<label for="sitename">ウェブサイト名(key)：</label>　　
　　　　　　　　<input　type="text"　id="sitename"　name="sitename"　class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">URL(value)：</label>　　
　　　　　　　　<input　type="text"　id="siteurl"　name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input　type="button"　onclick="save()"　value="新規記録を追加"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">ウェブサイト名を入力してください：</label>　　
　　　　　　　　<input　type="text"　id="search_site"　name="search_site"/>}}　　
　　　　　　　　<input　type="button"　onclick="find()"　value="検索ウェブサイト"/>}}　　
　　　　　　　　<p　id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//　localStorageに保存されているすべてのデータを読み込みます
　　　　loadAll();　　　　　
　　　　　　　　
　　　　//データを保存　　
　　　　function save(){　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, siteurl);
　　　　　　　　alert("追加成功");
　　　　}
　　　　//データを検索　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var siteurl = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");　　
　　　　　　　　find_result.innerHTML = search_site　+　"のURLは："　+　siteurl;　　
　　　　}
　　　　//localStorageに保存されているすべてのオブジェクトを抽出し、画面に表示します。
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>key</td><td>value</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　　
　　　　　　　　　　　　　　　　var sitename = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var siteurl = localStorage.getItem(sitename);　　
　　　　　　　　　　　　　　　　result　+= "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+= "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML　=　"データが空……";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>
テストを見てみる ‹/›

実現効果のスクリーンショット：

この例は、localStorageの簡単な保存と検索を示していますが、多くの場合、保存するデータはもっと複雑です。

次に、JSON.stringify を使用してオブジェクトデータを保存します。JSON.stringify はオブジェクトを文字列に変換できます。

var site = new Object;
...
var str = JSON.stringify(site);　//　オブジェクトを文字列に変換します。

次に、JSON.parse メソッドを使用して文字列を JSON オブジェクトに変換します：

var site = JSON.parse(str);

JavaScript 実現コード：

save() と find() メソッド

//データを保存　　
function save(){　　
　　　　var site = new Object;
　　　　site.keyname = document.getElementById("keyname").value;
　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　var str = JSON.stringify(site);　//　オブジェクトを文字列に変換します。
　　　　localStorage.setItem(site.keyname,str);　　
　　　　alert("保存成功");
}　　
//データを検索　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var str = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");
　　　　var site = JSON.parse(str);　　
　　　　find_result.innerHTML = search_site　+　「のウェブサイト名は："　+　site.sitename　+　「、ウェブサイトアドレスは："　+　site.siteurl;　　
}

以下に完全な例を示します：

!DOCTYPE　html
<html>　　
<head>　　
　　　　<meta　charset="utf-8">　　
　　　　<title>HTML5ローカルストレージのWeb　Storage編</title>　　
</head>　　
<body>　　
　　　　<div　style="border:　2px　dashed　#ccc;width:320px;text-align:center;">
　　　　　　　　<label　for="keyname">別名（キー）：</label>　　
　　　　　　　　<input　type="text"　id="keyname"　name="keyname"　class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label　for="sitename">ウェブサイト名：</label>　　
　　　　　　　　<input　type="text"　id="sitename"　name="sitename"　class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label　for="siteurl">ウェブサイトのURL：</label>　　
　　　　　　　　<input　type="text"　id="siteurl"　name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input　type="button"　onclick="save()"　value="新規記録を追加"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label　for="search_phone">別名（キー）を入力してください：</label>　　
　　　　　　　　<input　type="text"　id="search_site"　name="search_site"/>}}　　
　　　　　　　　<input　type="button"　onclick="find()"　value="検索ウェブサイト"/>}}　　
　　　　　　　　<p　id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//データを保存　　
　　　　function save(){　　
　　　　　　　　var site = new Object;
　　　　　　　　site.keyname = document.getElementById("keyname").value;
　　　　　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　　　　　var str = JSON.stringify(site);　//　オブジェクトを文字列に変換します。
　　　　　　　　localStorage.setItem(site.keyname,str);　　
　　　　　　　　alert("保存成功");
　　　　}　　
　　　　//データを検索　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var str = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");
　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　find_result.innerHTML = search_site　+　「のウェブサイト名は："　+　site.sitename　+　「、ウェブサイトアドレスは："　+　site.siteurl;　　
　　　　}　　
　　　　
　　　　//localStorageに保存されているすべてのオブジェクトを抽出し、画面に表示します。
　　　　//　保存されたkeynameに対応する値が変換オブジェクトであることを確認してください。さもなければJSON.parseはエラーを報告します。
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>別名</td><td>ウェブサイト名</td><td>ウェブサイトアドレス</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　
　　　　　　　　　　　　　　　　var keyname = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var str = localStorage.getItem(keyname);　　
　　　　　　　　　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　　　　　　　　　result　+= "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+= "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "データが空...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>
テストを見てみる ‹/›

例の loadAll はすべての保存されたデータを出力しました。localStorage に保存されたデータが JSON フォーマットでないと、JSON.parse(str) はエラーを報告します。

出力結果のデモンストレーション：

HTML 5 ローカルデータベースHTML5 セマンティック要素