Webストレージは、HTML5によって導入された非常に重要な機能です。クライアント側にデータをローカルに保存できます。 HTML4 Cookieに似ていますが、Cookieよりもはるかに強力な機能を実装できます。 Cookieのサイズは4kbに制限されています。 Webストレージの公式は、ウェブサイトごとに5MBを推奨しています。
Webストレージは2つのタイプに分割されます。sessionstorage
LocalStorage
SessionStorageがセッションでデータを保存し、ブラウザが閉じられているという文字通りの意味からはっきりとわかることができます。 LocalStorageは、クライアントのデータをローカルに保持します。
SessionStorageであろうとLocalStorageであろうと、使用できるAPIは同じです。一般的に使用されるものは次のとおりです（LocalStorageを例として取得）：
データの保存：localStorage.setItem（key、value）;
データを読む：localstorage.getitem（key）;
個々のデータを削除する：localStorage.RemoveItem（key）;
すべてのデータを削除：localStorage.clear（）;
特定のインデックスのキーを取得します：localstorage.key（index）;
上記のように、キーと値の両方が文字列でなければなりません。言い換えれば、WebストレージAPIは文字列のみを操作できます。
次に、関連するAPIの使用方法を示すために、Webストレージを介して簡単なアドレス帳アプレットを開発します。次の機能を実装します。
連絡先を入力します。連絡先には、名前と携帯電話番号の2つのフィールドがあり、携帯電話番号を鍵として使用してLocalStorageに保存します。
携帯電話番号に従って所有者を見つけます。
現在保存されているすべての連絡先情報をリストします。
まず、次のように簡単なHTMLページを準備してください。<！doctype html>
<html>
<head>
<Meta charset = "utf-8"/>
<Title> HTML5ローカルストレージWebストレージ記事</title>
</head>
<body>
<div style = "border：2px dashed #ccc; width：320px; text-align：center;">
<label for = "user_name"> name：</label>
<入力型= "text" id = "user_name" name = "user_name"/>
<br/>
<label for = "mobilephone">携帯電話：</label>
<input type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<入力型= "ボタン" onclick = "save（）" value = "add record"/>
<hr/>
<ラベル= "search_phone">携帯電話番号を入力：</label>
<入力型= "text" id = "search_phone" name = "search_phone"/>
<入力型= "button" onclick = "find（）" value = "所有者"/>>
<p id = "find_result"> <br/> </p>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
インターフェイスは次のように表示されます。連絡先を保存するには、次のJSメソッドを単に実装するだけでいいです。
//データを保存します
function save（）{
var mobilephone = document.getElementById（ "Mobilephone"）。value;
var user_name = document.getElementById（ "user_name"）。value;
localStorage.setItem（MobilePhone、user_name）;
}
検索所有者を実装するには、次のJSメソッドが実装されています。//データを見つけます
関数find（）{
var search_phone = document.getElementById（ "search_phone"）。value;
var name = localstorage.getitem（search_phone）;
var find_result = document.getElementById（ "find_result"）;
find_result.innerhtml = search_phone + "の所有者は：" + name;
}
保存されたすべての連絡先情報を表示するには、次のようにlocalStorage.key（index）メソッドを使用する必要があります。
// localStorageに保存されているすべてのオブジェクトを抽出し、インターフェイスに表示します
関数loadall（）{
var list = document.getElementById（ "list"）;
if（localstorage.length> 0）{
var result = "<table border = '1'>";
結果 += "<tr> <td> name </td> <td>携帯電話番号</td> </tr>";
for（var i = 0; i <localstorage.length; i ++）{
var mobilephone = localstorage.key（i）;
var name = localstorage.getitem（mobilephone）;
result+= "<tr> <td>"+name+"</td> <td>"+mobilephone+"</td> </tr>";
}
result += "</table>";
list.innerhtml = result;
}それ以外{
list.innerhtml = "データは現在空です。急いで連絡先の追加を開始します」。
}
}
効果は次のとおりです。
質問：上記のように、2つのフィールド、名前と携帯電話番号のみがあります。会社名、自宅の住所など、より豊かな連絡先情報を預けたい場合は、それを達成する方法は？ Webストレージは文字列のみを処理できませんか？この時点で、JSONのStringify（）メソッドを使用して、複雑なオブジェクトを文字列に変換し、Webストレージに保存できます。 Webストレージから読み取ると、JSONのParse（）メソッドを介してJSONオブジェクトに変換できます。
次の簡単なデモでは、JSコードを保存するための会社の属性を追加します。//データを保存します
function save（）{
var contact = new Object;
contact.user_name = document.getElementById（ "user_name"）。value;
contact.mobilephone = document.getElementById（ "MobilePhone"）。value;
contact.company = document.getElementById（ "Company"）。value;
var str = json.stringify（連絡先）;
localStorage.setItem（contact.mobilephone、str）;
loadall（）;
}
// localStorageに保存されているすべてのオブジェクトを抽出し、インターフェイスに表示します
関数loadall（）{
var list = document.getElementById（ "list"）;
if（localstorage.length> 0）{
var result = "<table border = '1'>";
結果 += "<tr> <td> name </td> <td> mobile </td> <td> company </td> </tr>";
for（var i = 0; i <localstorage.length; i ++）{
var mobilephone = localstorage.key（i）;
var str = localstorage.getitem（mobilephone）;
var contact = json.parse（str）;
結果+= "<tr> <td>"+contact.user_name+"</td> <td>"+contact.mobilephone+"</td> <td>"+contact.company+"</td> </tr>";
}
result += "</table>";
list.innerhtml = result;
}それ以外{
list.innerhtml = "データは現在空です。急いで連絡先の追加を開始します」。
}
}
効果は次のとおりです。