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

当我尝试保存和加载值时，我的代码不起作用。我多次查找，但没有明确的答案。任何帮助将不胜感激！

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>

LocalStorage 以键值格式存储数据，值存储为字符串。

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

尝试下面的代码，它不适用于StackOverflow，因为它是沙盒的。

var1 = 1
function save() {
  localStorage.setItem("var1", var1.toString());
}
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>

存储字符串时无需将其转换为字符串，但在将其从存储中取出时应将其转换回整数。

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

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

您的 DOM 中也没有body标签

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

相关内容

最新更新

热门标签：