在 Angular 中覆盖本地 JSON 文件答案

【问题标题】：Overwriting local JSON file in Angular在 Angular 中覆盖本地 JSON 文件
【发布时间】：2019-07-24 06:06:31
【问题描述】：

我有一个想要修改的 json 文件。我已经有了一种将它映射到模型的方法，但问题是，我无法保存它或覆盖现有的 json 文件。我已经尝试过file-saver，但我了解到我无法更改保存目录，因为它取决于浏览器的设置。

我只需要修改我的assets 文件夹中的json 文件，这样我就可以编写一个get 方法，该方法将返回修改后的json 文件。

我不知道我可以提供什么信息，但这是我目前掌握的信息：

JSON 文件：

{
    "id": 1,
    "firstName": "sampleName",
    "lastName": "sampleLastName",
    "car": {
        "brand": "Toyota",
        "model": "Vios",
        "year": 2017
    }
}

保存方法：

saveJson(arg) {
  const blob = new Blob([JSON.stringify(arg)], {type : 'application/json'});
  saveAs(blob,'test.json');
}

arg 参数将接收具有新数据集的模型。此方法始终将新的 json 文件保存在 Downloads 文件夹中，因为这是浏览器指向其下载文件的位置。我相信我必须彻底改变这一点

【问题讨论】：

您要覆盖的文件是位于服务器上还是本地？如果在本地，沙箱会阻止浏览器中的 JavaScript 写入任意位置。
Angule 代码在 浏览器 中运行。您想修改位于 服务器 上的文件。在不同机器上的浏览器中运行的代码（但即使浏览器在同一台机器上）不可能做到这一点。您需要向您的服务器发送请求，服务器必须完成这项工作。
@fredrik 它是我放置在项目的assets 文件夹中的本地 json 文件。我希望我可以编辑它，如果可能的话，从编辑的 json 文件中返回修改后的值
在普通浏览器中运行时这是不可能的，你必须在 Electron 中运行它（就像 VS Code 一样）或类似的东西。
不应该。相同的沙盒开始生效。您可以创建一个“上传”功能，让用户在其中选择文件 - 但您很可能无法自动选择它。

标签： json angular

【解决方案1】：

由于我无法更改文件保护程序的目录，因此我寻找了能够以某种方式提供相同解决方案的替代解决方案。我只是使用了我今天刚刚发现的浏览器的本地存储。呵呵

无论如何，以防万一初学者偶然发现同样的问题并且不知道如何使用本地浏览器存储，这是我提供的服务：

import { Injectable } from '@angular/core';

@Injectable()
export class MockService {
  saveJson(id, obj) {
    localStorage.setItem(id, JSON.stringify(obj));
  }

  getJson(id) {
    return JSON.parse(localStorage.getItem(id));
  }

  removeJson(id) {
    localStorage.removeItem(id);
  }
}

【讨论】：