javascript - 在使用 Quill.js 保存和重新加载数据时，我有哪些选择？

Question

我正在制作一个笔记应用程序，它处于早期原型(prototype)设计阶段，所以我只想编写一些对自己有用的东西。 我的文本编辑器是使用 Quill 构建的，我使用 Vue 来构建整个应用程序。目前，我没有后端，所以没有 server.js。 我希望我的应用程序能够保存我放入编辑器中的信息，并在重建应用程序时重新加载信息。

我检查了 Quill 提供的自动保存选项 here 但我不确定如何处理 $.post 以及将其发布到哪里。

我可以简单地将其发布到本地 .json 文件吗？

就我而言，最好保存什么？该示例正在记录更改，我应该如何处理更改？

对于我的问题不够清晰，我事先表示歉意，因为我不知道我应该问什么才能实现我想要的目标。 如有任何建议，我们将不胜感激。

Answer 1

所以，如果我没理解错的话，你问的是如何在没有服务器的情况下实现quilljs的自动保存功能。但是，您已经回答了自己的问题。

• 一种简单的方法是将文档保存到本地 json 文件中。但我不知道你是否可以使用js来做到这一点。

• 另一种方法是将内容保存到浏览器的本地存储中，并在每次加载应用程序时加载数据。

  var Delta = Quill.import('delta');
  var quill = new Quill('#editor-container', {
    modules: {
      toolbar: true
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'
  });
  
  // Store accumulated changes
  var change = new Delta();
  quill.on('text-change', function(delta) {
    change = change.compose(delta);
  });
  
  // Save periodically
  setInterval(function() {
    if (change.length() > 0) {
      console.log('Saving changes', change);
      // Save the entire updated text to localStorage
      const data = JSON.stringify(quill.getContents())
      localStorage.setItem('storedText', data);
      change = new Delta();
    }
  }, 5*1000);
  
  // Check for unsaved data
  window.onbeforeunload = function() {
    if (change.length() > 0) {
      return 'There are unsaved changes. Are you sure you want to leave?';
    }
  }
  

然后在 vue 组件的 mounted() 中，使用以下代码获取保存的数据:

const data = JSON.parse(localStorage.getItem('storedText'));