如何避免讀取頁面刷新前存儲在頁面中的以前的JSON數組值

Question

我想避免讀取JSON數組中推送的先前對象。如圖所示。 我自學這些概念。所以我需要幫助，關於這是添加和讀取值的正確方法。

另外我不知道如何從技術上提出這個問題。所以如果有人會告訴我應該如何問這個問題，我將不勝感激。所以我可以至少改進它以便更好地理解。

JQUERY

$("#click").click(function(event) 
    { 
    event.preventDefault(); 
    var $form = $('#myform'); 
    var $boxes =$("input[id=myCheckboxes]:checked").length; 
    if($boxes==0) 
    { 
    alert("Choose atleast one Category"); 
    } 
    else if($form.valid() && $boxes>0) 
    { 
    //if form is valid action is performed 
    var data = $("#myform").serializeArray();//serialize the data 
    var valuesArray = $('input:checkbox:checked').map(function() { 
     return this.value; 
    }).get().join(","); 
    data.push({ name: 'panel', value: valuesArray}); 
    //convert json array into object 
    var loginFormObject = {}; 
    $.each(data, 
     function(i, v) { 
      loginFormObject[v.name] = v.value; 
     }); 
    array.push(loginFormObject); 
    alert("Added Successfully"); 
    viewFunction(array); 
    return false; 
    } 
    }) 
    //view function 
    function viewFunction(array) 
    { 
    console.log(array); 
    var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance","Court Programs"]; 
    var ul_block = $("<ul/>"); 
    $.each(array, function(i, data) 
    { 
     var panels = data.panel.split(","); 
     var uli_block = $("<ul/>"); 
     $.each(panels, function(j, jdata) 
     { 
      var ulii_block = $("<ul/>"); 
      $edit = $('<a/>').attr('href', 'javascript:;').addClass('btn btn-default active').attr('role', 'button').text('Edit') 
        .css('margin-left', 5); 
      $del = $('<a/>').addClass('btn btn-default active').attr('role', 'button').text('Delete') 
        .css('margin-left', 5); 
      $(ulii_block).append($("<li/>").html(data.ptitle).append($edit,$del)); 
      $(uli_block).append($("<li/>").html('<span class="Collapsable">'+panel_arr[panels[j]]+'</span>')).append(ulii_block); 
      $edit.click(editFunction.bind(null, data));//bind data to function 
     }); 
     $(ul_block).append($("<li/>").html('<span class="Collapsable">'+data.gpanel+'</span>').append(uli_block)); 
    }); 
    $("#addMember").append(ul_block); 
    $(".Collapsable").click(function() { 
     $(this).parent().children().toggle(); 
     $(this).toggle(); 
    }); 
    $(".Collapsable").each(function(){ 
     $(this).parent().children().toggle(); 
     $(this).toggle(); 
    }); 
     } 

Answer 1

了很大的麻煩，我發現我的問題後。我每次都追加結果。 麻煩的代碼是這個。

$("#addMember").append(ul_block); 

我改成

$("#addMember").html(ul_block); 

因此避免重複。

Answer 2

我做了這個方法，我的JSON對象2之間進行比較：

//tempObj is old object and newObj is well your new JSON, this function returns bool 
function isDifferentObj(tempObj, newObj) { 
    var tempObjLength = Object.keys(tempObj).length; 
    var newObjLength = Object.keys(newObj).length; 
    if (newObjLength >= tempObjLength) { 
     for (var key in newObj) { 
      if (typeof tempObj[key] != "undefined") { 
       if (newObj[key] != tempObj[key]) { 
        return true; 
       } 
      } else { 
       return true; 
      } 

     } 
     return false; 
    } else { 
     for (var key in tempObj) { 
      if (typeof newObj[key] != "undefined") { 
       if (tempObj[key] != newObj[key]) { 
        return true; 
       } 
      } else { 
       return true; 
      } 

     } 
     return false; 
    } 

}