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

我正在制作一个笔记应用程序，它正处于早期原型设计阶段，所以我只想拼凑一些适合我自己的东西。 我的文本编辑器是使用Quill构建的，我使用Vue来构建整个应用程序。目前，我没有后端，因此没有server.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?';
  }
}

我签出了Quill提供的autosave选项 但是我不知道如何使用

$。post

以及在哪里发布它

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

在我的情况下，最好保存什么？例如记录更改，我应该如何处理更改

对于我的问题不够清晰，我事先表示歉意，因为我不知道我到底应该问什么才能实现我想要的。

---

非常感谢您的建议。

如果我理解正确的话，您要问的是在没有服务器的情况下如何实现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组件的

挂载（）

中，使用以下命令获取保存的数据：

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

---

嘿，Stormix，我正在试图理解你的答案（我是noob）你说的vue组件挂载是什么意思？哦，OP使用的是vue js，它有一个名为挂载的生命周期挂钩，在呈现页面/组件时执行。将其视为“页面加载”侦听器。如果您没有使用vue js，那么您可以忽略该部分，并在需要使用该代码段时获取存储的信息。