ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 ガイド-5. Web ストレージを使用してキーと値のペアを保存する_html5 チュートリアルのヒント
HTML5 ガイド-5. Web ストレージを使用してキーと値のペアを保存する_html5 チュートリアルのヒント
- WBOYオリジナル
- 2016-05-16 15:50:192136ブラウズ
このレッスンの内容は、キーと値のペアのデータをブラウザーに保存するために使用される Web ストレージを紹介することです。Web ストレージは以前の Cookie と同様に機能しますが、より優れたものであり、より大きなデータを保存できます。 Web ストレージにはローカル ストレージとセッション ストレージの 2 種類があり、同じ実装メカニズムを使用しますが、可視性とライフサイクルが異なります。
1. ローカル ストレージを使用します
ローカル ストレージにアクセスするには、Storage オブジェクトを使用します。ストレージには、次のプロパティがあります。メソッド:
clear(): 保存されたキーと値のペアのデータをクリアします。
getItem(
key(
length: キーと値のペアの数を返します。
removeItem(
[
Storage オブジェクトを使用すると、キーと値のペアのデータを文字列の形式で保存できます。つまり、setItem メソッドを使用してキーと値のペアを追加すると、キーと値のペアがすでに存在する場合は、それが保存されます。運用が更新されます。次の例を見てみましょう:
コードをコピーしますコードは次のとおりです:
< !DOCTYPE>
;
;
;値:
| アイテム数: |
|---|
<script> <br>var button = document.getElementsByTagName('button'); <br>for (var i = 0; i <br> ; i ) { <br>buttons[i].onclick = handleButtonPress; <br>} <br>function handleButtonPress(e) { <br>switch (e.target.id) { <br>case 'add': <br>var key = document.getElementById('key').value; <br>var value = document.getElementById('value').value; <br>localStorage.setItem(key, value); <br>case 'clear': <br>localStorage.clear(); <br>break; <br>} <br>function displayData(); = document.getElementById ('data'); <br>tableElement.innerHTML = ''; <br>var itemCount = localStorage.length; <br>document.getElementById('count').innerHTML = <br> (var i = 0; i < itemCount; i ) { <br />var key = localStorage.key(i); <br />var val = localStorage.getItem(key); <br />tableElement.innerHTML = '< tr><br />' キー ':</th><td>' '<br />} <br />} <br /> <br /><br /><br /><br /><strong>実行結果を見てみましょう</strong>: <br /> <p><img alt="" src="http://files.jb51.net/file_images/article/201301/201301071600355.png" /></p> <br />ユーザーが削除しない限り、ブラウザーは localStorage を通じて作成したデータを削除できません。 <br /><strong>2. ストレージ イベントをリッスンする </strong> <br />たとえば、2 つの Chrome ブラウザを開いて同じ URL アドレスにアクセスすると、ローカル ストレージに保存されたデータが表示されます。ページ ページ上で作成されたローカル ストレージは、別のページからも参照できます。ただし、別のブラウザ (Firefox など) を使用して同じ URL アドレスを開いた場合、ソースが異なるため、ローカル ストレージは表示されません。 Storage イベントは、ストレージ コンテンツの変更を監視するために使用されます。 <br />key: 変更されたキー値を返します。 <br />newValue: キー値が変更される前の値を返します。 : 変更されたキー値の新しい値を返します。<br />url: 変更された URL アドレスを返します。<br />storageArea: 変更されたストレージ オブジェクト (ローカル ストレージまたはセッション ストレージ) を返します。 <br />以下の例を見てみましょう: <br /><br /><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode116'));">コードをコピーします<u></u></span>コードは次のとおりです:</div></div> <div class="msgborder" id="phpcode116"> <!DOCTYPE HTML> <br><head> <br><style> -collapse: 折りたたむ; } <br>th, td{padding: 4px;} <br></head> <br><body> data" border=" 1"> <br><tr> <br><th>key</th> <br><th>oldValue</th> <br><th>newValue</ th> <br> <th>th> <br></th> <br></table> 🎜>var tableElement = document.getElementById('data'); <br>window.onstorage = function (e) { <br>var row = '<tr>''; <br>row = '<td>' e.key '</td>'; <br>row = '<td>' e.oleValue '</td>'; <br>row = '<td>' /td>'; <br>行 = '<td>' e.url '</td>'; (e.storageArea == localStorage) td></tr>; <br>tableElement.innerHTML = row; <br></body> <br></html> 🎜><br> 例 1 でストレージを追加、削除、および変更したデータは、例 2 ページに表示されます。例 2 は Chrome ブラウザでは正常に実行されますが、Firefox は応答しません。他のブラウザはテストされていません。 <br><br>実行結果<br>: <br> <br><br><br> <br>3. セッション ストレージを使用する <br>セッション ストレージはローカル ストレージと同じように使用されますが、アクセスが現在のページに限定されており、ページが閉じられるとセッション ストレージにアクセスされます。 <br><br><br><br><br>コードをコピーします<strong></strong><br>コードは次のとおりです:<p></p> <div class="msgborder" id="phpcode117"> <br><!DOCTYPE HTML> <br> <br> <br><title>例</title> <br> <br>本体> *{float: left;} <br>table{border-collapse: Collapse;margin-left: 50px;} <br>th, td{padding: 4px;} <br>th{text-align: right;} <br>input{border: 薄い黒の実体;padding: 2px;} <br>label{min-width: 50px;display: inline-block;text-align: right;} <br>#countmsg, #buttons{margin-左: 50px;マージン-上: 5px;マージン-下: 5px;} <br></style> <br></head> <br> <br><div> <br><div> <br><label>キー:</label><input id="key" placeholder="Enter Key" /></div> <br><div> <br><label>値:</label><input id="value" placeholder="値を入力" /></div> <br><div id="ボタン"> <br><button id="add">追加</button> <br><button id="clear">Clear</button> <br> </div> <br><p id="countmsg"><span id="count"></span>項目</p>があります。 <br> </div> <br><table id="data" border="1"> <br><tr> <br><th>アイテム数:</th> <br><td id="count">-</td> <br></tr> <br></table> <br><iframe src="storage.html" width="500" height="175"></iframe> <br> <br>displayData(); <br>var button = document.getElementsByTagName("button"); <br>for (var i = 0; i <buttons.length i></buttons.length>buttons[i].onclick = handleButtonPress; <br>} <br>function handleButtonPress(e) { <br>switch (e.target.id) { <br>case 'add': <br>var key = document.getElementById("key").value; <br>var value = document.getElementById("value").value; <br>sessionStorage.setItem(キー, 値); <br>休憩; <br>ケース 'クリア': <br>sessionStorage.clear(); <br>休憩; <br>} <br>displayData(); <br>} <br>function displayData() { <br>var tableElement = document.getElementById('data'); <br>tableElement.innerHTML = ''; <br>var itemCount = sessionStorage.length; <br>document.getElementById('count').innerHTML = itemCount; <br>for (var i = 0; i <itemcount i></itemcount>var key = sessionStorage.key(i); <br>var val = sessionStorage.getItem(key); <br>tableElement.innerHTML = "<tr><th>" キー「:</th><td>」 val "</td></tr>"; <br>} <br>} <br></script>
运行效果：
例 3 では何らかの変更が行われ、例 2 のトップ面は変更されません。これらのデータは同じセッション内のローカル ストレージにのみ存在し、セッション終了後のデータも保存されます。したがって、ローカル ストレージは長期化されたセッションのストレージとして使用されます。
Web ストレージと Cookie の領域: Web ストレージの概念と Cookie に似ており、領域の容量は、より多くのデータを保存するためのものです。Cookie のサイズこれは制限されており、新しいページを要求するたびに Cookie シティが送信され、無形式でバンドルが浪費され、さらに Cookie は有効なドメインを指定する必要があり、ドメインを越えて使用することはできません。 setItem、getItem、removeItem、clear などのメソッドがあり、Cookie はフロントエンド発行者自身で setCookie をカプセル化する必要があります。また、Web ストレージには各ドメイン (子ドメインを含む) ごとに独立した保存空間があり、それぞれの保存空間は完全に独立しています。 ただし、Cookie も不可能または強力です。Cookie の機能は、HTTP 認証の一部として存在し、サーバーと通信することですが、Web ストレージは単にデータをローカルに「保存」するためのものです。
ソースコードダウンロード