如何将输入数字存储在localStorage中，然后在以后加载它？

Question

我正在尝试创建一个使用输入数字的程序，单击按钮时将其存储到localStorage中，然后在单击单独的按钮时将其加载。本质上是保存/加载功能。问题是我需要保存另一个函数的ID。我已经尝试在保存/加载函数中调用其他函数，并且尝试了其他各种方法，但是对于使用localStorage（或任何类型的存储）而言，我是一个新手。这是具有我要保存的ID（qty1）的函数，其后是我的保存/加载函数（似乎不起作用）。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;    }}我需要保存函数将id“ qty1”保存到localstorage中，以便加载函数以后可以将其拉回并用保存的值替换当前值。现在，我认为保存/加载功能都不起作用，因为我保存值，重新加载，尝试加载，但没有任何反应。出于测试目的，我禁用了max变量，事实并非如此。

Answer 1

localStorage.setItem("qty", 5);

const qty = localStorage.getItem("qty");

const num = Number(qty); // or const num = parseInt(qty):

console.log(num);

Answer 2

将行替换为localStorage.setItem('qty', qty1);：

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

并与以下行localStorage.getItem('qty');：

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

这应该可以解决问题。

原因： localStorage将所有内容存储为string类型。因此，任何整数或数字也将转换为string。通过使用JSON函数，我们保留了type存储在中的原始值localStorage。

Answer 3

我没有看到从代码中的函数返回函数的目的，也没有看到它与问题文本之间的关系。

我看不到您对localStorage进行get和set硬编码使用的目的。除非变量名将是变量，否则会使读取变得复杂。

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

我相信要问的一个简化版本是...

<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>

但是，您可能能够在HTML标记上完成数据验证，而无需脚本进行验证。