How do I store an input number in localStorage and then load it later?

Question

I am trying to create a program which takes an input number, stores it into localStorage on a button click and then loads it when a separate button is clicked. Essentially a save/load feature. The problem is that I need to save an ID from another function.

I've already tried to call the other function within my save/load functions and I've tried various other ideas, but I'm extremely new to using localStorage (or any kind of storage).

This is the function with the ID I want to save (qty1) followed by my save/load functions (which don't seem to work).

function modify_qty(val) {
    var qty = document.getElementById('qty1').value;
    var new_qty = parseInt(qty,10) + val;
    var max = document.getElementById('max1').value;

    if (new_qty < 0) {
        new_qty = 0;
    }
    if (isNaN(new_qty)) {
        new_qty = 0;
    }
    if (new_qty > max) {
        new_qty = max;
    }

    document.getElementById('qty1').value = new_qty;
    return new_qty;
}
function save() {
    return function(modify_qty) {
    localStorage.setItem('qty', qty1);
    }
}
function load() {
    return function(modify_qty) {
    var qty1 = localStorage.getItem('qty');

    document.getElementById('qty1').value = qty1;
    return qty1;
    }
}

I need the save function to save the id "qty1" into localstorage so that the load function can later pull it back and replace the current value with the saved value. Right now, I don't think either of the save/load functions are working, as I save the value, reload, try to load, and nothing happens. For my testing purposes, I have the max variable disabled, so that's not it.

What's the purpose of `return function(modify_qty) {` inside your load and save functions? — Walk, May 11 '19 at 20:50
Possible duplicate of [How to get JS variable to retain value after page refresh?](https://stackoverflow.com/questions/16206322/how-to-get-js-variable-to-retain-value-after-page-refresh) — Heretic Monkey, May 11 '19 at 22:06

score 1 · Answer 1 · edited Feb 04 '21 at 06:37

1

localStorage.setItem("qty", 5);

const qty = localStorage.getItem("qty");
const num = Number(qty); // or const num = parseInt(qty):
console.log(num);

edited Feb 04 '21 at 06:37

Skully

2,882
3
20
31

answered Feb 03 '21 at 22:19

Md Misbauddin Chowdhury

424
4
13

was it helpful? – Md Misbauddin Chowdhury Mar 04 '21 at 18:31

score 0 · Answer 2 · answered May 11 '19 at 20:55

0

You have used qty1 variable inside the save function which is not defined inside save function nor outside of save function. qty1 variable used as a local variable inside load function

answered May 11 '19 at 20:55

Md Misbauddin Chowdhury

424
4
13

Kobe · Answer 3 · 2019-05-11T21:11:10.970

I am unaware of your HTML, but it seems you are over-complicating the issue.

Correct me if I'm wrong, but your intent is to save a variable in localstorage on button press, and load it on another button press. You already have the code written, but I am unsure why you are returning a function when calling either load() or save().

<body>
  <span>qty1: </span>
  <input type="number" id="qty1"></input>
  <button onclick="load()">Load</button>
  <button onclick="save()">Save</button>
</body>

<script>
function save() {
  const qty1 = document.getElementById('qty1').value;
  localStorage.setItem('qty', qty1);
}

function load() {
  const qty1 = localStorage.getItem('qty');
  document.getElementById('qty1').value = qty1;
}
</script>

Calling save() will grab the value from the element with the id of 'qty1' and save it. Calling load() will grab the value from localstorage and set the element to it.

EDIT: Added HTML to show how it should work

I came up with the same solution, given the limited info. – mepley May 11 '19 at 21:06 — mepley, May 11 '19 at 21:06
Yeah, there's not much to go by :p – Kobe May 11 '19 at 21:08 — Kobe, May 11 '19 at 21:08

score 0 · Answer 4 · answered May 11 '19 at 21:03

For your save() and load() functions, try the following:

function save() {
  var qty1 = document.getElementById('qty1').value;
  localStorage.setItem('qty', qty1);
}

function load() {
  var qty1 = localStorage.getItem('qty');
  document.getElementById('qty1').value = qty1;
}

vkrn · Answer 5 · 2020-04-16T08:14:49.410

In addition to the other answers you have to parse the values from the inputs to int before you can use them for comparison in your modify function like: var qty = parseInt(document.getElementById('qty1').value);

function modify_qty(val) {
   var qty = parseInt(document.getElementById('qty1').value);
   var new_qty = parseInt(qty,10) + val;
   var max = parseInt(document.getElementById('max1').value);

   if (new_qty < 0) {
      new_qty = 0;
   }
   if (isNaN(new_qty)) {
      new_qty = 0;
   }
   if (new_qty > max) {
      new_qty = max;
   }
   document.getElementById('qty1').value = new_qty;
   return new_qty;
}

score 0 · Answer 6 · answered May 11 '19 at 21:57

I'm not seeing the purpose of returning a function from a function in your code and i don't see how that relates to the text of your question.

I'm not seeing the purpose of your hard coded use of get and set with localStorage. Unless the variable name is going to be variable it complicates reading.

localStorage.setItem('qty',123); === localStorage.qty=123;

A simplified version of what I believe to be asking would be ...

<input type="number" id="value">
<input type="button" id="set" value="set">
<input type="button" id="restore" value="restore">

<script>
    document.getElementById('set').addEventListener("click", function() {
        localStorage.qty = document.getElementById('value').value;
        });

    document.getElementById('restore').addEventListener("click", function() {
        document.getElementById('value').value= localStorage.qty;
        });

    document.getElementById('value').addEventListener("change", function() {
        let max = 10;
        if (this.value < 0) {
            new_qty = 0;
        }
        if (this.value > max) {
            this.value = max;
        }
        });
</script>

However, you may be able to the data validation done on the HTML tag and not require script to validate.

score 0 · Answer 7 · answered May 13 '19 at 08:53

Replace the line localStorage.setItem('qty', qty1); with:

localStorage.setItem('qty', JSON.stringify(qty1));

and the line localStorage.getItem('qty'); with:

JSON.parse(localStorage.getItem('qty'));

This should solve the problem.

Reason: localStorage stores everything as string type. So any integers or numbers are also converted to string. By using JSON functions, we retain the original type of the value that we store into localStorage.

How do I store an input number in localStorage and then load it later?

7 Answers7