javascript - 如何在 localStorage javascript 中堆叠多个数组？

Question

我的应用程序出现问题，每次客户输入案例时，我都会将数据存储在 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("dataObjects") 中堆叠许多数组，然后再将其发送到服务器以供我的离线模式应用程序使用，

(对不起我的英语)

Answer 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");
    }
});