Получить/установить числовое значение для LocalStorage

Question

Я пытаюсь использовать локальное хранилище, чтобы сохранить номер, так что он остается, даже если я обновить или вернуться к странице, но всякий раз, когда я обновить возвращаемое значение равно 0.

I знайте, что это, пожалуй, очень простое решение, которое я не могу понять, но я бы очень признателен за ответ на этот вопрос (возможно), который был легко понят.

В случае, если вам интересно, это для системы оценки звезд.

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

Первая проблема заключается в том, что вы не указываете имя локального элемента хранилища при его извлечении с 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 2

Это потому, что x1 не определено. Так что вы по существу делаете localStorage.getItem (undefined). Это возвращает нуль, и поскольку у вас есть плюс этого конвертирование нуля 0.

+null == 0; // true 

Answer 3

Похоже, вы можете быть немного запутались, как работает метода 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 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); правильно, но в неправильном месте, он должен быть внутри блока событий мыши.