Question

在我们的申请中，我们有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。

Answer 1

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

Answer 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>

如何在.JSON文件中添加和删除数据

2 个答案: