保存在运行html时所做的更改（在浏览器中）

Question

我在这里有一个简单的主题保留，由html，css，javascript和jquery组成。我想问一下，如果有可能的话，如果有5个剩余的插槽，如果我点击“预约”按钮，它将减少为4.因此，已经有4个剩余的插槽。如果我关闭浏览器或重新启动计算机，当我再次运行程序时，剩余的插槽将保留4.是否可以？

这是我的代码：

<script type="text/javascript">
    var availableSlot1 = 5;
    var reduceSlot1 = function(valueToDeduct1){
        availableSlot1 = availableSlot1 - valueToDeduct1;
        document.getElementById('ite164').innerHTML = availableSlot1;
        if (availableSlot1 == 0){
            document.getElementById('ite164').innerHTML = "FULL";
            document.getElementById("ite164").style.color = "red";
            document.getElementById("number1").style.color = "red";
            document.getElementById("subject1").style.color = "red";
            document.getElementById("code1").style.color = "red";
            document.getElementById("units1").style.color = "red";
            document.getElementById("prof1").style.color = "red";
            document.getElementById("1").style.display = "none";
        }
    };
    var availableSlot2 = 5;
    var reduceSlot2 = function(valueToDeduct2){
        availableSlot2 = availableSlot2 - valueToDeduct2;
        document.getElementById('phi001').innerHTML = availableSlot2;
        if (availableSlot2 == 0){
            document.getElementById('phi001').innerHTML = "FULL";
            document.getElementById("phi001").style.color = "red";
            document.getElementById("number2").style.color = "red";
            document.getElementById("subject2").style.color = "red";
            document.getElementById("code2").style.color = "red";
            document.getElementById("units2").style.color = "red";
            document.getElementById("prof2").style.color = "red";
            document.getElementById("2").style.display = "none";
        }
    };
    var availableSlot3 = 5;
    var reduceSlot3 = function(valueToDeduct3){
        availableSlot3 = availableSlot3 - valueToDeduct3;
        document.getElementById('ite165').innerHTML = availableSlot3;
        if (availableSlot3 == 0){
            document.getElementById('ite165').innerHTML = "FULL";
            document.getElementById("ite165").style.color = "red";
            document.getElementById("number3").style.color = "red";
            document.getElementById("subject3").style.color = "red";
            document.getElementById("code3").style.color = "red";
            document.getElementById("units3").style.color = "red";
            document.getElementById("prof3").style.color = "red";
            document.getElementById("3").style.display = "none";
        }
    };
    var availableSlot4 = 5;
    var reduceSlot4 = function(valueToDeduct4){
        availableSlot4 = availableSlot4 - valueToDeduct4;
        document.getElementById('ite048').innerHTML = availableSlot4;
        if (availableSlot4 == 0){
            document.getElementById('ite048').innerHTML = "FULL";
            document.getElementById("ite048").style.color = "red";
            document.getElementById("number4").style.color = "red";
            document.getElementById("subject4").style.color = "red";
            document.getElementById("code4").style.color = "red";
            document.getElementById("units4").style.color = "red";
            document.getElementById("prof4").style.color = "red";
            document.getElementById("4").style.display = "none";
        }
    };
    var availableSlot5 = 5;
    var reduceSlot5 = function(valueToDeduct5){
        availableSlot5 = availableSlot5 - valueToDeduct5;
        document.getElementById('ite136').innerHTML = availableSlot5;
        if (availableSlot5 == 0){
            document.getElementById('ite136').innerHTML = "FULL";
            document.getElementById("ite136").style.color = "red";
            document.getElementById("number5").style.color = "red";
            document.getElementById("subject5").style.color = "red";
            document.getElementById("code5").style.color = "red";
            document.getElementById("units5").style.color = "red";
            document.getElementById("prof5").style.color = "red";
            document.getElementById("5").style.display = "none";
        }
    };
    var availableSlot6 = 5;
    var reduceSlot6 = function(valueToDeduct6){
        availableSlot6 = availableSlot6 - valueToDeduct6;
        document.getElementById('ite062').innerHTML = availableSlot6;
        if (availableSlot6 == 0){
            document.getElementById('ite062').innerHTML = "FULL";
            document.getElementById("ite062").style.color = "red";
            document.getElementById("number6").style.color = "red";
            document.getElementById("subject6").style.color = "red";
            document.getElementById("code6").style.color = "red";
            document.getElementById("units6").style.color = "red";
            document.getElementById("prof6").style.color = "red";
            document.getElementById("6").style.display = "none";
        }
    };
    var availableSlot7 = 5;
    var reduceSlot7 = function(valueToDeduct7){
        availableSlot7 = availableSlot7 - valueToDeduct7;
        document.getElementById('ite076').innerHTML = availableSlot7;
        if (availableSlot7 == 0){
            document.getElementById('ite076').innerHTML = "FULL";
            document.getElementById("ite076").style.color = "red";
            document.getElementById("number7").style.color = "red";
            document.getElementById("subject7").style.color = "red";
            document.getElementById("code7").style.color = "red";
            document.getElementById("units7").style.color = "red";
            document.getElementById("prof7").style.color = "red";
            document.getElementById("7").style.display = "none";
        }
    };

    $(document).ready(function(){
        $("#button1").hide();
        $("#button2").hide();
        $("#button3").hide();
        $("#button4").hide();
        $("#button5").hide();
        $("#button6").hide();
        $("#button7").hide();
        $("#1").click(function(){
            $("#button1").show();
            $("#button1").fadeIn(1000);
            $("#button2").hide();
            $("#button3").hide();
            $("#button4").hide();
            $("#button5").hide();
            $("#button6").hide();
            $("#button7").hide();
                $("#button1").click(function() {
                    $("#button1").hide();
                });
          });
          $("#2").click(function(){
            $("#button1").hide();
            $("#button2").show();
            $("#button2").fadeIn(1000);
            $("#button3").hide();
            $("#button4").hide();
            $("#button5").hide();
            $("#button6").hide();
            $("#button7").hide();
                $("#button2").click(function() {
                    $("#button2").hide();
                });
          });
          $("#3").click(function(){
            $("#button1").hide();
            $("#button2").hide();
            $("#button3").show();
            $("#button3").fadeIn(1000);
            $("#button4").hide();
            $("#button5").hide();
            $("#button6").hide();
            $("#button7").hide();
                $("#button3").click(function() {
                    $("#button3").hide();
                });
          });
          $("#4").click(function(){
            $("#button1").hide();
            $("#button2").hide();
            $("#button3").hide();
            $("#button4").show();
            $("#button4").fadeIn(1000);
            $("#button5").hide();
            $("#button6").hide();
            $("#button7").hide();
                $("#button4").click(function() {
                    $("#button4").hide();
                });
          });
          $("#5").click(function(){
            $("#button1").hide();
            $("#button2").hide();
            $("#button3").hide();
            $("#button4").hide();
            $("#button5").show();
            $("#button5").fadeIn(1000);
            $("#button6").hide();
            $("#button7").hide();
                $("#button5").click(function() {
                    $("#button5").hide();
                });
          });
          $("#6").click(function(){
            $("#button1").hide();
            $("#button2").hide();
            $("#button3").hide();
            $("#button4").hide();
            $("#button5").hide();
            $("#button6").show();
            $("#button6").fadeIn(1000);
            $("#button7").hide();
                $("#button6").click(function() {
                    $("#button6").hide();
                });
          });
          $("#7").click(function(){
            $("#button1").hide();
            $("#button2").hide();
            $("#button3").hide();
            $("#button4").hide();
            $("#button5").hide();
            $("#button6").hide();
            $("#button7").show();
            $("#button7").fadeIn(1000);
                $("#button7").click(function() {
                    $("#button7").hide();
                });
          });
    });

 <body>
   <table border="1" width="700px">
        <tr>
            <th>#</th>
            <th>Subjects</th>
            <th>Subject Code</th>
            <th>Units</th>
            <th>Instructor</th>
            <th>Available Slots</th>
        </tr>
        <tr>
            <td class="center" id="number1">1</td>
            <td id="subject1">Data Comm. Systems & Networking</td>
            <td class="center" id="code1">ITE164</td>
            <td class="center" id="units1">3.0</td>
            <td id="prof1">Quinito, Floreto Jr. R.</td>
            <td style="text-align: center;"><span id="ite164">5</span></td>
        </tr>
        <tr>
            <td class="center" id="number2">2</td>
            <td id="subject2">Introduction to Philosophy and Logic</td>
            <td class="center" id="code2">PHI001</td>
            <td class="center" id="units2">3.0</td>
            <td id="prof2">Chiong, Isidro R.</td>
            <td style="text-align: center;"><span id="phi001">5</span></td>
        </tr>
        <tr>
            <td class="center" id="number3">3</td>
            <td id="subject3">Basic Finance & Acctg. Principles for IT</td>
            <td class="center" id="code3">ITE165</td>
            <td class="center" id="units3">3.0</td>
            <td id="prof3">Cadelinia, Godofredo B.</td>
            <td style="text-align: center;"><span id="ite165">5</span></td>
        </tr>
        <tr>
            <td class="center" id="number4">4</td>
            <td id="subject4">Discrete Structures</td>
            <td class="center" id="code4">ITE048</td>
            <td class="center" id="units4">3.0</td>
            <td id="prof4">Calibara, Eunelfa Regie F.</td>
            <td style="text-align: center;"><span id="ite048">5</span></td>
        </tr>
        <tr>
            <td class="center" id="number5">5</td>
            <td id="subject5">Web Page Design</td>
            <td class="center" id="code5">ITE136</td>
            <td class="center" id="units5">3.0</td>
            <td id="prof5">Pequiro, Chemby Mae S.</td>
            <td style="text-align: center;"><span id="ite136">5</span></td>
        </tr>
        <tr>
            <td class="center" id="number6">6</td>
            <td id="subject6">Systems Analysis and Design</td>
            <td class="center" id="code6">ITE062</td>
            <td class="center" id="units6">3.0</td>
            <td id="prof6">Galudo, Darwin M.</td>
            <td style="text-align: center;"><span id="ite062">5</span></td>
        </tr>
        <tr>
            <td class="center" id="number7">7</td>
            <td id="subject7">Operating System</td>
            <td class="center" id="code7">ITE076</td>
            <td class="center" id="units7">3.0</td>
            <td id="prof7">Lagala, Glenn T.</td>
            <td style="text-align: center;"><span id="ite076">5</span></td>
        </tr>
    </table>
    <div id="combobox">
        <span style="color: white;">Select a subject to reserve:</span>
        <select>
          <option></option>
          <option id="1" value="ITE164">Data Comm. Systems & Networking (ITE164)</option>
          <option id="2" value="PHI001">Introduction to Philosophy and Logic (PHI001)</option>
          <option id="3" value="ITE165">Basic Finance & Acctg. Principles for IT (ITE165)</option>
          <option id="4" value="ITE048">Discrete Structures (ITE048)</option>
          <option id="5" value="ITE136">Web Page Design (ITE136)</option>
          <option id="6" value="ITE062">Systems Analysis and Design (ITE062)</option>
           <option id="7" value="ITE076">Operating System (ITE076)</option>
        </select> 
         <a href="javascript:reduceSlot1(1)" id="button1"><input type="button" value="Reserve"></a>
         <a href="javascript:reduceSlot2(1)" id="button2"><input type="button" value="Reserve"></a>
         <a href="javascript:reduceSlot3(1)" id="button3"><input type="button" value="Reserve"></a>
         <a href="javascript:reduceSlot4(1)" id="button4"><input type="button" value="Reserve"></a>
         <a href="javascript:reduceSlot5(1)" id="button5"><input type="button" value="Reserve"></a>
         <a href="javascript:reduceSlot6(1)" id="button6"><input type="button" value="Reserve"></a>
         <a href="javascript:reduceSlot7(1)" id="button7"><input type="button" value="Reserve"></a>
    </div>
   <body>

我需要你的帮助:(我还是新手

Answer 1

初学者使用这种最简单的语法 localStorage.key =值

密钥 - ＆GT; slotremain

值 - ＆GT;整数5或任何东西。

您打开浏览器的nxt时间执行此操作 localStorage.slotremain- = 1;