给起始页项目增加了导入导出功能

下午回到家之后继续对「奇趣起始页」项目做了一些更新，主要是个人设置项的“导入导出”功能。这个功能我也大致知道怎么做，就是生成一个 Blob 对象和链接，然后触发浏览器下载就是了，可此前一直没有研究过相关的 API，一直拖一直拖，今天就趁机边学边做吧！

首先做的是导出，原理确实如上所述，把 JSON 变成字符串之后转为 Blob 对象再下载就行，关键核心代码就这么多。在 MDN 上搜索关键词“download”的时候还发现有个 downloads 的 API，不过属于浏览器扩展，网页本身无法使用，且 Safari 目前并不支持。

// 转字符串
const blob = new Blob([ JSON.stringify(data.user_set, null, 2) ], { type: "application/json" });

// 生成链接并触发下载
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = `userset-${parseInt(new Date().getTime() / 1000)}.json`;
link.click();

导入功能，其实就是利用 Input 里面的 Files 对象实现，因为 File 对象本身就是特殊类型的 Blob，所以我们能用 Blob 的 text 方法获取原文（返回 Promise），之后无脑丢给 JSON.parse 处理就行，为了处理异常（JSON 格式错误），可以使用 try ... catch。

file.text().then(text => {
  try{
    const json = JSON.parse(text);

    // 覆盖当前运行的个人设置，并存储 LocalStorage
  }
  catch(e){
    // JSON 文件格式错误，请检查
  }
});

总体来说，这两个功能整起来都不难，也许难的还是遇到难题之后想解决掉的那种欲望吧！

2022-03-26