Question

我正在尝试使用离子框架创建混合应用程序，但我一度陷入困境。我所要做的就是将三个不同输入框中的值保存到'data.json'文件中并检索该数据或在需要时进行更改，无论应用程序是否正在运行，值都应保留在那里。

$http.get('js/data.json').success(function (data) {
    $scope.values = data;
});

HTML

<div ng-repeat="yoyo in values">
    <p ><h2>{{yoyo.name}}</h2></p>
</div>`

使用这段代码，我可以遍历data.json文件中数组中可用的对象。但我无法发布任何内容。

$scope.process = function () {
   // var SendData = angular.toJson({
     // json: JSON.stringify( ) });

var SendData= {
  "name": $scope.box1,
    "owners": $scope.box2,
  "country": $scope.box3,
};

$http.post('js/data.json',SendData)
    .success(function () { 
        console.log('done it bro'); 
    });
};

但是，无论何时单击按钮，都会触发上述功能。它应该从这三个框中获取值，并且应该进入data.json文件，但没有任何反应。我在 {{yoyo.name}} 中看不到任何变化，因为这会显示数组中的所有对象。但是我可以在console.log

中看到我执行的.success函数

请告知为什么我无法将数据保存在.json文件中或者正确的方法是什么？

Answer 1

要做$http.post，你需要一个后端API（PHP，Node Js等）来捕获你想要的数据，并通过文件系统中的读写方法保存到db或JSON中。

Answer 2

您无法使用vanilla JavaScript在服务器中保存文件。想想如果恶意用户只使用他的JavaScript控制台将数据发布到我们的服务器上会发生的所有问题？这就是为什么它不被允许。

因此我们使用AJAX，这是一种与另一个服务器端API端点进行通信的工具，它实际上为我们完成了工作。在这里，您可以使用localStorage保存SendData。更好的方法是使用这样的服务或工厂。

app.factory("LocalStorageService", ["$window", function ($window) {
    var HasKey = function (key) {
        return $window.localStorage && $window.localStorage.getItem(key);
    };
    var GetItem = function (key) {
        if ($window.localStorage) {
            return $window.localStorage.getItem(key);
        }
        return null;
    };
    var SetItem = function (key, value) {
        if ($window.localStorage) {
            $window.localStorage.setItem(key, value);
            return true;
        }
        return false;
    };
    var RemoveItem = function (key) {
        if ($window.localStorage) {
            return $window.localStorage.removeItem(key);
        }
        return null;
    };
    return {
        HasKey: HasKey,
        GetItem: GetItem,
        SetItem: SetItem,
        RemoveItem: RemoveItem
    };
}]);

现在插入localStorage，将工厂注入您的应用并将其称为

//To store into localStorage
LocalStorageService.SetItem("personalDetails", JSON.stringify(SendData));

//To retrieve from localStorage
var DTO = LocalStorageService.GetItem("personalDetails");
var personalDetails = JSON.parse(DTO);

P.S：请尽快开始使用更好的命名约定。否则它将成为一个不容易打破的坏习惯。 ;）

Answer 3

您无法将数据直接写入.j子文件。但是您可以从.j子文件接收数据。对于这种情况，您可以选择浏览器本地存储，Web SQL，SQL lite等。

请记住，本地的静态.j子文件只能用于读取j子值。

无法在.json文件中发布数据

3 个答案: