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部分
//     
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