本文介绍了如何使用纯 JavaScript 将数据推送到本地 JSON 文件。由于浏览器的安全限制，直接写入本地文件通常是不允许的。本文将介绍使用 File System Access API 来实现此功能，并详细说明其使用方法、注意事项和替代方案。
使用 File System Access API
File System Access API 允许 Web 应用程序在用户授权的情况下访问用户的本地文件系统。这为在浏览器中操作本地文件提供了可能。
基本步骤：
- 获取文件句柄 (File Handle): 使用 window.showSaveFilePicker() 方法，该方法会弹出一个文件选择器，允许用户选择或创建一个文件。用户选择文件后，会返回一个文件句柄。
- 创建可写文件流 (Writable File Stream): 通过文件句柄的 createWritable() 方法创建一个 FileSystemWritableFileStream 对象，该对象用于向文件中写入数据。
- 写入数据: 使用 FileSystemWritableFileStream 对象的 write() 方法写入数据。需要注意的是，write() 方法接收的是 Blob 对象。
- 关闭文件流: 使用 FileSystemWritableFileStream 对象的 close() 方法关闭文件流，并将数据写入磁盘。
示例代码：
立即学习“Java免费学习笔记（深入）”；
ViaooChain 维奥连锁招商网站系统
下载
网站功能资讯模块资料模块会员模块产品展示模块产品订购模块购物车模块留言模块在线加盟模块多级后台管理系统网站环境本系统为 asp.net开发donet版本为1.1框架数据库为acdess2000授权方式为免费，本版本本地可直接运行（使用http://localhost或http://127.0.0.1访问）如需放到外网通过域名访问，则需通过qq联系我免费索取钥匙文件，将钥匙文件放到网站空间根目录即可
async function saveFile(data) {
try {
// create a new handle
const newHandle = await window.showSaveFilePicker({
types: [{
description: 'JSON files',
accept: {'application/json': ['.json']},
}],
});
// create a FileSystemWritableFileStream to write to
const writableStream = await newHandle.createWritable();
// write our file
await writableStream.write(new Blob([data], { type: 'application/json' }));
// close the file and write the contents to disk.
await writableStream.close();
console.log("File saved successfully!");
} catch (err) {
console.error("Error saving file:", err);
}
}
function saveData() {
let push_data = {
"item": "test",
"deadline": "test2"
};
saveFile(JSON.stringify(push_data, null, 2)); // 使用JSON.stringify格式化数据
}
// 绑定按钮点击事件
document.getElementById('submit').addEventListener('click', saveData);HTML 示例：
注意事项：
- 用户授权： File System Access API 需要用户授权才能访问文件系统。
- 异步操作： 所有与文件系统相关的操作都是异步的，需要使用 async/await 或 Promise 来处理。
- 浏览器兼容性： File System Access API 的兼容性可能有所不同。请查阅 MDN 文档以获取最新的兼容性信息。
- 安全性： 始终要小心处理用户提供的数据，以防止安全漏洞。
代码解释
- saveFile(data) 函数：接收需要保存的数据，并使用 window.showSaveFilePicker() 显示文件选择器。用户选择文件后，创建一个可写文件流，并将数据写入文件。
- saveData() 函数：创建需要保存的数据对象，并调用 saveFile() 函数将其保存到文件中。JSON.stringify(push_data, null, 2) 用于将 JavaScript 对象转换为 JSON 字符串，并进行格式化，使其更易于阅读。
- document.getElementById('submit').addEventListener('click', saveData);：当点击id为"submit"的按钮时，触发 saveData() 函数。
替代方案
如果 File System Access API 不可用或不适合您的需求，可以考虑以下替代方案：
- 服务器端存储： 将数据发送到服务器，由服务器将数据存储到文件中。
- LocalStorage/SessionStorage： 将数据存储在浏览器的本地存储中。这种方法适用于存储少量数据，并且数据不会持久化到文件系统中。
- IndexedDB： 使用 IndexedDB 在浏览器中存储大量结构化数据。
总结
File System Access API 提供了一种在浏览器中操作本地文件的强大方法。通过本文的介绍，您可以了解如何使用该 API 将数据推送到本地 JSON 文件。请务必注意用户授权、异步操作和安全性，并根据您的具体需求选择合适的替代方案。
