如何将输入的数字存储在 localStorage 中，然后再加载？答案

【问题标题】：How do I store an input number in localStorage and then load it later?如何将输入的数字存储在 localStorage 中，然后再加载？
【发布时间】：2019-05-11 20:45:40
【问题描述】：

我正在尝试创建一个程序，它接受一个输入数字，在单击按钮时将其存储到 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;
    }
}

我需要 save 函数将 id "qty1" 保存到 localstorage 中，以便 load 函数稍后可以将其拉回并用保存的值替换当前值。现在，我认为任何一个保存/加载功能都不起作用，因为我保存了值，重新加载，尝试加载，但没有任何反应。为了我的测试目的，我禁用了 max 变量，所以不是这样。

【问题讨论】：

return function(modify_qty) { 在加载和保存函数中的作用是什么？
How to get JS variable to retain value after page refresh?的可能重复

标签： javascript html local-storage

【解决方案1】：

localStorage.setItem("qty", 5);

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

【讨论】：

有帮助吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

对于您的 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;
}

【讨论】：

【解决方案4】：

我不知道您的 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() 将从 localstorage 中获取值并将元素设置为它。

编辑：添加了 HTML 以显示它应该如何工作

【讨论】：

鉴于信息有限，我想出了相同的解决方案。
是的，没什么好说的：p

【解决方案5】：

我没有看到从您的代码中的函数返回函数的目的，我看不出这与您的问题文本有何关系。

我没有看到您使用 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 标记上完成数据验证，而不需要脚本来验证。

【讨论】：

【解决方案6】：

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

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

以及localStorage.getItem('qty'); 的行：

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

这应该可以解决问题。

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

【讨论】：

【解决方案7】：

除了其他答案之外，您必须先将输入中的值解析为 int，然后才能在修改函数中使用它们进行比较，例如：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;
}

【讨论】：