2

我有一个使用 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/

4

2 回答 2

1

不确定但是。这是你想做的吗？工作演示

我稍微更改了您的代码..您可以稍后将其更改为您喜欢的..

 <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();
}
于 2013-10-08T12:37:45.363 回答
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>

演示

于 2013-10-08T11:34:07.517 回答