ホームページ > 記事 > ウェブフロントエンド > HTML5web ローカルストレージインスタンスの詳細

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

高洛峰オリジナル: 2017-03-12 16:47:201357ブラウズ

この記事では主に 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 までご連絡ください。

前の記事：HTML5 は 2 つの div 要素間で画像をドラッグアンドドロップする方法を実装します次の記事：HTML5 は 2 つの div 要素間で画像をドラッグアンドドロップする方法を実装します

続きを見る

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

関連記事

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