添加或清除localStorage上的按鈕點擊並顯示在html中的值

Question

我有一個使用localStorage和javascript的代碼。我試圖添加更多的插槽，如slot1，slot2，slot3最多5.我只是複製並粘貼，然後更改變量名稱，如slot1，slot2，slot3到5，但它不會工作。非常感謝幫助。

的Javascript：

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

if (slot == null) { 
    slot = 10; 
} 

document.getElementById("slot").innerText = slot; 

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

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

function clearLocalStorage() { 
    localStorage.clear(); 
} 

HTML：

<p id="slot">10</p> 
<a href="javascript:reduceSlot(1)" id="button1">Deduct</a> 
<button onclick="window.localStorage.clear();">Clear All</button> 

小提琴：http://jsfiddle.net/barmar/K8stQ/3/

Answer 1

不知道，但。這是你想要做什麼？ working demo

我改變你的代碼有點..你可以在以後把它變成自己的喜好..

<span id="slot0">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(0)})()" ><br> 

     <span id="slot1">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(1)})()" ><br> 

     <span id="slot2">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(2)})()" ><br> 

     <span id="slot3">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(3)})()" ><br> 

     <span id="slot4">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(4)})()" ><br> 


    <p> 
    <button onclick="clearAll()">Clear All</button> 
    </p> 

併爲JS ...

ls = localStorage.getItem("slots") ; 
if(!ls) { localStorage.setItem("slots", "10,10,10,10,10"); 
} 

var slots = localStorage.getItem("slots").split(',').map(Number); 

window.onload = updateSlots; 

    function updateSlots() { for(var i=0;i<slots.length;i++) { 
document.getElementById('slot' + i).innerHTML = slots[i] ; 
}} 



var reduceSlot = function(slotId) { 
    console.log(slots[slotId]) ; 
    if(slots[slotId] >= 1) { 
    slots[slotId]--; localStorage.setItem("slots",slots); 
    document.getElementById('slot' + slotId).innerHTML = slots[slotId]; 
    } 


    else {  document.getElementById('slot'+slotId).innerText = "FULL"; 

     } 
    }; 

function clearAll() { 
    window.localStorage.clear(); 
    slots = [10,10,10,10,10]; 
    updateSlots(); 
} 

Answer 2

試試這個，

腳本

window.ready = function() { 
    checkStorage(); 
} 

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


function reduceSlot() { 
    var slot = localStorage.getItem("slot"); 
    if (slot == null) { 
     slot = 10; 
    } 
    if (slot >= 1) { 
     slot--; 
     localStorage.setItem("slot", slot); 
     if (slot > 0) { 
      document.getElementById('slot').innerHTML = slot; 
     } else { 
      document.getElementById('slot').innerHTML = "FULL"; 
      document.getElementById("button1").style.display = "none"; 
     } 
    } 
} 

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

function clear_me() { 
    localStorage.clear(); 
    checkStorage(); 
} 

HTML

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

<button id="clear">Clear All</button> 

Demo