JSON配列オブジェクトがローカルストレージに上書きされます

Question

私は3つの入力フィールド："fname","emailId","phoneNo"があるフォームページを作成しています。

これで、ユーザーがフォームページに詳細を入力するたびにオブジェクトを上書き保存するたびに、localStorageに保存しています。そのため スクリプトは次のとおりです。

<script> 
$(document).ready(function(){ 

    var jsonArr=[]; 
    $('#addVendor').submit(function(){ 

     var fname=$('#addVendor').find('input[name="first_name"]').val(); 
     var emailId=$('#addVendor').find('input[name="email_id"]').val(); 
     var phoneNo=$('#addVendor').find('input[name="phone_no"]').val(); 
     var jsonObj={}; 
     jsonObj["fname"]=fname; 
     jsonObj["emailId"]=emailId; 
     jsonObj["phoneNo"]=phoneNo; 
     jsonArr.push(jsonObj); 
     localStorage.setItem("userInfo", JSON.stringify(jsonArr)); 
    }); 

}); 
</script> 

localStorageに救わ形式は次のとおりです。

[{"fname":"hello","emailId":"hello","phoneNo":"4564564"}] 

そして、私はそれに別のオブジェクトを追加しようとした場合、それは追加それに上書きされておらず、それに追加しないでください。 すでにlocalStorageにあるオブジェクトにオブジェクトを追加するにはどうすればよいですか？

Answer 1

あなたのコードでは、単に記憶データをjsonArr変数データに置き換えています。 Localstorageは、データを文字列形式で格納します。だから、それに追加するためには、あなたがして始めているとしてあなたは、最初のjsonArrにおけるローカルストレージの内容を読み取るために必要な、それを解析して、再度

var localStorageData = JSON.parse(localStorage.getItem("userInfo")); 
localStorageData.push(jsonObj); 
localStorage.setItem("userInfo", JSON.stringify(localStorageData)); 

Answer 2

それを追加し、文字列化して保存する最初のデータをフェッチする必要があります空の配列は、オーバーライドされています。

の代わりに：

var jsonArr=[]; 

用途：

var jsonArr=localStorage.getItem("userInfo");