如何在浏览器中调用终端功能，实现向JSON文件写入新增数据？

浏览器出于安全沙箱机制，不允许前端代码直接调用系统终端、也没有内置Node.js的fs文件操作模块，你当前的写入逻辑只能在Node.js服务端环境运行，无法直接放到浏览器中执行。

方案1：浏览器本地临时存储（刷新不丢失，无需操作文件） #

如果仅需要在当前用户的浏览器中持久保存待办数据，可使用浏览器内置的localStorage API实现：

let dataUse = []

// 读取数据逻辑：优先读本地存储，没有再请求JSON文件
getData = () => {
    const localTodo = localStorage.getItem('todoList')
    if (localTodo) {
        dataUse = JSON.parse(localTodo)
        return
    }
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status ==200) {
            const myData = JSON.parse(this.responseText)
            dataUse.push.apply(dataUse, myData)
        }
    }
    xhttp.open("GET", "data.json", true);
    xhttp.send();
}

// 保存数据逻辑：写入本地存储
saveData = () => {
    dataUse.push(newData)
    localStorage.setItem('todoList', JSON.stringify(dataUse))
}

getData()

方案2：用户主动下载更新后的JSON文件 #

如果需要把更新后的数据导出为本地JSON文件，可通过浏览器下载能力触发用户主动保存，覆盖原有文件：

saveData = () => {
    dataUse.push(newData)
    const jsonData = JSON.stringify(dataUse, null, 2)
    // 创建Blob对象生成临时下载链接
    const blob = new Blob([jsonData], { type: 'application/json' })
    const tempUrl = URL.createObjectURL(blob)
    const downloadTag = document.createElement('a')
    downloadTag.href = tempUrl
    downloadTag.download = 'data.json'
    downloadTag.click()
    // 释放临时链接资源
    URL.revokeObjectURL(tempUrl)
}

方案3：自动更新服务端的JSON文件 #

如果需要让所有访问页面的用户都能看到更新后的待办数据，你需要搭建一个简单的后端服务，前端通过POST请求把新数据提交给后端，由后端服务执行fs写入逻辑更新服务器上的data.json文件。

内容的提问来源于stack exchange，提问作者FutureProgrammer