Web Storageローカルストレージ
2500 ワード
Web StorageはHTML 5に導入された非常に重要な機能であり、クライアントにデータをローカルに格納することができる
sessionStorageはデータをsessionに保存し、ブラウザが閉じるとなくなります.localStorageは常にローカルにデータを保存しています
データの保存:localStorage.setItem(key,value);
データの読み込み:localStorage.getItem(key);
個々のデータの削除:localStorage.removeItem(key);
すべてのデータを削除:localStorage.clear();
インデックスを取得するkey:localStorage.key(index);
Web StorageのAPIでは文字列のみ操作できます
Web Storageを通じて簡単な通信録ウィジェットを開発し、関連APIの使用方法を実証する.次の機能を実現します.
連絡先を入力し、連絡先は名前、携帯電話番号の2つのフィールドがあり、携帯電話番号をkeyとしてlocalStorageに格納する.
携帯電話の番号によって、機主を探します.現在保存されているすべての連絡先情報をリストします.
js部分
http://www.jb51.net/html5/70029.html
sessionStorageはデータをsessionに保存し、ブラウザが閉じるとなくなります.localStorageは常にローカルにデータを保存しています
データの保存:localStorage.setItem(key,value);
データの読み込み:localStorage.getItem(key);
個々のデータの削除:localStorage.removeItem(key);
すべてのデータを削除:localStorage.clear();
インデックスを取得するkey:localStorage.key(index);
Web StorageのAPIでは文字列のみ操作できます
Web Storageを通じて簡単な通信録ウィジェットを開発し、関連APIの使用方法を実証する.次の機能を実現します.
連絡先を入力し、連絡先は名前、携帯電話番号の2つのフィールドがあり、携帯電話番号をkeyとしてlocalStorageに格納する.
携帯電話の番号によって、機主を探します.現在保存されているすべての連絡先情報をリストします.
js部分
//
function save(){
var mobilephone = document.getElementById("mobilephone").value;
var user_name = document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
}
//
function find(){
var search_phone = document.getElementById("search_phone").value;
var name = localStorage.getItem(search_phone);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone + " :" + name;
}
// localStorage ,
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "";
result += "";
for(var i=0;i ";
}
result += " "+name+" "+mobilephone+"
";
list.innerHTML = result;
}else{
list.innerHTML = " , ";
}
}
http://www.jb51.net/html5/70029.html