2

I'm about to code, in Javascript some code (involving looping on each <input> and adding listeners):

  • allowing, after keypress, to save all <input> values to localStorage
  • restore all <input> values from localStorage in the case the page/browser has been closed and reopened on the same page

But maybe is there an automatic way, provided by the browsers?

e.g. by adding an attribute to <input>, similar to <input autofocus> (which is not related here)

Question: is there an autosave feature of <form> <input> HTML tags?

Basj
  • 41,386
  • 99
  • 383
  • 673

3 Answers3

4

As far as I know, there is no built-in way to do that, you should do it manually;

function persist(thisArg) {
  localStorage.setItem(thisArg.id, thisArg.value);
}
<input id="test" onchange="persist(this)" />

persist and retrieve all together:

function persist(event) {
  localStorage.setItem(event.target.id, event.target.value);
}

// you may use a more specific selector;
document.querySelectorAll("input").forEach((inputEl) => {
  inputEl.value = localStorage.getItem(inputEl.id);
  inputEl.addEventListener("change", persist);
});
<input id="test" />
Mechanic
  • 5,015
  • 4
  • 15
  • 38
  • Thank you. For future reference, could you also include the code to restore the values from localStorage after a page reload? – Basj Apr 07 '20 at 17:25
  • 1
    PS @Leonardo `event.path[0]` does not work for Firefox, I think `event.target` is better or maybe use this: https://stackoverflow.com/questions/39245488/event-path-is-undefined-running-in-firefox/39245638#39245638? What do you think? – Basj Apr 26 '20 at 19:13
  • @Basj `event.target` is more appropriate then; I didn't know `event.path` isn't implemented in firefox; I'd updated the answer accordingly – Mechanic Apr 27 '20 at 06:45
  • 1
    In your second example, you could put a single listener on `document` instead to save data, and you could update your selector to `input[id]` to ensure all saved elements have IDs (in order to save them by that)... otherwise, you're right! – FZs Apr 27 '20 at 06:50
  • @FZs Not sure to see exactly what you mean, could you post an answer with this? It's always interesting to see slightly many solutions :) – Basj Apr 27 '20 at 07:00
  • 1
    @Basj FZs points out that if some input don't have `id` then `event.target.id` in `.setItem(event.target.id,...` will be undefined and woudn't have correct reference as `key`; so he suggests to use `id` in `document.querySelectorAll` to ensure all element have correct `key` value in localstorage – Mechanic Apr 27 '20 at 07:05
2

there is no automatic way to do that. you have two options :

  1. save the data by code
    example: 
localStorage.setItem('testObject', JSON.stringify(yourObject)); // for storing data
JSON.parse(localStorage.getItem('yourObject')); // for retrieving data


code snippet:

// for saving data

function saveData(el) {
  localStorage.setItem(el.id, JSON.stringify(el.value));
}

// for retrieving data on page load

function getData() {
  var inp = document.getElementById("inp");
  inp.value = JSON.parse(localStorage.getItem('inp')) || "";
}
<body onload="getData()">
    <input id="inp" onchange="saveData(this)" />
</body>
  1. try a helper library like persisto
Raji Hawa
  • 156
  • 1
  • 6
1

Based on the accepted answer, here is a one-liner that can be useful:

document.querySelectorAll('input:not([type="submit"])').forEach(elt => { elt.value = localStorage.getItem(elt.name); elt.addEventListener("change", e => { localStorage.setItem(e.target.name, e.target.value); }); });

It serializes/deserializes the <input>s to localStorage, indexed by their attributes name.

Basj
  • 41,386
  • 99
  • 383
  • 673