Don't Lose Everything You Just Typed In

If you’ve ever filled out a long form online and lost its contents before, you might feel a bit nervous about anything going wrong after you’ve been typing for 30 minutes and there’s no save button. For me, even two minutes of lost typing can be a frustration.

There are browser extensions that do this for you, and I’ve used them, but not with consistent success. So here is my modern vanilla solution: slightly more manual, but way more transparent.

Those long answers you’re typing are generally stored in boxes that are technically known as <textarea> elements. You can easily dump their contents by opening up your browser’s built-in developer console (on most of the browsers I use on Linux and Windows, pressing F12 will open it, but a quick web search will tell you how to do it on yours.) Just paste in this code and hit Enter:

document.querySelectorAll('textarea').forEach(t => console.log(t.value))
Copy

You can then triple-click anywhere in the dumped text to highlight the whole block of it, then you can copy that and paste it in a text editor and save it.

However, a backup is only as useful as its restore process. If you have a lot of text areas, it’s nice to have the text, but it would be even nicer to just have it copied back into the right boxes for you. If that’s what you want, run this code instead of the above:

var a = []; document.querySelectorAll('textarea').forEach(t => a.push(t.value)); console.log('var a = ' + JSON.stringify({a:a}) + '; document.querySelectorAll("textarea").forEach((t, i) => {t.value = a.a[i];});');
Copy

This time, your text comes out as part of some JavaScript code. That’s good!

Again, triple-click the output to select it, then copy it and paste it somewhere and save it. This is your backup. To restore, first get rid of ‘undefined’ at the end (if present), then paste that into the console when you’re on the same page again, and hit Enter. It will automatically take each block of text and put it back into the corresponding text area.