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の理解：意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AM

HTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5：用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1）HTML5は、構造とコンテンツを定義するWebページ標準です。 2）H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

HTML5機能：H5のコアMay 04, 2025 am 12:05 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、フォームエンハンスメント、オフラインストレージ、ローカルストレージが含まれます。 1。コードの読みやすさやSEO効果を改善するなどのセマンティックタグ。 2.マルチメディアサポートは、メディアコンテンツを埋め込むプロセスとタグを簡素化します。 3.フォームエンハンスメント新しい入力タイプと検証プロパティを導入し、フォーム開発を簡素化します。 4.オフラインストレージとローカルストレージは、ApplicationCacheとLocalStorageを通じてWebページのパフォーマンスとユーザーエクスペリエンスを改善します。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

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

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

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。