Form Data Cacher (JavaScript Class)

While building my Mass Image Generator experiment (inspired by a need I had over at Iconduck), I kept losing the state of my form inputs.

It was particularly frustrating, because the form input values needed to be formatted precisely.

From that, Form Data Cacher was born.

Right now, it's still very much a proof of concept (it only works with <textarea /> and some <input /> tags), but it's proved useful. Therefore, I wanted to open source it.

It works by storing some form values in a client's localStorage, and recalling them when the page subsequently loads.

Usage is straight forward: apply a specific class name to the desired HTMLFormElements, and it'll kick right in.

It's been open sourced, and is available on GitHub.

---

Example

Sample textarea If you change this textarea value, and then reload the page, you'll see your value (not this one).

---

Implementation Code

FormDataCacher.init();

---

Todo

• Support checkboxes
• Support radio buttons
• Support select inputs
• Listen to DOM changes to kick in for newly inserted forms
• Options for forms with the same name, but across multiple pages

---

References

• GitHub code