js怎么读写本地json文件

在JavaScript中读写本地JSON文件是一个常见的需求，特别是在开发一些需要与本地文件交互的应用时，本文将详细介绍如何在JavaScript中实现这一功能。

我们需要了解，在JavaScript中读写本地文件主要依赖于浏览器的文件API，以下是具体的方法和步骤：

读取本地JSON文件

1、创建文件输入元素：在HTML中创建一个<input>元素，类型设为file，以允许用户选择文件。

Markup

<input type="file" id="fileInput" />

2、监听文件选择事件：使用JavaScript监听input元素的change事件，当用户选择文件后触发。

JavaScript

document.getElementById('fileInput').addEventListener('change', function(e) {
    // 处理文件读取逻辑
});

3、读取文件内容：在事件处理函数中，使用FileReader对象读取文件内容。

JavaScript

function readFileContent(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const content = e.target.result;
        // 解析JSON
        const json = JSON.parse(content);
        console.log(json);
    };
    reader.readAsText(file);
}

以下是完整的读取代码：

JavaScript

document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        readFileContent(file);
    }
});

写入本地JSON文件

写入本地文件稍微复杂一些，因为JavaScript本身没有直接写入文件的能力，但我们可以利用a标签的download属性来实现。

js怎么读写本地json文件

1、创建JSON对象：我们需要创建一个JSON对象。

JavaScript

const data = {
    name: "John",
    age: 30
};

2、将JSON对象转换为字符串：使用JSON.stringify()方法。

JavaScript

const jsonStr = JSON.stringify(data);

3、创建下载链接：使用Blob对象和URL.createObjectURL()方法创建一个下载链接。

JavaScript

const blob = new Blob([jsonStr], { type: 'application/json' });
const url = URL.createObjectURL(blob);

4、创建并点击a：创建一个a标签，设置href属性为上一步创建的URL，并设置download属性为文件名。

JavaScript

const link = document.createElement('a');
link.href = url;
link.download = 'data.json';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

以下是完整的写入代码：

JavaScript

function downloadJSON(data, fileName) {
    const jsonStr = JSON.stringify(data);
    const blob = new Blob([jsonStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
// 使用示例
downloadJSON(data, 'data.json');