第 6 步:将待办事项导出到文件系统

在此步骤中,您将学习以下内容:

  • 如何获取对外部文件系统中文件的引用。
  • 如何写入文件系统。

完成此步骤预计用时:20 分钟。
若要预览您将在此步骤中完成的内容,请跳转到本页底部 ↓

导出待办事项

此步骤将向应用添加一个导出按钮。点击时,当前的待办事项会保存到文本中 所有文件如果该文件已存在,系统会将其替换。否则,系统会创建一个新文件。

更新权限

对于只读权限,可以采用字符串形式请求文件系统权限,也可以使用 其他属性例如:

// Read only
"permissions": ["fileSystem"]

// Read and write
"permissions": [{"fileSystem": ["write"]}]

// Read, write, autocomplate previous input, and select folder directories instead of files
"permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}]

您需要拥有读写权限。在 manifest.json 中,请求 {fileSystem: [ "write" ] } 权限:

"permissions": [
  "storage", 
  "alarms", 
  "notifications", 
  "webview",
  "<all_urls>", 
  { "fileSystem": ["write"] } 
],

更新 HTML 视图

index.html 中,添加导出到磁盘按钮和 div(应用会显示状态消息):

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  <button id="exportToDisk">Export to disk</button>
  <div id="status"></div>
  ...
</footer>

同样在 index.html 中,加载 export.js 脚本:

...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>

创建导出脚本

使用以下代码新建一个名为 export.js 的 JavaScript 文件。将其保存在 js 文件夹中。

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath