如何使用JavaScript修改独立文本文件data.txt的内容

你目前使用的是运行在浏览器端的客户端JavaScript代码，受浏览器沙箱安全机制限制，没有直接修改服务器上data.txt文件的权限，你提到的类似$change("#data.txt").text = "HelloWorld"的写法不存在。

实现修改文件的正确流程 #

需要搭配服务端程序完成操作，整体逻辑如下：

• 前端新增修改请求逻辑，把要写入的新内容发送给服务端接口，示例前端代码如下：

$(document).ready(function(){
    // 原有加载文件逻辑
    $("#btn").click(function(){
        $("#txt").load("data.txt");
    });
    // 新增修改文件逻辑，可绑定到对应操作按钮比如#editBtn
    $("#editBtn").click(function(){
        const newContent = "HelloWorld";
        $.post("/api/writeData", {content: newContent}, function(res){
            alert("修改成功");
        })
    });
});

• 服务端编写对应接口接收前端传递的内容，完成本地文件写入操作。以Node.js的Express框架为例，服务端示例代码：

const fs = require('fs');
const express = require('express');
const app = express();
app.use(express.urlencoded({extended: true}));

// 写文件接口
app.post('/api/writeData', (req, res) => {
    // 这里建议加权限校验，避免恶意修改文件
    const content = req.body.content;
    fs.writeFile('./data.txt', content, (err) => {
        if(err) return res.status(500).send('修改失败');
        res.send('修改成功');
    })
});

app.listen(3000);

• 注意事项：一定要在服务端增加权限校验逻辑，避免未授权的用户随意修改你的文件。

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