HTML5web ローカルストレージインスタンスの詳細-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5web ローカルストレージインスタンスの詳細

高洛峰

Mar 12, 2017 pm 04:47 PM

この記事では主に Html5 に関する関連情報を紹介します Web ローカルストレージの例の詳細な説明を必要としている友人は参照してください Web ストレージは、HTML5 で導入された非常に重要な機能であり、クライアント上でローカルにデータを保存できます。 HTML4 の

に似ていますが、Cookie よりもはるかに強力な機能を実現できます。Cookie のサイズは 4KB に制限されており、Web Storage は公式に Web サイトごとに 5MB を推奨しています。

Web ストレージは 2 つのタイプに分けられます:

session

StoragelocalStorage

文字通りの意味から明らかなように、sessionStorage はセッション内のデータを保存し、ブラウザは閉じられます。そして、localStorage は常にクライアント上でローカルにデータを保存します。

sessionStorage であっても localStorage であっても、使用できる

API

は同じであり、一般的に使用されるものは次のとおりです (localStorage を例にします)。データ: localStorage.setItem(

key

,value); データの読み取り: localStorage.getItem(key); 単一データの削除: localStorage.removeItem(key); ; 特定の index のキーを取得します: localStorage.key(index); 上記のように、キーと値は両方とも strings である必要があります。つまり、Web Storage API は文字列に対してのみ操作できます。次に、関連する API の使用をデモするために、Web Storage を通じて単純なアドレス帳アプレットを開発します。

連絡先を入力します: 名前と携帯電話番号。キーとして localStorage に保存されます; 現在保存されているすべての連絡先情報のリストに従って所有者を見つけます

最初に簡単な HTML コードを作成します

<!DOCTYPEHTML>
<html>
<head>
<metacharsetmetacharset="utf-8"/>
<title>HTML5本地存储之WebStorage篇</title>
</head>
<body>
<pstylepstyle="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>
</p>
<br/>
<pidpid="list">
</p>
</body>
</html>

ページを作成した後の表示効果はほぼ同じです。以下に示すとおりです:

連絡先を保存するには、次の JS メソッドを実装するだけです:

functionsave(){   
varmobilephone=document.getElementById("mobilephone").value;   
varuser_name=document.getElementById("user_name").value;   
localStorage.setItem(mobilephone,user_name);   
} //用于保存数据

所有者を見つけるには、次の JS メソッドを実装します: HTML5web ローカルストレージインスタンスの詳細

//查找数据   
functionfind(){   
varsearch_phone=document.getElementById("search_phone").value;   
varname=localStorage.getItem(search_phone);   
varfind_result=document.getElementById("find_result");   
find_result.innerHTML=search_phone+"的机主是："+name;   
}

保存されている連絡先情報をすべて表示するには、次のように localStorage.key(index) メソッドを使用する必要があります:

//将所有存储在localStorage中的对象提取出来，并展现到界面上   
functionloadAll(){   
varlist=document.getElementById("list");   
if(localStorage.length>0){   
varresult="<tableborder=&#39;1&#39;>";   
result+="<tr><td>姓名</td><td>手机号码</td></tr>";   
for(vari=0;i<localStorage.length;i++){   
varmobilephone=localStorage.key(i);   
varname=localStorage.getItem(mobilephone);   
result+="<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";   
}   
result+="</table>";   
list.innerHTML=result;   
}else{   
list.innerHTML="目前数据为空，赶紧开始加入联系人吧";   
}   
}

効果は次のとおりです:

問題: 上記のデモには 2 つしかありませんフィールド、名前、携帯電話番号など、会社名、自宅の住所など、より豊富な連絡先情報を保存したい場合、どうすればよいでしょうか? Web Storage は文字列しか扱わないのでしょうか?このとき、

JSON

の

string

ify() メソッドを使用して、複雑なオブジェクトを文字列に変換し、Web Storage に保存できます。Web Storage から読み取る場合は、parse() を通じて再度変換できます。 JSON メソッドを JSON オブジェクトに追加します。 HTML5web ローカルストレージインスタンスの詳細

以下は、会社

属性連絡先保存 JS コードを追加する簡単なデモです:

//保存数据    
functionsave(){   
varcontact=newObject;   
contact.user_name=document.getElementById("user_name").value;   
contact.mobilephone=document.getElementById("mobilephone").value;   
contact.company=document.getElementById("company").value;   
varstr=JSON.stringify(contact);   
localStorage.setItem(contact.mobilephone,str);   
loadAll();   
}   
//将所有存储在localStorage中的对象提取出来，并展现到界面上   
functionloadAll(){   
varlist=document.getElementById("list");   
if(localStorage.length>0){   
varresult="<tableborder=&#39;1&#39;>";   
result+="<tr><td>姓名</td><td>手机</td><td>公司</td></tr>";   
for(vari=0;i<localStorage.length;i++){   
varmobilephone=localStorage.key(i);   
varstr=localStorage.getItem(mobilephone);   
varcontact=JSON.parse(str);   
result+="<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";   
}   
result+="</table>";   
list.innerHTML=result;   
}else{   
list.innerHTML="目前数据为空，赶紧开始加入联系人吧";   
}   
}

効果は次のとおりです:

上記は HTML5 Web編集者が紹介したローカルストレージの例詳細な説明なので、何かご質問があればメッセージを残してください

。

以上がHTML5web ローカルストレージインスタンスの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。