Question

我有一个JS对象存储在名为garage.js的文件中：

var myObject = {
 "cars": [
       {
        "type": "mustang",
        "body": {
          "length": 10.7,
          "width": 5.8,
          "color" : "#fff"
          }
        },
       {
        "type": "corvette",
        "body": {
          "length": 11.9,
          "width": 5.6,
          "color": "#000"
         }
   }]
};

当我在html中使用JS函数更改宽度时，如下所示：

myObject.cars[0].body.width = 6

然后检查变量以查看值是否已更新，如下所示：

console.log(myObject.cars[0].body.width = 6)

控制台打印6 ...但它不会更改garage.js中存储对象的值...（我该怎么办？）

该值似乎在本地表示，但我需要它实际将此更新值写回garage.js文件，以便永久存储，以便当我在浏览器中刷新html时，新值，6 ，将替换myObject对象中的旧值5.8。

我是否需要使用JSON.stringify和JSON.parse？ ......还是比这简单得多？

Answer 1

您可以使用localStorage轻松保存状态。它看起来像这样：

localStorage.setItem("width", "6")设置键值对
myObject.cars[0].body.width = localStorage["width"]使值等于localStorage值。

现在每次打开网页时，该值应为6。

或者您可以使用数据库来存储和检索值。

Answer 2

我想你的JSON文件存储在服务器上，而不是浏览器上（localStorage）。

由于您无法使用浏览器Javascript写入存储在服务器上的文件，因此您可能需要后端解决方案。如果您仍想使用Javascript进行编码，请使用node.js加载.json文件，编辑它们并将更改直接应用于文件。

如果您想了解更多详情，可以对此条目发表评论。

Answer 3

假设您正在谈论一个非常传统的网页，您在HTML中的位置如下：

<script src="garage.js"></script>
<script>
    myObject.cars[0].body.width = 6;
    console.log(myObject.cars[0].body.width);
</script>

然后your comment表明了对术语的误解：

这一切都必须在本地完成，没有数据库......

即使这些都在您的计算机上本地运行，从任何网络拔出，仍有客户端和服务器，它们恰好都是同一台计算机。这是Web应用程序的本质，它始终是客户端/服务器。

所以，你想把它保存在服务器上（可能是本地机器 - 没关系）。在这种情况下，您必须运行服务器代码。像PHP，ASP.Net，Java / Tomcat，Ruby，Node.js等等。这是保存的服务器代码。

我建议首先将您的值存储为JSON，而不是JavaScript。编写JSON文件更容易，但编写JavaScript会容易出错。

您需要更改文件的所有内容是删除var myObject =以及尾部分号，然后另存为garage.json。然后，在您的脚本中，您将使用AJAX调用检索JSON并解析它。一旦更改并准备保存，您将.stringify()您的JavaScript对象并通过AJAX将其发送回服务器以进行保存。

有许多库可以让你轻松调用AJAX，但是如果你想要一个VanillaJS示例，这里有一种方法可以让AJAX调用来读写JSON：

function getJSON(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onreadystatechange = function(e) {
        if (this.readyState == 4 && this.status == 200) {
            callback(JSON.parse(this.responseText));
        }
    };
    xhr.send();
}
function saveJSON(obj, url) {
    var json = JSON.stringify(obj);
    var payload = "path=" + encodeURIComponent(url);
    payload += "&json=" + encodeURIComponent(json)
    var xhr = new XMLHttpRequest();
    xhr.open("post", "jsonSaver"); // path to server code
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(payload);
}
getJSON("garage.json", function(myObject) {
    myObject.cars[0].body.width = 6;
    saveJSON(myObject, "garage.json");
});

您必须创建一个服务器端处理程序来实际编写JSON文件。如何执行此操作取决于您要使用的服务器端语言。

如何将更改的值存储到JavaScript对象中？

3 个答案: