ホームページ > 記事 > ウェブフロントエンド > HTML5 ローカル ストレージ Web ストレージ アプリケーションの紹介_html5 チュートリアル スキル
Web ストレージは、HTML5 で導入された非常に重要な機能です。HTML4 の Cookie と同様に、データをクライアントにローカルに保存できますが、その機能は Cookie よりもはるかに強力であり、Web ストレージは各 Web サイトで公式に推奨されているサイズが 4 KB です。 5MB。
Web ストレージは 2 つのタイプに分類されます :
sessionStorage
localStorage
文字通りの意味から、sessionStorage はセッション内のデータを保存し、ブラウザは閉じていることが明確にわかります。
sessionStorage であっても localStorage であっても、使用できる API は次のとおりです (localStorage を例にします)。 🎜> データの保存: localStorage.setItem(key,value);
データの読み取り: localStorage.getItem(key);
単一のデータの削除: localStorage.removeItem(key);
すべてのデータの削除: localStorage。 clear ();
インデックスのキーを取得します: localStorage.key(index);
上記のように、キーと値は両方とも文字列である必要があります。つまり、Web Storage API は文字列に対してのみ操作できます。
次に、Web Storage を介して単純なアドレス帳アプレットを開発し、関連する API の使用を示します。
連絡先には、名前と携帯電話番号の 2 つのフィールドがあります。携帯電話番号をキーとして localStorage に保存します。
携帯電話番号に基づいて所有者を検索します。
現在保存されている連絡先情報をすべてリストします。
まず、単純な HTML ページを準備します。次のように :
インターフェースは次のようになります
:
連絡先を保存するには、次の JS メソッドを実装するだけです:
コードをコピー
コードは次のとおりです:
//データを保存
function save(){
var mobilephone = document.getElementById("mobilephone").value;
var user_name = document.getElementById("user_name").value;
//データの検索
function find(){ var search_phone = document.getElementById("search_phone").value; name = localStorage.getItem( search_phone); var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone "名前;
コードをコピーします
名前 | 携帯電話番号< ;/td> |
" 携帯電話 " } result = " |
名前 | gt;携帯電話番号 | 会社
" contact.user_name " | " " |