Webストレージは、html4 Cookieに局所的にデータを保存できます。
Webストレージは2つのタイプに分割されます。
それは、セッションのデータを保存する文字通りの意味からはっきりと見られ、ブラウザは常にクライアントのデータを保存しています。
SessionStorageであろうと、LocalStorageであろうと、使用できるAPIは同じです(例としてLocalStorageを取ります)。
上記のように、両方と値は文字列でなければなりません。
次に、関連するAPIの使用を実証するために、Webストレージを通じて簡単なアドレス帳を開発します。
1.連絡先を入力すると、連絡先には2つのフィールド、携帯電話番号があり、携帯電話番号はキーストレージとしてキーストレージとして使用されます。
2。携帯電話番号に従って所有者を見つけます。
3.現在保存されているすべての連絡先情報をリストします。
まず、次のように簡単なHTMLページを準備してください。
<!doctype html> <html> <gead> <meta charset = utf-8/> <title> html5ローカルストレージストレージ記事> </head> <body> <div style = border ;幅:320px; :</label> <入力タイプ=テキストid = mobilephone name = mobilephone/> <br/> <input = button onclick = save()value = new record/<hr/> <label for = searc = searc h_phone>> <label携帯電話番号を入力してください:</label> <入力タイプ=テキストid = search_phone name = search_phone/> <input = button onclick = find()value = find machine所有者/> <p id = find_result> <br </</ > </p> </div> <br/> <div id = list> </div> </body> </html>
インターフェイスには、次のことが表示されます。
連絡先の保存を実現するには、次のJSメソッドを単純に実装するだけです。
//データsave(){var microlephone.getElementById(Mobilephone)創設者の所有者を達成するために、次のJSメソッドが実装されています。
//データ関数find(){var search_phone.getElementById(search_phone)保存されたすべての連絡先情報を表示するには、次のようにlocalStorage.key(index)メソッドを使用する必要があります。
// localstorageに保存されているすべてのオブジェクトを抽出し、loadall(){var list.getElementbyid(list); <l> <td> name </td> <td>携帯電話番号</td> </tr>; i)var name.getitem(Mobilephone); .innerhtml = result;} else {list.innerhtml =現在のデータは空です。連絡先に参加するために急いで;}}効果は次のとおりです。
質問:上記のデモンストレーションには、2つのフィールド、携帯電話番号しかありません。 Webストレージは文字列のみを処理しませんか?現時点では、JSONのStringify()メソッドを使用して、複雑なオブジェクトをStringに変換し、Webストレージから読み取ることができます。
次の簡単なデモでは、JSコードを保存するための会社の属性の連絡先を追加します。
// save save()bar contact.getelementbyid(user_name) json.stringify(連絡先); contact.mobilephone、str); getElementByid(list); > <td> <td> <td>携帯電話</td> <td> company </td> </tr>; LocalStorage.Key(i); > <td>+conf tact.company+</td> </tr>;} result+= </table>;連絡先;}}
効果は次のとおりです。
上記は、Xiaobianによって導入されたHTML5のストレージです。 VEVBウーリンのウェブサイトへのご支援ありがとうございます!