javascript - 在 HTML 中创建表单时如何使用 javascript 和 jquery 从本地存储加载变量

Question

我有一个用 HTML 编写的小表格(这只是我在类作业中实际创建的示例)。基本上我有三个选择标签，带有创建下拉列表的选项。当用户选择一个值时，将在表单底部计算总计。当用户单击“保存”时，数据将存储在本地存储中。因此 4 个键与值一起存储在本地存储中。我可以将 A B 和 C 及其值存储在本地存储中，但在存储总值时遇到问题。当用户单击加载按钮时，它将加载保存在本地存储中的值，但总值除外。

我添加了一些 jquery，它将遍历我在 html 中的所有 select 和 span 标签，以便它可以将该 ID 和值存储在本地存储中。

希望我说得有道理。请复制并粘贴我的代码并在需要时运行它以更好地理解。我知道我的代码可能不专业，但这是我目前所拥有的，而且我仍在学习。请让我知道我可以做些什么来实现我想要做的事情。任何小代码片段/示例将不胜感激。

我试过以与加载其他值相同的方式将总值加载到本地存储中。

            <table>
                <tr class="blueHead">
                  <th>Section A.</th>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td></td>
                </tr>
                <tr class="blueHead">
                  <td><b>A.1</b></td>
                  <td><b>Value</b></td>
                  <td><b>Awarded</b></td>
                </tr>
                <tr>
                  <td>a)</td>
                  <td align="center">1</td>
                  <td align="center"><select class="select" onChange="calcA1();" id="Aa1">
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                  </select></td>
                </tr>
                <tr>
                  <td>b)</td>
                  <td align="center">1</td>
                  <td align="center"><select class="select" onChange="calcA1();" id="Ab1">
                                     <option value="0">0</option>
                                     <option value="1">1</option>
                                     </select></td>
                </tr>
                <tr>
                  <td>c)</td>
                  <td align="center">2</td>
                  <td align="center"><select class="select" onChange="calcA1();" id="Ac1">
                                     <option value="0">0</option>
                                     <option value="2">2</option>
                                     </select></td>
                </tr>

                <tr class="blueHead">
                  <td class="subtotal">Section A. Total</td>
                  <td align="center"><b>2</b></td>
                  <td align="center"><b><div><span id="totalA"></span></div></b></td>
                </tr>
            </table>

            <button id="save">Save</button>
            <button id="load">Load</button>
            <button value="Refresh Page" onClick="window.location.reload(); localStorage.clear();">Start Over</button>

            <script>
            function calcA1R() {
              var Aa1 = document.getElementById('Aa1');
              var Ab1 = document.getElementById('Ab1');
              var Ac1 = document.getElementById('Ac1');

              var Aa1Val = Aa1.options[Aa1.selectedIndex].value;
              var Ab1Val = Ab1.options[Ab1.selectedIndex].value;
              var Ac1Val = Ac1.options[Ac1.selectedIndex].value;

              // returning the sum of the values
              return [parseInt(Aa1Val), parseInt(Ab1Val), parseInt(Ac1Val)].reduce((a, c) => a + c, 0)
            }

            function calcA1() {
              displaySumA()
            }

            function displaySumA() {
              document.getElementById('totalA').textContent = calcSumA()
            }

            function calcSumA() {
              return calcA1R()
            }

            </script>
            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script>

              //Save button
              $('#save').on('click', function(){

                //Iterates through all select fields
                $('select').each(function(){
                    //Set ID for each Select
                    var id = $(this).attr('id');
                    //Set value for each select
                    var value = $(this).val();
                    //adds to localStorage on the broswer
                   localStorage.setItem(id, value);

                });
            });

            $('#load').on('click', function(){
                $('select').each(function(){
                    var id = $(this).attr('id');
                    var value = localStorage.getItem(id);

                    $(this).val(value);

                });
            });
            </script>

Answer 1

您实际上从未将总数保存在 localStorage 中。您可以在 #save 循环之后保存它并在 #load 循环中检索它。
假设你的总数是函数 calcA1R 的值:

function calcA1R() {
              var Aa1 = document.getElementById('Aa1');
              var Ab1 = document.getElementById('Ab1');
              var Ac1 = document.getElementById('Ac1');

              var Aa1Val = Aa1.options[Aa1.selectedIndex].value;
              var Ab1Val = Ab1.options[Ab1.selectedIndex].value;
              var Ac1Val = Ac1.options[Ac1.selectedIndex].value;

              // returning the sum of the values
              return [parseInt(Aa1Val), parseInt(Ab1Val), parseInt(Ac1Val)].reduce((a, c) => a + c, 0)
            }

            function calcA1() {
              displaySumA()
            }

            function displaySumA() {
              document.getElementById('totalA').textContent = calcSumA()
            }

            function calcSumA() {
              return calcA1R()
            }


              //Save button
              $('#save').on('click', function(){

                //Iterates through all select fields
                $('select').each(function(){
                    //Set ID for each Select
                    var id = $(this).attr('id');
                    //Set value for each select
                    var value = $(this).val();
                    //adds to localStorage on the broswer
                   localStorage.setItem(id, value);

                });
                
                // we save the value of calcA1R
                var total = calcA1R();
                // we are savingthe total into the localstorage with the key "total".
                localStorage.setItem('total', total);
            });

            $('#load').on('click', function(){
                $('select').each(function(){
                    var id = $(this).attr('id');
                    var value = localStorage.getItem(id);

                    $(this).val(value);

                });
                
                var total = localStorage.getItem('total');
                console.log(total);
                // do something with the total here.
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
                <tr class="blueHead">
                  <th>Section A.</th>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td></td>
                </tr>
                <tr class="blueHead">
                  <td><b>A.1</b></td>
                  <td><b>Value</b></td>
                  <td><b>Awarded</b></td>
                </tr>
                <tr>
                  <td>a)</td>
                  <td align="center">1</td>
                  <td align="center"><select class="select" onChange="calcA1();" id="Aa1">
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                  </select></td>
                </tr>
                <tr>
                  <td>b)</td>
                  <td align="center">1</td>
                  <td align="center"><select class="select" onChange="calcA1();" id="Ab1">
                                     <option value="0">0</option>
                                     <option value="1">1</option>
                                     </select></td>
                </tr>
                <tr>
                  <td>c)</td>
                  <td align="center">2</td>
                  <td align="center"><select class="select" onChange="calcA1();" id="Ac1">
                                     <option value="0">0</option>
                                     <option value="2">2</option>
                                     </select></td>
                </tr>

                <tr class="blueHead">
                  <td class="subtotal">Section A. Total</td>
                  <td align="center"><b>2</b></td>
                  <td align="center"><b><div><span id="totalA"></span></div></b></td>
                </tr>
            </table>

            <button id="save">Save</button>
            <button id="load">Load</button>
            <button value="Refresh Page" onClick="window.location.reload(); localStorage.clear();">Start Over</button>

我创建了 this fiddle也因为 localstorage 在 Stackoverflow 的嵌入 fiddle 创建器中不可用。

P.S. 我强烈建议查看 ecg8's关于 localStorage 使用的评论。由于您已经保存了获得总数所需的所有数据，因此您可以在检索数据时轻松计算。