需求

编写文档的时候，最害怕例如网页卡死、电脑异常关机、中途断电等问题。如果出现突发情况，那么之前编写的文章将无法找回。因此，实现一个自动保存的功能对于编辑器而言是比较关键且贴心的一个功能。

实现目标

在编写文章、页面时能够自动保存文章

基本思路

何时触发自动保存

  • 编辑文章、页面时，按键停止 5 秒则自动保存当前文档数据至 localStorage 中。
  • 在切换路由、页面失去焦点\页面被其他应用覆盖 之前，自动保存当前文档数据为 草稿。

如何读取保存的内容

分为新建和编辑两种情况。即代码中理解为是否存在编号

  • 新建：如果 localStorage 中存在自动保存的新建文档时，应该先提示用户是否读取上次自动保存的内容。
  • 编辑：先校验 localStorage 中目标文档是否存在，如果存在，则再校验文档更新日期。最后选用更新日期最新的那一个。【此时不删除 localStorage 中自动保存的内容，而且一般来说，是不会存在数据库里比 localStorage 里的更新的内容】

何时删除自动保存内容

  • 当文章保存为**草稿、发布、删除之后，才会根据文章 id 进行 localStorage 中自动保存内容的删除**。
  • 新建文档界面，无论是否读取上次自动保存内容后，都会删除。

注意点

  • localStorage 保存时的 key 为， autosave/{文档类型}/{文档编号} 。例如 autosave/post/1
  • 由于新建的文档，可能不会存在文档编号，因此，对于新建的文档，统一采用 0 作为编号。
  • 自动保存到 localStorage 时，需要记录保存时间。