是否可以将数据写入本地 json 文件，除了角度之外啥都没有？

Posted 2023-02-22

【中文标题】是否可以将数据写入本地 json 文件，除了角度之外啥都没有？

【英文标题】：Is it possible to write data to a locally json file with nothing but angular?是否可以将数据写入本地 json 文件，除了角度之外什么都没有？

【发布时间】：2015-07-29 01:34:12

【问题描述】：

我试图在仅使用 Angular 的 html formly-form 上点击“提交”后将数据写入 json 文件，但没有任何反应。我知道我可以使用 angular 读取 json 文件，但不确定是否可以创建文件。 onSubmit() 在控制器中：

function onSubmit() 
    $scope.save = function() 
        $http.post('./temp/sample_data.json', JSON.stringify($scope.model)).then(function(data) 
            $scope.msg = 'Data saved';
        );
    ;
;

html:

<form name="form" ng-submit="onSubmit()" novalidate>
    <formly-form model="model" fields="fields"></formly-form><br/>
    <button type="submit">Submit</button>
</form>

未创建 sample_data.json，如果我创建一个空文件，它也不会填满数据。 $scope.model 肯定包含数据。 如果有人可以提供帮助，将不胜感激。 谢谢，阿隆。

【问题讨论】：

完全不可能，因为你在客户端没有这样的权限

【参考方案1】：

是否可以将数据写入本地 json 文件，只需要 angular？

没有。即使您从本地文件系统（例如，file://myfile.html）或本地网络服务器（例如，http://localhost/myfile.html 或 http://host-on-my-intranet/myfile.html）运行页面，您仍然无法从浏览器直接写入文件- 托管的 javascript 代码。

两个选择：

将它发送到可以写出它的东西（例如服务器），或者

将其提供为data: URI（如果在您的情况下可行），用户可以右键单击并选择“另存为...”

以下是为某些 JSON 文本创建 data: URI 的方法：

var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);

#2 的

完整示例：

var theData = 
  foo: "bar"
;
var theJSON = JSON.stringify(theData);
var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);

var a = document.createElement('a');
a.href = uri;
a.innerHTML = "Right-click and choose 'save as...'";
document.body.appendChild(a);

【讨论】：

好的，知道了。尝试了第二种选择，效果很好。无论如何，将涉及未来的服务器。谢谢！

【参考方案2】：

没有。

Angular 运行客户端。

如果您想将数据写入服务器（甚至与浏览器在同一台计算机上），那么您需要服务器端代码来执行此操作。

【参考方案3】：

您无法从 Javascript（直接）访问本地文件系统。出于安全原因，这是强制执行的（仔细想想，这很有意义！）。

Local file access with javascript

【参考方案4】：

由于这是不可能的，您可以尝试另一条路线。顺便说一句，您的 $scope.save 没有被调用，只是被分配了。

$scope.save = function() 
  localStorage.model = JSON.stringify($scope.model);
;
function onSubmit() 
  $scope.save();
  $scope.msg = 'saved';
;

要让您的模型恢复，请在初始化时执行此操作：

if (localStorage.model)
  $scope.model = JSON.parse(localStorage.model);

【讨论】：

localStorage 几乎不符合 json 文件的条件

@SergioTulentsev 不知道具体要求是什么。提问者是 Web 开发的新手，并给出了一个可能的推理路径，该路径基于当前技术的限制不起作用。如果你要给出一个可能的替代解决方案，这被认为比仅仅陈述显而易见的事情要付出更多的努力。

【参考方案5】：

以下代码为 JSON 对象添加了一个下载按钮。

注意： 不建议在 HTML 5 中使用锚标记包装按钮，但它可以在 Chrome 中使用，这正是我所需要的。 YMMV。

HTML：

<a download="my-json-object.json" [href]="dataUri">
  <button>Download</button>
</a>

打字稿：

  get dataUri(): SafeUrl 
    const jsonData = JSON.stringify(this.dataSource);
    const uri = 'data:application/json;charset=UTF-8,' + encodeURIComponent(jsonData);
    return this.sanitizer.bypassSecurityTrustUrl(uri);