HTML5ガイド-5。ウェブストレージを使用して、キー価値のペアのデータを保存します

著者：Eve Cole 更新時間：2025-04-11 13:00:04

このレッスンの内容は、Webストレージを導入することです。これは、ブラウザにキー価値ペアのデータを保存するために使用します。機能的には以前のCookieと同じですが、より優れており、保存されたデータが大きくなる可能性があります。 Webストレージには、視認性とライフサイクルが異なることを除いて、同じ実装メカニズムを使用するローカルストレージとセッションストレージの2つのタイプがあります。

1.ローカルストレージを使用します

LocalStorageオブジェクトを使用して、キー価値ペアのデータを保存するために使用されるストレージオブジェクトを返すローカルストレージにアクセスします。次の特性と方法があります。

clear（）：キー値ペアデータを明確に保存します。

getItem（<key>）：keyを介して値を取得します。

key（<index>）：インデックスを介してキー値を取得します。

長さ：キー価値のペアの数を返します。

removeItem（<key>）：キーを介して指定されたデータを削除します。

setItem（<key>、<value>）：キー値ペアを追加します。指定されたキーのキー価値ペアが存在すると、更新操作が実装されます。

[<key>]：キーを使用して、配列subscriptを介して指定された値を取得します。

ストレージオブジェクトを使用すると、キー価値ペアデータを文字列の形式で保存できます。キーは一意です。つまり、setItemメソッドを使用してキー値ペアを追加すると、キー値が既に存在する場合、更新操作が実装されます。次の例を見てみましょう。

<！doctype html>

<html>

<head>

<style>

ボディ> *{float：左;}

表{境界線崩壊：崩壊;マージン左：50px;}

th、td {padding：4px;}

th {text-align：right;}

input {border：thin solid black; padding：2px;}

ラベル{min-width：50px; display：inline-block; text-align：right;}

#countmsg、#buttons {margin-left：50px; margin-top：5px; margin-bottom：5px;}

</style>

</head>

<body>

<div>

<div>

<ボタンID = "add"> add </button>

<ボタンID = "clear"> clear </button>

</div>

<p id = "countmsg"> <span id = "count"> </span>アイテム</p>があります

</div>

<表ID = "データ">

<tr>

<th>アイテム数：</th>

</tr>

</table>

<スクリプト>

displayData（）;

var bottons = document.getElementsByTagname（ 'Button'）;

for（var i = 0; i <bottons.length; i ++）{

ボタン[i] .onclick = handlebuttonpress;

}

function handlebuttonpress（e）{

switch（e.target.id）{

ケース「追加」：

var key = document.getElementById（ 'key'）。value;

var value = document.getElementById（ 'value'）。value;

localStorage.setItem（key、value）;

壊す;

ケース「クリア」：

localstorage.clear（）;

壊す;

}

displayData（）;

}

関数displaydata（）{

var tableElement = document.getElementById（ 'data'）;

tableElement.innerhtml = '';

var itemcount = localstorage.length;

document.getElementById（ 'count'）。innerhtml = itemcount;

for（var i = 0; i <itemcount; i ++）{

var key = localstorage.key（i）;

var val = localstorage.getitem（key）;

tableElement.innerhtml + = '<tr> <th>' + key + '：</th> <td>' + val + '</td> </tr>';

}

</script>

</body>

</html>

実行中の結果を見てみましょう：

ブラウザは、ユーザーが削除しない限り、LocalStorageを介して作成したデータを削除することはできません。

2。ストレージイベントを聞いてください

ローカルストレージを介して保存されているデータは、同じオリジナルの文書に表示されます。たとえば、2つのChromeブラウザを開いて同じURLアドレスにアクセスすると、任意のページで作成されたローカルストレージも他のページに表示されます。ただし、別のブラウザ（Firefoxなど）で同じURLアドレスを開くと、さまざまなソースがあるため、ローカルストレージは見えません。ストレージイベントは、ストレージコンテンツの変更を聞くために使用されます。どのプロパティが含まれているかを見てみましょう。

キー：変更されたキー値を返します。

OldValue：キー値を変更する前に値を返します。

NewValue：キー値が変更された新しい値を返します。

URL：変更されたURLアドレス。

Storagearea：変更されたストレージオブジェクト（ローカルストレージまたはセッションストレージ）を返します。

以下の例を見てみましょう。

<！doctype html>

<html>

<head>

<title>ストレージ</title>

<style>

テーブル{境界線崩壊：崩壊;}

th、td {padding：4px;}

</style>

</head>

<body>

<表ID = "データ">

<tr>

<th> oldvalue </th>

<th> newValue </th>

<th> storagearea </th>

</tr>

</table>

<スクリプト>

var tableElement = document.getElementById（ 'data'）;

window.onstorage = function（e）{

var row = '<tr>';

row + = '<td>' + e.key + '</td>';

row + = '<td>' + e.olevalue + '</td>';

row + = '<td>' + e.newvalue + '</td>';

row + = '<td>' + e.url + '</td>';

row + = '<td>' +（e.storagearea == localstorage） + '</td> </tr>';

tableElement.innerhtml += row;

}

</script>

</body>

</html>

例1では、ストレージデータを追加、削除、変更し、例2ページに表示されます。例2は通常、Chromeブラウザで実行され、Firefoxは応答しません。他のブラウザはテストしません。

実行結果：

3.セッションストレージを使用します

セッションストレージは、使用中のローカルストレージと同じですが、そのアクセシビリティは現在のページに制限されており、ページが閉じた後に消えます。 SessionStorageを介してアクセスします。

<！doctype html>

<html>

<head>

<style>

ボディ> *{float：左;}

表{境界線崩壊：崩壊;マージン左：50px;}

th、td {padding：4px;}

th {text-align：right;}

input {border：thin solid black; padding：2px;}

ラベル{min-width：50px; display：inline-block; text-align：right;}

#countmsg、#buttons {margin-left：50px; margin-top：5px; margin-bottom：5px;}

</style>

</head>

<body>

<div>

<div>

<ボタンID = "add"> add </button>

<ボタンID = "clear"> clear </button>

</div>

<p id = "countmsg"> <span id = "count"> </span>アイテム</p>があります

</div>

<表ID = "データ">

<tr>

<th>アイテム数：</th>

</tr>

</table>

<スクリプト>

displayData（）;

var bottons = document.getElementsByTagname（ "ボタン"）;

for（var i = 0; i <bottons.length; i ++）{

ボタン[i] .onclick = handlebuttonpress;

}

function handlebuttonpress（e）{

switch（e.target.id）{

ケース「追加」：

var key = document.getElementById（ "key"）。value;

var value = document.getElementById（ "value"）。value;

sessionstorage.setItem（key、value）;

壊す;

ケース「クリア」：

sessionstorage.clear（）;

壊す;

}

displayData（）;

}

関数displaydata（）{

var tableElement = document.getElementById（ 'data'）;

tableElement.innerhtml = '';

var itemcount = sessionstorage.length;

document.getElementById（ 'count'）。innerhtml = itemcount;

for（var i = 0; i <itemcount; i ++）{

var key = sessionstorage.key（i）;

var val = sessionstorage.getitem（key）;

tableElement.innerhtml + = "<tr> <th>" + key + "：</th> <td>" + val + "</td> </tr>";

}

</script>

</body>

</html>

ランニング効果：

例3で変更を加えると、例2のページは変更されません。

要約：

SessionStorageは、ローカルでセッションにデータを保存するために使用されます。これは、同じセッションのページでのみアクセスでき、セッションが終了した後にデータは破棄されます。したがって、SessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージのみです。

LocalStorageは永続的なローカルストレージに使用され、データが積極的に削除されない限り、データは決して期限切れになりません。

WebストレージとCookieの違い：Webストレージの概念はCookieに似ています。違いは、より大きな容量ストレージ用に設計されていることです。 Cookieのサイズは限られており、新しいページをリクエストするたびにCookieが送信され、目に見えないほど帯域幅が廃棄されます。さらに、Cookieを指定する必要があり、ドメイン全体で呼び出すことはできません。さらに、Webストレージには、setitem、getItem、removeItem、clear、およびその他の方法があります。 Cookieとは異なり、フロントエンドの開発者はSetCookiesとGetCookies自身をカプセル化する必要があります。また、Webストレージの各ドメイン（サブドメインを含む）には独立したストレージスペースがあり、各ストレージスペースは完全に独立しているため、データの混乱を引き起こしません。

ただし、Cookieも不可欠です。Cookieの機能はサーバーと対話し、HTTP仕様の一部として存在することであり、Webストレージはデータをローカルに保存するためにのみ作成されます。

ソースコードのダウンロード