Question

当我尝试保存并加载值时，我的代码无效。我多次看了这个，没有确切的答案。任何帮助，将不胜感激！

var1 = 1

function save() {
  localStorage.setItem("var1", string(var1));
}
function load() {
  var1 = localStorage.getItem("var1");
}
function up() {
  var1 += 1
  document.getElementById("test").innerHTML = var1
}

<p id="test">1</p><br>
<button onclick="up()">up1</button>
<button onclick="save()">save</button>
<button onclick="load()">load</button>

Answer 1

LocalStorage存储键值格式和值的数据存储为字符串。

要将int转换为字符串，您可以使用toString()。此外，在从localStorage获取元素时，您将获得需要转换为int的字符串。

尝试下面的代码，它不会在StackOverflow上工作，因为它是沙箱。

＆＃13;

var1 = 1

function save() {
  localStorage.setItem("var1", var1.toString());
}

function load() {
  var1 = +localStorage.getItem("var1");
}

function up() {
  var1 += 1
  document.getElementById("test").innerHTML = var1
}

＆＃13;

<p id="test">1</p><br>
<button onclick="up()">up1</button>
<button onclick="save()">save</button>
<button onclick="load()">load</button>

＆＃13;

Answer 2

存储时不需要转换为字符串，但是当它从存储中恢复时，你应该将它转换回整数。

function save() {
    localStorage.setItem("var1", var1);
}

function load() {
    var1 = parseInt(localStorage.getItem("var1"));
}

Answer 3

在本地存储中，键可以是字符串或整数，但值始终是strings.So在load函数内部尝试将检索到的字符串转换为数字。否则不添加它将串联连接。例如8+1将81而不是9。

此外，您的DOM中没有body标记

＆＃13;

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <p id="test">1</p><br>
  <button onclick="up()">up1</button>
  <button onclick="save()">save</button>
  <button onclick="load()">load</button>
  <script>
    var var1 = 1;

    function save() {
      console.log(var1)
      localStorage.setItem("var1", var1);
    }

    function load() {
      //using unary operator to convert string to number
      var1 = +localStorage.getItem("var1");
      console.log(typeof var1)
    }

    function up() {
      var1 += 1;
      document.getElementById("test").innerHTML = var1;
    }
  </script>

</body>

</html>

＆＃13;

我似乎无法让本地存储工作

3 个答案: