H5 Web ローカルストレージの使用方法-H5 チュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-01-10 09:54:48

オリジナル

2457 人が閲覧しました

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