如何在這個例子中使用localStorage？

Question

你可以申請localStorage嗎？如果我點擊「扣除」，ID「插槽」將減少到1.我想了解的是如何應用localStorage。如果插槽爲9，並且如果我將刷新/關閉瀏覽器或重新啓動計算機並再次運行該程序，該插槽將保持爲9.我在學習localStorage方面遇到困難，需要幫助主人。

<script> 
var availableSlot1 = 10; 
var reduceSlot1 = function(valueToDeduct1){ 
    availableSlot1 = availableSlot1 - valueToDeduct1; 
    document.getElementById('slot').innerHTML = availableSlot1; 
    var x = storage.key(availableSlot1); 
    if (availableSlot1 == 0){ 
     document.getElementById('x').innerHTML = "FULL"; 
     document.getElementById("button1").style.display = "none"; 
    } 
}; 
</script> 

<p id="slot">10</p> 
<a href="javascript:reduceSlot1(1)" id="button1">Deduct</a> 

EDITED: 
<script> 
var slot = localStorage.getItem("slot"); 
if (typeof slot == "undefined") { 
    slot = 10; 
} 
document.getElementById("slot").innerHTML = slot; 

var reduceSlot1 = function reduceSlot(by) 
{ 
    if (slot >= by) { 
     slot -= by; 
     document.getElementById("slot").innerHTML = slot; 
     localStorage.setItem("slot", slot); 
} 
else { 
     document.getElementById('slot').innerHTML = "FULL"; 
     document.getElementById("button1").style.display = "none"; 
    } 
} 
</script> 

我跟着代碼，但它不工作。

Answer 1

http://jsfiddle.net/flocsy/mrhwK/

var slot = localStorage.getItem("slot"); 
if (slot == null) { 
    slot = 10; 
} 
document.getElementById("slot").innerText = slot; 

function reduceSlot() { 
    if (slot >= 1) { 
     slot --; 
     document.getElementById("slot").innerText = slot; 
     localStorage.setItem("slot", slot); 
    } else { 
     document.getElementById('x').innerText = "FULL"; 
     document.getElementById("button1").style.display = "none"; 
    } 
} 

document.getElementById("button1").onclick = reduceSlot; 

Answer 2

Live Demo of Local Storage

您可以使用使用localStorage.name本地存儲，在地名的，你可以使用任何財產。

var i = 1; 
localStorage.name = i;