HTML5 ローカルストレージ機能を使用するためのヒントを探る-H5 チュートリアル-php.cn

HTML5 ローカルストレージ機能を使用するためのヒントを探る

PHPz

リリース： 2018-09-29 11:30:45

オリジナル

1268 人が閲覧しました

この記事では、HTML5 ローカルストレージ機能の応用スキルを主に紹介します。サンプルを通じて、HTML5 ローカルストレージについての理解を深め、興味のある友人は参考にしてください。

簡単なアプリケーションを実装してみましょう。このアプリケーションでは、ユーザーがユーザー名と携帯電話番号を入力すると、関連するルーチンがローカルに保存され、検索や表示などの基本的な操作が実行されます。

キーコードのみが以下に提供されています。プロジェクト構造、基本コード、CSS スタイルは自分で追加できます。

機能に応じた配布を完了します。

1. ストレージ機能

ユーザーが名前と携帯電話番号を入力すると、その情報が Web ストレージに保存されます。 HTML は次のとおりです。

<form>     
     <labelforlabelforlabelforlabelfor=”username”>姓名：</label>     
     <inputtypeinputtypeinputtypeinputtype=”text” id=”username” name=”username” />     
     <labelforlabelforlabelforlabelfor=”mobilephone”>手机号：</label>     
     <input type=”text” id=”mobilephone”name=”mobilephone” />        
     <input type=”button” onclick=”save()”vale=”新增记录” />     
</form>

ログイン後にコピー

上記のコードはフォームです。ユーザーが名前と携帯電話番号を入力した後、[レコードの追加] をクリックして名前と携帯電話番号のキーと値のペアをローカルに保存します。 js の具体的な保存関数コードは次のとおりです。

function save(){     
     var mobilePhone= document.getElementById(“mobilephone”).value;     
     var userName= dpcument.getElementById(“username”).value;     
     localStorage.setItem(mobilePhone,userName);     
}

ログイン後にコピー

保存関数のロジックは非常に単純で、ユーザーが入力した値を取り出し、localStorage の setItem 関数を使用します。情報をキーと値のペアの形式で Web Storage 中央に保存します。

2. 検索機能

ユーザーが電話番号を入力すると、データベース内の対応する検索情報が表示されます。 HTML コードは次のとおりです。

<label for=”search”>请输入手机号：</label>     
<input type=”text" id=”search”name=”search” />     
<input type=”button” onclick=”find()”value=”查找”>     
<p id=”result”><p>

ログイン後にコピー

結果領域は、クエリ結果を配置するために使用されます。以下は、js の find 関数に関連するコードです:

function find(){     
     var search =document.getElementById(“search”).value;     
     var name = localStorge.gteItem(search);     
     var result =document.getElementById(“result”);     
     result.innerHTML= search + “:” + name;     
}

ログイン後にコピー

まずユーザーが入力した携帯電話番号を取得し、次に getItem を使用してズームインし、この携帯電話番号を持つユーザー名を取得します。データベースを取得し、最後に中央の結果エリアにまとめて表示します。

上記の 2 つは最も基本的な機能であり、ローカルストレージの高度な使用方法と、モバイルアプリケーションでローカルストレージ機能を自由に使用する方法を引き続き探索していきます。さらに関連するチュートリアルについては、Html5 ビデオチュートリアルをご覧ください。