Web Storageローカルストレージ

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