so today I want to show you guys how I implemented a autosave feature for an action text tricks editor and a rails application we're going to generate a new stimulus controller for Autos saving our journal entries I want to bind this stimulus controller to this form I already have a separate and completely unrelated prompt controller bound to this form we can buy the autosave controller as well by space separating the new controller to the data controller attribute next we'll Define the target i
n our stimulus controller and wire them up in our form now I'm going to use the web storage API to autosave the journal entry to the client's device before it's sent to my server for long-term persistence so I'm going to use the Dom ID of the journal entry to be the key for my local storage lookup so the local storage API is a blocking API meaning that when you call get or set item it's going to block the main thread so so we're going to want a way to minimize the amount of times we autosave the
journal entry we're going to do this by using a technique called debouncing This is a technique where we're going to wait a small period of time after the user stops typing to autosave their working progress now we could Implement our own debounce function but I'm going to integrate with the battle tested low Dash library for this purpose now I'm using import map so I'm going to pin the debal function from low Dash now when our stimulus controller connects we'll debounce our autosave function s
o that it only runs after 500 milliseconds of inactivity and we'll listen to the tricks change event to signal that we need to autosave so what does Autos saving entail well we'll look at the editor's value and if there is content we'll save it to local storage otherwise we'll remove it now you might be wondering why I decided to use session storage instead of local storage in this application well they both implement the same storage API interface so I could swap out one for the other no proble
m since this is a journaling application I decided to use session storage to clear the storage once the user closes the tab or closes the browser when the controller connects we'll check to see if there is any content in local storage if there is we'll set the editor's value accordingly now this pretty much completes the fun fun ality of Autos saving the work in progress journal entries to local storage but I want to take it one step further and warn the user that they might lose their data if t
hey close the page or navigate away so if they haven't typed anything at all I'm going to skip this warning entirely so if they're navigating away but they're still on my application they're going to be navigating via turbo in this case I want to confirm that their changes may not be saved if they accept that then we'll proceed with the page navigation otherwise we'll prevent the navigation from happening so that the user can finish up their journal entry without any data loss now there's going
to be two types of events we're going to need to listen to the first is for intera navigation and that's going to be the turbo event and the second type is if the user tries to close the tab or close the browser while they have a journal entry in progress finally when this controller disconnects will remove the event listeners and remove their work in progress journal entry from their local storage and with that our autosave controller is complete we'll do a little test here I'll refresh we can
see the before unload event is triggered I'll say reload and we can see that our data is still there I'll navigate away this is using turbo so I'm using a window confirm we'll navigate away and you can see here that the data is gone that's because when the controller disconnects we remove the work in progress journal entry from the local storage so I hope you found this helpful let me know in the comments how you would improve this autosave controller until then I'll see you in the next video
Comments