使用 JavaScript 将数据推送到本地 JSON 文件

本文介绍了如何使用纯 JavaScript 将数据推送到本地 JSON 文件。由于浏览器的安全限制，直接写入本地文件通常是不允许的。本文将介绍使用 File System Access API 来实现此功能，并详细说明其使用方法、注意事项和替代方案。

使用 File System Access API

File System Access API 允许 Web 应用程序在用户授权的情况下访问用户的本地文件系统。这为在浏览器中操作本地文件提供了可能。

基本步骤：

1. 获取文件句柄 (File Handle): 使用 window.showSaveFilePicker() 方法，该方法会弹出一个文件选择器，允许用户选择或创建一个文件。用户选择文件后，会返回一个文件句柄。
2. 创建可写文件流 (Writable File Stream): 通过文件句柄的 createWritable() 方法创建一个 FileSystemWritableFileStream 对象，该对象用于向文件中写入数据。
3. 写入数据: 使用 FileSystemWritableFileStream 对象的 write() 方法写入数据。需要注意的是，write() 方法接收的是 Blob 对象。
4. 关闭文件流: 使用 FileSystemWritableFileStream 对象的 close() 方法关闭文件流，并将数据写入磁盘。

示例代码：

立即学习“Java免费学习笔记（深入）”；

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 示例：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

30

查看详情

<button id="submit">Submit</button>

注意事项：

• 用户授权： File System Access API 需要用户授权才能访问文件系统。
• 异步操作： 所有与文件系统相关的操作都是异步的，需要使用 async/await 或 Promise 来处理。
• 浏览器兼容性： File System Access API 的兼容性可能有所不同。请查阅 MDN 文档以获取最新的兼容性信息。
• 安全性： 始终要小心处理用户提供的数据，以防止安全漏洞。

代码解释

1. saveFile(data) 函数：接收需要保存的数据，并使用 window.showSaveFilePicker() 显示文件选择器。用户选择文件后，创建一个可写文件流，并将数据写入文件。
2. saveData() 函数：创建需要保存的数据对象，并调用 saveFile() 函数将其保存到文件中。JSON.stringify(push_data, null, 2) 用于将 JavaScript 对象转换为 JSON 字符串，并进行格式化，使其更易于阅读。
3. document.getElementById('submit').addEventListener('click', saveData);：当点击id为"submit"的按钮时，触发 saveData() 函数。

替代方案

如果 File System Access API 不可用或不适合您的需求，可以考虑以下替代方案：

• 服务器端存储： 将数据发送到服务器，由服务器将数据存储到文件中。
• LocalStorage/SessionStorage： 将数据存储在浏览器的本地存储中。这种方法适用于存储少量数据，并且数据不会持久化到文件系统中。
• IndexedDB： 使用 IndexedDB 在浏览器中存储大量结构化数据。

总结

File System Access API 提供了一种在浏览器中操作本地文件的强大方法。通过本文的介绍，您可以了解如何使用该 API 将数据推送到本地 JSON 文件。请务必注意用户授权、异步操作和安全性，并根据您的具体需求选择合适的替代方案。

以上就是使用 JavaScript 将数据推送到本地 JSON 文件的详细内容，更多请关注php中文网其它相关文章！