Search code examples
javascripthtmlfirefoxbrowsersession-storage

How do I make a visitor able to "remember these form fields", client-side, in 2019?


Traditionally, when I made server-powered websites, I would have just set a bunch of cookies with PHP, and read them with the same, if the user checks a "Remember my details" checkbox when they submit the form.

However, these days, I have a quite different way of making websites: I upload and use only static HTML/JS/CSS files so that the site doesn't depend on/need an "advanced" server, and will be possible to host later P2P/decentralized/"serverless" if/when those networks mature.

This naturally causes many problems and limitations. I know that cookies can be set and read client-side (with JavaScript), but I'm not sure I want to deal with cookies anymore if I can avoid it.

I know vaguely about the concept of client-side data saving/loading with JavaScript's/HTML 5's "session storage" and whatnot. However, it seems to me that I can avoid this as well if HTML 5 has some kind of feature like this:

<input type="text" name="full_name" id="full_name" rememberinput>

or:

<input type="text" name="full_name" id="full_name" value="__PREVIOUS_INPUT_OR_EMPTY__">

Where the "rememberinput" attribute would make the browser/client remember the field for the next time the page is loaded, upon which the value will be filled in to whatever they inputted the last time.

Is there such a thing, or something related? It would be one of the most useful and simple features they could have added to HTML, so I sure hope they thought of this and that we can now not have to deal with a bunch of JavaScript manipulation of the form elements and having to read values from "session storage" or cookies.


Solution

  • The closest thing HTML has is the autocomplete attribute.

    <input type="text" name="full_name" id="full_name" autocomplete="name">
    

    Note:

    The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure.

    … so it might not be data previously entered in the same page that is autocompleted.