如何在此示例中使用本地存储

How to use localStorage on this example?

本文关键字：存储      更新时间：2023-09-26

你能在这个上面应用localStorage吗？如果我点击"扣除"，id"插槽"将减少到1。我想学习的是如何应用本地存储。如果插槽为 9，并且如果我刷新/关闭浏览器或重新启动计算机并再次运行程序，则插槽将保持 9。我在学习本地存储方面遇到了困难，需要大师的帮助。

<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>

我遵循了代码，但它不起作用。

本地存储的现场演示

您可以使用本地存储使用 localStorage.name ，代替名称，您可以使用任何属性。

var i = 1;
localStorage.name = i;

> 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;
相关文章：