前端Todo项目实现新增任务自动写入JSON文件并渲染的方案咨询

• 你用到的fs是Node.js专属的服务端模块，浏览器运行的前端JS处于沙箱安全限制下，没有直接读写本地文件系统的权限，这是你代码无法运行的根本原因。
• 你当前是纯前端静态页面的架构，没有后端服务支撑的情况下，无法直接修改项目目录下的data.json源文件。

方案1：使用浏览器本地存储实现（纯前端无后端，适合练手项目） #

不需要修改本地json文件，用localStorage持久化存储任务数据，刷新页面也不会丢失，完全满足Frontend Mentor项目的功能要求：
首先调整初始化逻辑：

// 全局存储任务列表
let todoData = []
// 初始化优先读本地存储，没有再加载默认data.json
const initData = () => {
    const localData = localStorage.getItem('todoList')
    if(localData) {
        todoData = JSON.parse(localData)
        dataUse(todoData)
    } else {
        getData()
    }
}

// 原getData逻辑调整
getData = () => {
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status ==200) {
            todoData = JSON.parse(this.responseText)
            dataUse(todoData)
            // 把默认数据存到本地存储
            localStorage.setItem('todoList', JSON.stringify(todoData))
        }
    }
    xhttp.open("GET", "data.json", true);
    xhttp.send();
}

// 页面加载调用初始化
initData()

新增任务逻辑，你拿到输入框内容后调用即可：

const addNewTask = (taskContent) => {
    // 生成唯一任务标识
    const newTask = {
        name: `task${todoData.length + 1}`,
        todo: taskContent
    }
    todoData.push(newTask)
    // 更新本地存储
    localStorage.setItem('todoList', JSON.stringify(todoData))
    // 单独渲染新增任务，不需要重新遍历所有数据
    dataUse([newTask])
}

方案2：搭建轻量后端服务（适合想练习全栈能力的场景） #

如果确实需要把数据持久化存在服务端的json文件里，可以用Node.js写简单接口支撑：

1. 安装依赖后写服务端代码，用node server.js运行：

// server.js
const express = require('express')
const fs = require('fs')
const cors = require('cors')
const app = express()
app.use(cors())
app.use(express.json())

// 获取任务列表接口
app.get('/tasks', (req, res) => {
    fs.readFile('./data.json', 'utf-8', (err, data) => {
        res.send(JSON.parse(data))
    })
})

// 新增任务接口
app.post('/add-task', (req, res) => {
    fs.readFile('./data.json', 'utf-8', (err, data) => {
        const taskList = JSON.parse(data)
        taskList.push(req.body)
        fs.writeFile('./data.json', JSON.stringify(taskList, null, 2), () => {
            res.send({code: 200, msg: '新增成功'})
        })
    })
})

app.listen(3000, () => console.log('服务运行在http://localhost:3000'))

2. 前端把原有的静态json请求改成调用后端接口，新增任务时发POST请求到/add-task接口即可。

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