最近我准备给我的博客主题增加一个备份主题配置的功能,我使用的方案是通过导出主题的设置来备份。因为不需要导入数据库,所以可以直接通过 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 &#