What are my options when it comes to saving and reloading data with Quill.js?

user_6878945 0
Viewed 2570

I am making a note taking app and it is in the early prototyping stages, so I just want to hack together something that will work for myself. My text editor is built using Quill, and I'm using Vue to structure the whole application. Currently, I don't have a back end, so no server.js. I would like my application to be able to save the information that I put in the editor, and reload the information whenever I rebuild the app.

I checked out the autosave option provided by Quill here But I'm not sure what to do with $.post and where to post it.

Can I simply post it to a local .json file?

What is the best thing to save in my case? The example was logging changes, what am I supposed to do with changes?

I apologize beforehand for the lack of clarity in my question, as I don't know exactly what I should be asking to achieve what I want. Any advice is appreciated.

quill vue.js node.js javascript
1 Answers

So if I understood correctly, what you're asking is how to implement quilljs' auto save feature when you have no server. But, you've already answered your own questions.

  • A simple way to do it would be saving the document into a local json file. But I don't know if you can do that using js.

  • Another way of doing it, is to save the content to the browser's local storage and loading the data every time you load the app.

    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?';
  }
}

Then inside your vue component's mounted(), use the following to fetch the saved data: 

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