[Tip] A cute way to remember text inputs (without the remember-plugin)
[Tip] A cute way to remember text inputs (without the remember-plugin)
This likely won't be relevant to a lot of devs here, because the remember plugin does the job fine in most cases, but:
Here's a normal text input (id is not needed for this example, but is almost always needed so adding it here):
<input id="thingyInput">
And here's one which remembers what you type into it even after page refresh:
<input id="thingyInput" oninput="localStorage.thingy=this.value" value="[localStorage.thingy || '']">
Of course, the remember-plugin can do this for you, but I often find myself reaching for the above pattern for its simplicity.
localStorage is what the remember-plugin uses behind the scenes - whatever you store in it will be persisted even after page refresh. It's a built-in browser/JavaScript feature - not something that's specific to Perchance.
The || '' in [localStorage.thingy || ''] means or ''. In other words, it means or output nothing. If you want a default value for when the user loads the page for the first time, you could write [localStorage.thingy || 'blah'] which means "use whatever is in localStorage.thingy if it exists, otherwise use 'blah'"
You're viewing a single thread.
I want a suggestion. And a report as well. The remember plug-in is totally amazing, I can agree on it 100%! But, the remember plug-in has one flaw; it cannot detect programmatically changed values.
Now, calling it a flaw might be an overstatement, because I, myself created an entirely new script to perform automatic saved and load of values, and that too cannot detect changes made hy program. I tried to tweak it a bit, but I was still unsuccessful.
Fair point! I think I can fix this (using MutationObserver), but it'll need to be opt-in (e.g. via an extra keyword like
@includeProgrammaticInputsor something [but ideally shorter...]), since it's a "breaking change". But before I do: Another flaw is that you can't choose to only remember specific inputs, right? My memory is a little fuzzy and I can't see anything about that on the page or in the code. If so, I'll try fixing both issues at once.