我如何在localStorage javascript中堆叠多个数组?

时间:2017-01-20 02:45:09

标签: javascript jquery html5 local-storage

我的应用程序出现问题,每当客户端输入案例时,我都会将数据存储在localStorage中。这是我的html使用模态。

           <div class="modal-body">
                <div class="form-group">
                    <input class="form-control date-picker" placeholder="Month and Year" id="c_round" name="c_round">
                </div>
                <div class="form-group">
                    <select class="form-control" id="prov" name="prov">
                        <option>Select Province</option>
                        <option value="01">Province1</option>
                        <option value="02">Province2</option>
                        <option value="03">Province3</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="mun" name="mun">
                        <option>Select Municipality</option>
                        <option value="01">Municipality1</option>
                        <option value="02">Municipality2</option>
                        <option value="03">Municipality3</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="brgy" name="brgy">
                        <option>Select Barangay</option>
                        <option value="001">Barangay1</option>
                        <option value=:002>Barangay2</option>
                        <option value="003">Barangay3</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="commodity" class="control-label text-left">Household Classification</label>
                    <div class="form-horizontal">
                        <input type="radio" name="h_classification" value="Farming"> Farming &emsp;&emsp;
                        <input type="radio" name="h_classification" value="Non-Farming"> Non-Farming
                    </div>
                </div>
            </div><!--End modal body-->
            <div class="modal-footer">
                <button type="submit" id="create" class="btn btn-primary pull-right" data-dismiss="modal" >Create</button>
            </div>

当客户端点击“创建”按钮时,数据将存储在localStorage中,这是我的jquery。

$(function() {

var round = $("#c_round");
var prov  = $("#prov");
var mun   = $("#mun");
var brgy  = $("#brgy");
var h_classification = $("[name='h_classification']");
var btn_create = $('#create');
var dataObject = [];

btn_create.on('click', function(){ 
    if(typeof(Storage) !== "undefined"){
        dataObj = [{
            'user_id': user_id,
            'prov'   : prov.val(),
            'mun'    : mun.val(),
            'brgy'   : brgy.val(),
            'r_code' : r_code,
            'h_class': h_classification.val()
        }];

        dataObject.push(dataObj);

        localStorage.setItem('dataObject', JSON.stringify(dataObject));

        retrivedOjects = localStorage.getItem('dataObject');

        console.log('retrivedOjects: ', JSON.parse(retrivedOjects));
    }else {
        alert("Error: Localstorage not supported");
    }
});

});

当我刷新页面时,旧数据仍然存在,但是当我创建新数据时,旧数据将替换为它不会附加的新数据。

我想首先在localStorage(&#34; dataObjects&#34;)中堆叠许多数组,然后再将其发送到我的离线模式应用程序的服务器上,

(对不起我的英文)

2 个答案:

答案 0 :(得分:1)

您需要从本地存储中获取旧数据,然后将新对象推送到旧数据。然后,您可以将其保存回本地存储。

var oldObject = localStorage.getItem('dataObject');
oldObject.push(dataObject);
localStorage.setItem('dataObject', JSON.stringify(dataObject));

答案 1 :(得分:1)

dataObject设置为localStorage中当前的任何内容,然后再向其推送新数据。

var dataObject = [];
btn_create.on('click', function() { 
    if(typeof(Storage) !== "undefined") {
        if (localStorage.getItem('dataObject') && localStorage.getItem('dataObject').length > 0)
            dataObject = JSON.parse(localStorage.getItem('dataObject'));
        dataObj = {
            'user_id': user_id,
            'prov'   : prov.val(),
            'mun'    : mun.val(),
            'brgy'   : brgy.val(),
            'r_code' : r_code,
            'h_class': h_classification.val()
        };
        dataObject.push(dataObj);
        localStorage.setItem('dataObject', JSON.stringify(dataObject));

        retrivedOjects = localStorage.getItem('dataObject');

        console.log('retrivedOjects: ', JSON.parse(retrivedOjects));
    } else {
        alert("Error: Localstorage not supported");
    }
});