Trying to get text input values to stay after refresh with localStorage, what's wrong with my code?

Question

I am trying to get new input values in a given textbox to save even after refreshing. Here is my attempt:

Event handler script:

//store value after changes
function store(){
    var text = document.getElementById("qty").value;
    localStorage.setItem("qty",text);
}
//local storage to keep values after refresh
function getValue(){
    var storedText = localStorage.getItem("qty");

    if(storedText != null){
        document.getElementById("qty").value = storedText; 
    }
    else
        document.getElementById("qty").value = 0;
}

Event registration script:

document.getElementById("qty").onkeyup = store;
document.getElementById("qty").onload = getValue;

HTML:

<input type="text" id="qty" name="qty" class="small w-25 text-right" value="1">

My reasoning is that, once values are changed (onkeyup), set the new value into localStorage. Then if I refresh page, onload should activate and use getValue() to set the textbox value to the previously set localStoragevalue. However, when I refresh, it's always 1. I think I may be misunderstanding something regarding localStorage. Any help is appreciated thanks.

*EDIT: got it to work thanks to comment below by changing getValue to getValue()

However now I have this new problem:

I have the text input box on multiple pages. Now that I've got it to work on saving new input, it also changes the input value of all the other text boxes because they all have the same id. Would there be a way to make them save their own modified values instead of all the same without changing ids?

It's generally better to use `addEventListener('load', fn)` rather than assigning to `onload`. For one thing, you can add more than one listener without overwriting the last one added. Also, an `input` element does not expose a `load` event; that's why the answer "works": it runs the function before any event fires. — Heretic Monkey, Jul 29 '20 at 20:23

Ryan Wilson · Accepted Answer · 2020-07-29T20:38:12.203

1

I tested this on jsfiddle - (https://jsfiddle.net/dyLbgfk2/17/), switched this line:

document.getElementById("qty").onload = getValue;

To:

document.getElementById("qty").onload = getValue();

It appears to work as intended with this slight modification.

Thanks to @Heretic Monkey for pointing out that the input element has no onload event.

It would be better to do this with your code and have this run once the DOM has loaded:

document.addEventListener("DOMContentLoaded", function() {
    //document.getElementById("qty").onkeyup = store;
    //Better to use .addEventListener()
    document.getElementById("qty").addEventListener("keyup", store, false); 
    getValue(); // Just call the function as this event will fire once the DOM
                //Including your input has loaded
});

edited Jul 29 '20 at 20:38

answered Jul 29 '20 at 19:46

Ryan Wilson

10,223
2
21
40

You're right! It did work, do you have any idea why? Is this because of the nature of 'onload'? – Hello World Jul 29 '20 at 20:10
It's just running the function, without reference to the (non-existent) `onload` event of the `input`. – Heretic Monkey Jul 29 '20 at 20:25
@HereticMonkey You're right. I had to look that up. Thanks for the clarification. – Ryan Wilson Jul 29 '20 at 20:27
Thanks guys, I have an additional question: I have this text input box on multiple pages. Now that I've got it to work on saving new input, it also changes the input value of all the other text boxes because they all have the same id. Would there be a way to make them save their own modified values instead of all the same without changing ids? – Hello World Jul 29 '20 at 20:43
@HelloWorld You shouldn't be using the same `id` for multiple elements. `id` is unique and should be used as such. – Ryan Wilson Jul 29 '20 at 20:49
@RyanWilson I see, then should I be creating a new function for every one of the different ids which I want the same effect for? I can't think of a way to set the same function effect to multiple different ids – Hello World Jul 29 '20 at 20:56
1

@HelloWorld You can add the event listener to the input's by `className`, it is a common approach when you have multiple elements which use the same event listener function. Please see this related post (https://stackoverflow.com/questions/40956717/how-to-addeventlistener-to-multiple-elements-in-a-single-line). You can use the keyword `this` inside of the callback function when using `.addEventListener` to reference the element which triggered the callback, you could then get the unique id of the input and use that as a key/value for `localStorage` – Ryan Wilson Jul 30 '20 at 11:18
@RyanWilson Thanks, I tried to do the approach you mentioned but was unsuccessful. I will open another question for that and use getValue() for now. – Hello World Aug 01 '20 at 20:40

Trying to get text input values to stay after refresh with localStorage, what's wrong with my code?

1 Answers1