/セット番号値が、私はリフレッシュするか、ページを再検討しても、それが留まるように番号を格納するローカルストレージを使用しようとしている

Question

のlocalStorageするには、Getが、私はリフレッシュするたびに、戻り値は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")でなければならないということです。

2番目の問題は、ページが読み込まれたときにsetItem()に電話していることです。ユーザーが評価をクリックしたときではないため、ユーザーが選択した評価を使用していません。 x1に値がないので

$(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（未定義）を実行しています。これはnullを返し、あなたはそれが0

+null == 0; // true 

Answer 3

にヌル変換だプラスを持っているので、あなたがのlocalStorage方法がどのように機能するかに関して、少し混乱するかもしれ表示されます。基本的には、キーとそれに割り当てる値の2つが必要です。どのように動作するかの簡単な例をお教えします。

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"）。

だからあなたのコードになるでしょう：

$(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);は正しいのですが、間違った場所で、それは、クリックイベントブロック内である必要があります。