读取json本地js处理输出html,JavaScript 通过浏览器导出和读取本地 JSON 文件

最近我准备给我的博客主题增加一个备份主题配置的功能，我使用的方案是通过导出主题的设置来备份。因为不需要导入数据库，所以可以直接通过 JS 获取表单内容，然后导出为 JSON。导入配置也是直接读取本地的 JSON 文件，然后根据 JSON 的配置信息设置表单。这里就简单写一下 JS 导出和读取文本文件。

导出

我需要实现的效果是点击导出后弹出一个文件下载对话框，点击 保存 或 下载 就可以导出文件。

在 HTML5 中 a 标签增加了一个 download 属性，通过 download 属性，可以直接通过文件下载对话框来下载浏览器能打开的文件。

一般情况下给 a 的 href 指定一张图片或 MP3 地址，点击链接浏览器会直接读取文件，而通过 download 属性，浏览器会直接弹出文件下载对话框。我这里导出文件也会用到 a 标签的 download 属性。

下面定义一个按钮和一个链接：导出文件

下面是 JS：var btn = document.querySelector("button"); // 选择按钮

var link = document.querySelector("a"); // 选择链接

// 用来导出的 JSON

var jsonStr = {

name: "我的博客",

url: "https://www.misterma.com/",

};

// 导出文件按钮点击

btn.onclick = function () {

jsonStr = JSON.stringify(jsonStr); // 把 JSON 对象转换为字符串

var blob = new Blob([jsonStr]); // 创建 blob 对象

link.href = URL.createObjectURL(b