单击按钮时添加或清除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

试试这个，

的脚本 的

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 的

Answer 2

不确定但是。这是你想要做的？ 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();
}