html内のデータストレージ

Web StorageはHTML 5に導入された非常に重要な機能であり、フロントエンドの開発でよく使われており、クライアントにデータをローカルに格納することができ、HTML 4のクッキーのようなものであるが、実現可能な機能はcookieよりもずっと強く、cookieサイズは4 KBに制限されており、Web Storageは公式にウェブサイトごとに5 MBを提案している.Web Storageには、次の2つがあります.

 sessionStorage
 localStorage

文字通り意味がはっきり見えるように、sessionStorageはデータをsessionに保存し、ブラウザが閉じるとなくなります.localStorageは、データをアクティブに削除しない限り、データが期限切れになることはありません.セッションストアでもlocalStorageでも、使用可能なAPIは同じです.一般的に使用される方法は次のとおりです.

     ：localStorage.setItem( key, value );      sessionStorage.setItem( key, value );
     ：localStorage.getItem( key );     sessionStorage.getItem( key );  
       ：localStorage.removeItem( key );     sessionStorage.removeItem( key );
       ：localStorage.clear( );     sessionStorage.clear( );
        key：localStorage.key( index );     sessionStorage.key( index );

どちらも属性lengthがkeyを表す個数、すなわちkey長:var keyLength 1=localStorageである.length; var keyLength2 = sessionStorage.length;
以上のようにkeyもvalueも文字列でなければならない.言い換えれば、web StorageのAPIは文字列しか操作できない.
Web storageのブラウザサポート状況の判断:
Web storageを使用する場合、まずこの機能がサポートされているかどうかを判断し、一部のバージョンのブラウザではサポートされていない(例えばIE 7および以前のバージョンではサポートされていない)が、サポートされているだけで使用できる.判断方法は以下の通りである.
[javascript] view plain copy

if(window.localStorage){  //   window.sessionStorage     
    alert("    localStorage")   
}else{      
    alert("      localStorage")   
}   

//     
if(typeof window.localStorage == 'undefined') {  //   window.sessionStorage   
    alert("      localStorage")   
}  

次に,Web Storageを用いて,関連APIの使用方法を実証するための簡単な通信録ウィジェットを開発した.次の機能を実現します.
1、連絡先を入力して、連絡先は名前、携帯電話番号の2つのフィールドがあって、携帯電話番号をkeyとしてlocalStorageに保存します;2、携帯電話の番号によって、機主を探します;3現在保存されているすべての連絡先情報をリストします.
まず、簡単なHTMLページを用意します.以下のようにします.
[html] view plain copy

    
    
    
        
        
    
    
    
       
          ：    
            
        
    
          ：    
            
        
    
            
        
    
             ：    
            
            
        

    
    
    
    
    
    
    
    
    
    
  

連絡先の保存を実現するには、以下のJSメソッドを簡単に実現するだけでよい.
[javascript] view plain copy

//        
function save(){    
    var mobilephone = document.getElementById("mobilephone").value;    
    var user_name = document.getElementById("user_name").value;    
    if(window.localStorage){   
         localStorage.setItem(mobilephone,user_name);    
    }else{  
         alert("        web storage   ");  
    }  
}  

検索機マスターを実装するには、次のJSメソッドを実装します.
[javascript] view plain copy

//        
function find(){    
    var search_phone = document.getElementById("search_phone").value;    
    var name = "";  
    if(window.localStorage){   
         localStorage.getItem(search_phone);    
    }else{  
        alert("        web storage   ");  
    return; //           
    }  
    var find_result = document.getElementById("find_result");    
    find_result.innerHTML = search_phone + "    ：" + name;    
}   

保存した連絡先情報をすべて表示するにはlocalStorageを使用する必要があります.key(index)メソッドは、次のとおりです.
[javascript] view plain copy

//      localStorage        ，           
function loadAll(){    
    var list = document.getElementById("list");    
    if( !window.localStorage ){           
        alert("        web storage   ");  
    return; //         
    }  
    if(localStorage.length>0){    
        var result = "";    
        result += "";    
        for(var i=0;i";    
        }    
        result += "
  
    
"+name+"
"+mobilephone+"
";    
        list.innerHTML = result;    
    }else{    
        list.innerHTML = "      ，          ";    
    }    
}   

質問:上記のプレゼンテーションでは、2つのフィールド、名前、携帯電話番号しかありませんが、会社名、住所など、より豊富な連絡先情報を格納するには、どのように実現しますか?Web Storageは文字列しか処理できないのではないでしょうか.この場合、JSONのstringify()メソッドを利用して、複雑なオブジェクトを文字列に変換し、Web Storageに格納することができる.Web Storageから読み取ると、JSONのparse()メソッドでJSONオブジェクトに再変換できます.
以下の簡単なプレゼンテーションでは、会社のプロパティの連絡先を追加してJSコードを保存します.
[javascript] view plain copy

//        
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);  //       JSON   
    if(window.localStorage){   
        localStorage.setItem(contact.mobilephone,str);    
    }else{  
        alert("        web storage   ");  
    return; //           
    }  
    loadAll();    
}    

//      localStorage        ，           
function loadAll(){    
    var list = document.getElementById("list");    
    if( !window.localStorage ){           
        alert("        web storage   ");  
    return; //         
    }  
    if(localStorage.length>0){    
        var result = "";    
        result += "";    
        for(var i=0;i";    
        }    
        result += "
  
  
  
"+contact.user_name+"
"+contact.mobilephone+"
"+contact.company+"
";    
        list.innerHTML = result;    
    }else{    
        list.innerHTML = "      ，          ";    
    }    
}  

文章の一部を修正しました.http://blog.csdn.net/csh624366188/article/details/8458331ブロガーの分かち合いの精神に感謝して、よく書いて、理解しやすいです.