Question

这是一个学校项目，非常感谢任何帮助。

在浏览器中执行的代码（Chrome）会填充以下数组。

我需要弄清楚如何在本地文件中存储/更新数组。

var listDataObject = {
  reminderListArray: [{
      title: "Example one",
      star: true,
      checkbox: true
    },
    {
      title: "Example two",
      star: false,
      checkbox: false
    }
  ]
};

我原则上理解我需要将数组字符串化为JSON数据，然后将其写入文件。

我还阅读了有关在检索时解析JSON数据的信息。

这是我所得到的。

saveText(JSON.stringify(listDataObject), "filename.json");

function saveText(text, filename) {
  var a = document.createElement('a');
  a.setAttribute('href', 'data:text/plain;charset=utf-u,' + encodeURIComponent(text));
  a.setAttribute('download', filename);
  a.click()
}

作为参考，这是所有脚本：

var listDataObject = {
  reminderListArray: [{
      title: "Example one",
      star: true,
      checkbox: true
    },
    {
      title: "Example two",
      star: false,
      checkbox: false
    }
  ]
};

$(document).ready(function() {
  $('.warning').hide();
  $("#addItemForm").removeClass("has-warning");
  populateList();
});

function populateList() {
  var output = "";
  for (var i = 0; i < listDataObject.reminderListArray.length; i++) {
    output += '<li class="list-group-item" id="' + i + '">';
    if (listDataObject.reminderListArray[i].checkbox == false) {
      output += '<input type="checkbox" id="checkbox">';
    } else {
      output += '<input type="checkbox" id="checkbox" checked>';
    }
    if (listDataObject.reminderListArray[i].star == false) {
      output += '<i class="fa fa-star-o mx-1" aria-hidden="true"></i>';
    } else {
      output += '<i class="fa fa-star mx-1" aria-hidden="true"></i>';
    }
    output += '<button type="button" class="deleteBtn btn btn-secondary btn-sm float-xs-right">X</button>';
    output += listDataObject.reminderListArray[i].title;
    output += '</li>';
  }
  $("#mainList").append(output);
}

function deleteFromList(itemindex) {
  listDataObject.reminderListArray.splice(itemindex, 1);
  $("#mainList").empty();
  populateList();
}

$(document).on("click", '.deleteBtn', function() {
  deleteFromList($(this).parent().attr("id"));
});

$('.add').click(function() {
  var titleVal = $('#addItem').val();
  if (titleVal == "") {
    $('.warning').show();
    $("#addItemForm").addClass("has-warning");
  } else {
    $('.warning').hide();
    $("#addItemForm").removeClass("has-warning");
    $('#addItem').val("");
    listDataObject.reminderListArray.push({
      title: titleVal,
      star: false,
      checkbox: false
    });
    $("#mainList").empty();
    populateList();
  }
});

$(document).on("click", '.fa-star-o', function() {
  $(this).removeClass("fa-star-o");
  $(this).addClass("fa-star");
  listDataObject.reminderListArray[$(this).parent().attr("id")].star = true;
});

$(document).on("click", '.fa-star', function() {
  $(this).removeClass("fa-star");
  $(this).addClass("fa-star-o");
  listDataObject.reminderListArray[$(this).parent().attr("id")].star = false;
});

$(document).on("click", '#checkbox', function() {
  if ($(this).is(':checked')) {
    listDataObject.reminderListArray[$(this).parent().attr("id")].checkbox = true;
  } else {
    listDataObject.reminderListArray[$(this).parent().attr("id")].checkbox = false;
  }
});

Answer 1

您可以使用window.LocalStorage使用getItem和setItem方法在当前本地存储空间中创建存储对象。也不要对listDataObjects进行字符串化，根本不要将remainingListArray包含在ListDataObjects中，因为它是一个对象数组，可以解析为JSON并从本地存储中检索到数组中。所以摆脱listDataObjects。看看这是否有帮助。

    var dataObjects = [];

    for(var i = 0;i < remainderListArray.length; i++) {
        dataObjects.push(remainderListArray[i]);
    }
    // Convert to a string and save in local storage
    localStorage.setItem('dataObjects', JSON.stringify(dataObjects));

用于添加新对象

     // Get back in JSON format from localStorage
     var dataObjects = JSON.parse(localStorage.getItem('dataObjects'));
     // Add dataObject to array
     dataObjects.push(newDataObject);
     // Re-set back to localStorage
     localStorage.setItem('dataObjects', JSON.stringify(dataObjects));

将js数组保存并检索到本地json文件

1 个答案: