如何在.JSON文件中添加和删除数据[关闭]答案

【问题标题】：how to add and remove data into .JSON file [closed]如何在.JSON文件中添加和删除数据[关闭]
【发布时间】：2015-03-05 06:50:07
【问题描述】：

在我们的应用程序中，我们有 4 个页面。每页有 5 个复选框。如果我

                         <--  
app flow like this page0 -->page1  -->page4   
                         -->page2  -->page4 
                         -->page3  -->paeg4

转到第 1 页并选择 2 项，
然后转到第2页，选择4个项目，
然后转到第 3 页并选择 2 个项目，

选择的项目总数为 11。

现在，如果我现在转到第 4 页，我能否以某种方式将所有页面的值存储到位于 www 文件夹下的 save.json 文件中。我正在使用 PhoneGap。

【问题讨论】：

有很多方法可以实现这一点。这是一个示例，说明如何从表单jsfiddle.net/j6btvLym 在下一页上附加数据。在您的情况下，您需要在浏览页面时存储该数据，直到最终提交。然后在此处查看如何对数据进行 json 字符串化。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。编写文件检查cordova网站或在SO上搜索

标签： json cordova jquery-mobile local-storage session-storage

【解决方案1】：

如果您询问 PhoneGap 应用程序是否可以编写 JSON 文件，那么答案是肯定的。使用 FileSystem 插件来执行此操作。但是，如果您只是保存少量数据，则使用 LocalStorage 会容易得多。

【讨论】：

感谢回复。我会努力的

【解决方案2】：

首先您需要创建一个数组，将此数组存储在 localStarage 中，例如到第 1 页将两个值存储在数组中，并在选择的每一页上更新您的 localStorage 值，在最后一页使用 org.apache.cordova.file 插件将此 localStorage 值写入文件。我做了例子，你可以根据你的要求来管理。

a.html

<!DOCTYPE html>
<html>
   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

  <body>    
    <div data-role="page" id="page_a">
        <div data-role="header" class="">
            <h3>Fruit</h3>            
        </div>
        <div role="main" id="" class="ui-content">   
            <div class="ui-field-contain">
                <fieldset data-role="controlgroup">
                  <input type="checkbox" name="apple" id="apple" value="Apple" >
                  <label for="apple">Apple</label>
                  <input type="checkbox" name="orange" id="orange" value="Orange">
                  <label for="orange">Orange</label>                    
                </fieldset>
            </div> 
            <a href="" data-ajax="false" id="btn_a" class="ui-btn ui-mini">Book Order</a>
      </div>

    </div>         
</body>
<script>

  var arr_fruit = [];
  $("#btn_a").on("click", function(event){  

     $("input[type=checkbox]:checked").each(function(key){
       arr_fruit.push( $(this).val());
     }); 
     localStorage.setItem("arr_fruit", arr_fruit);
     location.href = "c.html";    
  })
</script>
<html>

b.html

<div data-role="page" id="page_b">
    <div data-role="header" class="">
        <h3>Flowers</h3>            
    </div>
    <div role="main" id="" class="ui-content">   
        <div class="ui-field-contain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="rose" id="rose" value="Rose" >
                <label for="rose">Rose</label>
                <input type="checkbox" name="sunflower" id="sunflower" value="Sunflower">
                <label for="sunflower">Sunflower</label>                    
            </fieldset>
        </div> 
        <a href="" data-ajax="false" id="btn_b" class="ui-btn ui-mini">Book Order</a>
    </div>        
</div> 

<script>
  var arr_flow = [];
  $("#btn_b").on("click", function(event){  
    $("input[type=checkbox]:checked").each(function(key){
      arr_flow.push( $(this).val());
    }); 
    localStorage.setItem("arr_flow", arr_flow);
    location.href = "c.html";    
 })
</script>

c.html

<div data-role="page" id="page_c">        
    <div data-role="header" class="">
        <a href="a.html" data-ajax="false" id="btn_b" class="ui-btn ui-mini ui-btn-left">Page A</a> 
        <h3>Details</h3>
        <a href="b.html" data-ajax="false" id="btn_b" class="ui-btn ui-mini ui-btn-right">Page B</a>          
    </div>
    <div role="main" id="" class="ui-content"> 
        <p id="fr_title" style="display:none"><h3>Fruits</h3> </p>  
        <ul data-role="listview" id="list_fruit"></ul>  
        <p id="fl_title" style="display:none"><h3>Flowers</h3> </p>  
        <ul data-role="listview" id="list_flow"></ul>  
    </div>        
</div> 

<script>
  var list_fruit = "";
  var arr_fruit = localStorage.getItem("arr_fruit").split(",");

  var list_flow = "";
  var arr_flow = localStorage.getItem("arr_flow").split(",");

  $("#page_c").on("pageshow", function(event){  
    // Fruits
    $("#fr_title").show();
    $.each(arr_fruit, function(key, value){
        list_fruit += '<li>'+value+'</li>';
    });
    $("#list_fruit").html(list_fruit).trigger("create");
    $("#list_fruit").listview( "refresh" );   

    // Flowers   
   $("#fl_title").show();
   $.each(arr_flow, function(key, value){
       list_flow += '<li>'+value+'</li>';
   });
   $("#list_flow").html(list_flow).trigger("create");
   $("#list_flow").listview( "refresh" );    
 });
</script>

【讨论】：

我的应用流程像这样 Page1 到 Page4，page2 到 Page4，page3 到 Page4。当我们调用 var gettingAllements 时，它会删除以前的项目列表
您可以每次将数组数据写入文件中，也可以将旧数组和新数组合并到一个数组中。
请看实际我的问题是这个如果你有任何事情请指导我stackoverflow.com/questions/27798845/…
好的...它的单页应用程序或多页应用程序..？
您可以创建两个localStorage，一个用于水果，另一个用于鲜花，并在c页上合并。