Input Field Autosaver

By Witiko Last update Feb 12, 2011 — Installed 422 times.

Script Summary: Make all input fields' and text areas' values survive page reloading or even a browser restart. Never again lose your texts or forms' content because of a misclick, writing the captcha wrong or simply a connection loss.



Version: 1.0.5

Mozilla Firefox users:


I regret to inform you that the script currently

doesn't work in Mozilla Firefox


The save function is called as soon as the script is loaded, because Google Chrome runs the script when the DOM is ready unlike GreaseMonkey, or so it seems. I'd have to use the DOMContentLoaded event. Also apparently to reach localStorage I would have to refer to its instance attached to the unsafeWindow object. Those are just guesses, because unlike in Google Chrome I haven't found any efficient way of debugging userScripts in Mozilla Firefox.

Feel free to alter the source code to make it work with GreaseMonkey or just let me know - I, myself, am quite curious what the problem is.

When updating to a newer version:


Always empty your localStorage. You can do that by clicking Ctrl + Shift + Delete and erasing the records in Google Chrome. The reason is that the format of the localStorage records may have changed between the releases and all the obsolete records would in that case not be automatically deleted by the script. These would hopefully just take up some disk space, but could also prevent the script from working properly.

You can test the script's functionality at the playground!

The functionality:


Calls the function load when the document is loaded.
Calls the function save when the document is about to be closed. (the beforeunload event)

Function Save:
Gathers all:
- Input field elements (except for password, hidden and file input fields)
- Text Areas
- Any elements with the contentEditable attribute set to true

These elements and their values / inner HTML are recorded in the localStorage, given their values / inner HTML aren't either empty or the default ones.
The records are stored based on either (from the most to the least preferred way):
- Element ID
- Element Name and its index between all the fitting elements with the same Name
- Element Class and its index between all the fitting elements with the same Class
- Element index between all the fitting elements

In the latter 3 cases the total count of all Elements and the Elements sharing the same name / class is stored as well. At the end of the function, all previously saved records irrelevant to the current state are erased, so as not to take up any space.

Function Load:
All records are gathered from the localStorage.
The inner HTML of all elements with the contentEditable attribute set to true is stored as the default inner HTML value.
The gathered records's values are restored and assigned to the Elements given the current total count and the stored count of all Elements or the Elements sharing the same name / class matches.