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”保存到本地存储中，以便加载功能以后可以将其拉回并用保存的值替换当前值。现在，我认为保存/加载功能都不起作用，因为我保存了值，重新加载，尝试加载，但没有任何反应。出于测试目的，我禁用了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

您已在保存函数内部使用了qty1变量，该变量未在保存函数内部或保存函数外部定义。 qty1变量用作加载函数内的局部变量

Answer 3

我不知道您的HTML，但看来您使问题变得过于复杂了。

如果我错了，请纠正我，但您的意图是在按下按钮时将变量保存在本地存储中，然后在另一次按下按钮时将其加载。您已经编写了代码，但是我不确定为什么调用load()或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>

调用save()将从ID为'qty1'的元素中获取值并保存。调用load()将从本地存储中获取值并将其设置为该元素。

编辑：添加了HTML以显示其工作方式

Answer 4

对于您的save()和load()函数，请尝试以下操作：

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

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

Answer 5

除了其他答案外，您还必须先将输入中的值解析为int，然后才能在修改函数中使用它们进行比较，例如：var qty = parseInt(document.getElementById('qty1').value);

Answer 6

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

我看不到您对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标记上完成数据验证，而无需脚本进行验证。

Answer 7

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

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

和localStorage.getItem('qty');行，其中：

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

这应该可以解决问题。

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

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

7 个答案: