ホームページ > 記事 > ウェブフロントエンド > H5 Web ローカル ストレージの使用方法
H5 Web ローカル ストレージの使用方法
- php中世界最好的语言オリジナル
- 2018-01-10 09:54:482415ブラウズ
今回はH5のWebローカルストレージの使い方を紹介します。 H5のWebローカルストレージの使い方は？ H5 の Web ローカル ストレージを使用する際の 注意事項 は何ですか? 以下は実際のケースです。見てみましょう。
Web ストレージは HTML5 で導入された非常に重要な機能で、HTML4 Cookie と同様にデータをクライアント上にローカルに保存できますが、その機能は Cookie よりもはるかに強力であり、Web の公式推奨では 4KB に制限されています。ストレージは Web サイトごとに 5MB です。
Web ストレージは 2 つのタイプに分けられます:
sessionStorage
localStorage
文字通りの意味から明らかなように、sessionStorage はセッション内のデータを保存し、ブラウザを閉じると消滅します。データは常にクライアントのローカルに保存されます。
sessionStorage であっても localStorage であっても、使用できる API は同じであり、一般的に使用される API は次のとおりです (localStorage を例にします)。 : localStorage.setItem(key, value); データの読み取り: localStorage.getItem(key); すべてのデータの削除: localStorage.clear(); .key(index);
上記のように、キーと値は両方とも
stringsである必要があります。つまり、Web Storage API は文字列に対してのみ操作できます。 次に、関連する API の使用をデモするために、Web Storage を通じて単純なアドレス帳アプレットを開発します。
連絡先を入力します: 名前と携帯電話番号。キーとして localStorage に保存されます; 携帯電話番号に基づいて所有者を見つけます。
<!DOCTYPEHTML> <html> <head> <metacharsetmetacharset="utf-8"/> <title>H5本地存储之WebStorage篇</title> </head> <body> <divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;"> <labelforlabelfor="user_name">姓名：</label> <inputtypeinputtype="text"id="user_name"name="user_name"class="text"/> <br/> <labelforlabelfor="mobilephone">手机：</label> <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/> <br/> <inputtypeinputtype="button"onclick="save()"value="新增记录"/> <hr/> <labelforlabelfor="search_phone">输入手机号：</label> <inputtypeinputtype="text"id="search_phone"name="search_phone"/> <inputtypeinputtype="button"onclick="find()"value="查找机主"/> <pidpid="find_result"><br/></p> </div> <br/> <dividdivid="list"> </div> </body> </html>
マシンの所有者を見つけるには、次の JS メソッドを実装します。
functionsave(){
varmobilephone=document.getElementById("mobilephone").value;
varuser_name=document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
} //用于保存数据これらのケースを読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連記事:
人気のない H5 デザインの 12 のヒント
postMessage を使用して H5 の 2 つの Web ページ間でデータを転送する方法H5 で五芒星を描く方法以上がH5 Web ローカル ストレージの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。