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 ページを準備します。次のように :
HTML5 ローカル ストレージの Web ストレージ/title>
コードは次のとおりです:
//データを保存
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 "名前;
コードをコピーします コードは次のとおりです:
//localStorage に保存されているすべてのオブジェクトを抽出し、インターフェースに表示します。
functionloadAll(){
var list = document.getElementById("list");
if(localStorage. length>0){
var result = "
";
result = "名前 | 携帯電話番号< ;/td> |
";
for(var i=0;ivar mobilephone = localStorage.key(i);
var name = localStorage .getItem(携帯電話);
結果 = "" 携帯電話 " } result = " |
";
list.innerHTML = result;
}else{
list.innerHTML = "データは現在空です。今すぐ追加を開始してください。";
}
}
効果は次のとおりです:
問題: 上記のデモには、名前と携帯電話番号の 2 つのフィールドしかありません。会社名、自宅の住所など、より豊富な連絡先情報を保存したい場合、どうすればよいでしょうか? Web Storage は文字列しか扱わないのでしょうか?現時点では、JSON の stringify() メソッドを使用して複雑なオブジェクトを文字列に変換し、Web Storage に保存できます。Web Storage から読み取る場合は、JSON の parse() メソッドを使用してそれらを JSON オブジェクトに変換できます。 🎜>以下は、会社属性を持つ連絡先を保存するための JS コードを追加する簡単なデモです
:
//データを保存
function save(){
var contact = new Object;
contact.user_name = document.getElementById(" user_name").value;
contact.mobilephone = document.getElementById("mobilephone").value;
contact.company = document.getElementById("company").value;
var str = JSON. stringify(contact) ;
localStorage.setItem(contact.mobilephone,str);
loadAll();
}
//localStorage に保存されているすべてのオブジェクトを抽出してインターフェースに表示します
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "
" ;
result = "gt;名前 | gt;携帯電話番号 | 会社
"; (var i=0;ivar mobilephone = localStorage.key(i);
var str = localStorage.getItem(mobilephone);
var contact = JSON .parse (str);
結果 = "
" contact.user_name " | " " |
";
}
result = "
";
list.innerHTML = result;
リスト。 innerHTML = "データは現在空です。すぐに連絡先の追加を開始してください";
}
}
効果は次のとおりです: