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

导出

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

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

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

下面定义一个按钮和一个链接：

<button type="button">导出文件</button>
<a href="#"></a>

下面是 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(blob); //  创建一个 URL 对象并传给 a 的 href
  link.download = "config.json"; //  设置下载的默认文件名
  link.click(); //  点击下载链接
};

下面是用到的一些对象和方法说明：

JSON.stringify() 方法：

把 JSON 对象转换为 JSON 字符串，如果你导出的直接就是字符串的话，就可以不用转换。

Blob() 构造函数：

Blob 对象表示一个不可变、原始数据的类文件对象。

Blob 构造函数可以返回一个 Blob 对象，参数就是要转换的内容数组。

URL.createObjectURL() 方法：

创建一个 URL 对象，返回创建后的 URL 对象，参数可以是 Blob 或 File 对象。

上面把创建的 URL 对象 赋给了 a 的 href。

点击 导出文件 按钮后就会弹出一个文件下载的对话框，默认的文件名是 config.json，点击保存或下载就可以导出文件了。

导入

导入可以通过文件表单和拖放的方式来选择文件，我这里使用的是文件表单。

下面是一个文件表单：

<input type="file" id="file-select">

如果想美化文件表单 可以把文件表单隐藏，通过按钮来调用文件表单的点击方法。

下面是 JS：

var fileSelect = document.querySelector('#file-select'); //  选择文件表单

//  文件表单的内容改变，也就是文件选择完成
fileSelect.onchange = function () {
  if (this.value === '' || this.files.length < 1) {
    return false; //  如果没有选择文件就什么也不做
  }

  var reader = new FileReader(); //  创建 FileReader对象
  reader.readAsText(this.files[0]); //  把文件读取为字符串
  //  文件加载完成
  reader.onload = function(ev) {
    var jsonStr = ev.target.result; //  把字符串传给 jsonStr
    jsonStr = JSON.parse(jsonStr); //  把 JSON 字符串转换为 JSON 对象
    console.log(jsonStr); //  在控制台输出 JSON
  };
};

下面是用到的一些对象和方法说明：

FileReader() 对象：

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader 的 readAsText() 方法：

把文件读取为字符串。

FileReader 的 onload 事件：

文件读取完成后会触发 onload 事件，函数可以接收一个事件对象，事件对象的 result 属性就是读取的文件内容。

JSON.parse() 方法：

把 JSON 字符串转换为 JSON 对象，参数是要转换的 JSON 字符串，返回转换后的 JSON 对象。

之前写过一篇 预览本地图片 的教程，也是通过 FileReader 来读取文件。

以上就是 JavaScript 导出和读取文件的简单演示，上面的导出文件可以导出任何文件，不局限于 JSON。导入文件可以导入任何浏览器能读取的文件，即便是浏览器无法读取的文件也可以通过字符串的方式读取文件。

链接的 download 属性是 HTML5 中加入的，目前 IE 系列的浏览器是不支持的，即便是 IE 11 也不支持，微软的浏览器需要 Edge 才可以用。