Get/set 数值到本地存储

Question

我正在尝试使用本地存储来存储一个数字，这样即使我刷新或重新访问该页面它也会保留，但每当我刷新时 return 值为 0。

我知道这可能是一个我无法弄清楚的非常简单的修复方法，但我非常感谢能回答这个初学者（可能）简单的问题。

如果您想知道这是星级评分系统。

HTML:

<p id="r1"></p>

jQuery:

$(document).ready(function(){
    var x1;
    x1 = +localStorage.getItem("x1");
    $("#r1").html("Your rating: " + x1);

    $("#rating1 span").click(function() {
        x1 = 5 - $(this).index();
        $("#r1").html("Your rating: " + x1);
    });

    localStorage.setItem("x1", x1);
});

Answer 1

这是因为 x1 未定义。所以你实际上在做的是 localStorage.getItem(undefined)。这个 returns null，因为你有一个加号，它正在将 null 转换为 0。

 +null == 0; // true

Answer 2

您似乎对 localStorage 方法的工作原理有点困惑。基本上你需要两件事：一个键和一个你想分配给它的值。我会给你一个简单的例子来说明它是如何工作的。

const key = 'taco';
let value = 'sauce';

localStorage  // {se:fkey: "c6d8756477bc8eb22494f28a5bbc3afc,1464967104", length: 1}

// Now let's say I want to save this to local storage. This is how.
localStorage.setItem(key, value);

localStorage // {se:fkey: "c6d8756477bc8eb22494f28a5bbc3afc,1464967104", taco: "sauce", length: 2}  . As you can see it is now in localStorage.

// Now let's say we want to retrieve what we set from localStorage.
localStorage.getItem(key); // 'sauce'

希望对您有所帮助。

Answer 3

第一个问题是当您使用 getItem 检索本地存储项目时，您没有提供它的名称，应该是 localStorage.getItem("x1").

第二个问题是您在加载页面时调用 setItem()，而不是在用户点击评级时调用，因此它没有使用用户选择的评级。

$(document).ready(function(){
    var x1;
    x1 = +localStorage.getItem("x1");
    $("#r1").html("Your rating: " + x1);

    $("#rating1 span").click(function() {
        var x1 = 5 - $(this).index();
        $("#r1").html("Your rating: " + x1);
        localStorage.setItem("x1", x1);
    });
});

Answer 4

目前您正在请求密钥 undefined 的本地存储值，因为 x1 没有值。如果您将 x1 更改为字符串，您将获得键 "x1" 的值（如果存在）。

因此您的代码将变为：

$(document).ready(function(){

    var x1 = localStorage.getItem("x1");

    $("#r1").html("Your rating: " + x1);

    $("#rating1 span").click(function() {
        x1 = 5 - $(this).index();
        $("#r1").html("Your rating: " + x1);
        localStorage.setItem("x1", x1);
    });


});

你的 localStorage.setItem("x1", x1); 是正确的，但在错误的位置，它需要在点击事件块内。

Get/set 数值到本地存储

Get/set number value to localstorage

javascript

jquery

html

storage

local