H5 Web ローカル ストレージの使用方法

php中世界最好的语言
リリース: 2018-01-10 09:54:48
オリジナル
2439 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート