javascript - 用户可以有意或通过随机生成填充两个相关的 div — 如何将选定的值存储在本地存储中？

Question

我有两个相关的 div(图像及其相应的标签)，用户可以通过以下两种方式之一填充:1) 直接选择图像或 2) 单击从数组中选择的“随机”按钮。

填充的 div 的 HTML(“#currentLabelA”和“#currentRhythm_A”):

<div class="currentSelection">
     <div class="selectedLabelA" id="currentLabelA">A</div>
     <div class="selectedRhythm currentRhythm_A" id="currentRhythm_A"><img src="../images/RM-0.1.png" width="172" height="60" alt="0-1" /></div>
</div>

填充 div 的第一种方法是单击图像的标签来选择它(还有很多选择，几乎 100 个；我在这里将其缩减为 3 个)。这将用节奏的名称填充#currentLabelA，并用节奏的图像填充#currentRhythm_A:

                    <div class="tabbertab">
                        <h3>3</h3>
                        <section class="allRhythms">
                            <h6>Tap play to listen. Tap number to select.</h6>
                            <div class="RM_rhythm">
                                <audio id="3.1" preload='none'>
                                <source src='../audio/3.1.mp3' type='audio/mpeg' /><source src='../audio/3.1.ogg' type='audio/ogg' />
                                </audio>
                                <button onclick="document.getElementById('3.1').play()"><i class="fas fa-play"></i></button>
                                <a href="#" class="button">3-1</a>
                                <img src="../images/RM-3.1.png" width="172" height="60" alt="3-1">
                            </div>
                            <div class="RM_rhythm">
                                <audio id="3.2" preload='none'>
                                <source src='../audio/3.2.mp3' type='audio/mpeg' /><source src='../audio/3.2.ogg' type='audio/ogg' />
                                </audio>
                                <button onclick="document.getElementById('3.2').play()"><i class="fas fa-play"></i></button>
                                <a href="#" class="button">3-2</a>
                                <img src="../images/RM-3.2.png" width="172" height="60" alt="3-2">
                            </div>
                            <div class="RM_rhythm">
                                <audio id="3.3" preload='none'>
                                <source src='../audio/3.3.mp3' type='audio/mpeg' /><source src='../audio/3.3.ogg' type='audio/ogg' />
                                </audio>
                                <button onclick="document.getElementById('3.3').play()"><i class="fas fa-play"></i></button>
                                <a href="#" class="button">3-3</a>
                                <img src="../images/RM-3.3.png" width="172" height="60" alt="3-3">
                            </div>

                        </section>
                    </div><!-- end this tab -->

填充 div 的另一种方法是单击“随机 A”按钮:

<input type="button" id="btnSearchA" class="btn btn-2 btn-2c" value="Random A" onclick="GetValueA();" />
                                        <p id="message" style="display:none!important;"></p>

下面是用这两种不同方式填充 div 的 javascript:

<!-- fill currentRhythm_A -->   
<script type="text/javascript" language="javascript">

    $(document).ready(function() {
    $('.button').on('click', function() {
        var imagewanted = $(this).closest('.RM_rhythm').find('img').attr("src");
        $('.currentRhythm_A').html("<img src='" + imagewanted + "' />");
        var currentlabel = $(this).closest('.RM_rhythm').find('audio').attr("id");
        $('#currentLabelA').html(currentlabel);
        $('#playA').html("<source src='../audio/" + currentlabel + ".mp3' type='audio/mpeg' /><source src='../audio/" + currentlabel + ".ogg' type='audio/ogg' />");
        $('#playA').load(); 
   });
});
</script>   


<!-- generate a random rhythm for A --> 
<script>

function GetValueA(){
    var myarray= new Array("0.1","1.1","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","4.1","4.2","4.3","4.4","4.5","4.6","4.7","4.8","4.9","4.10","4.11","4.12","4.13","4.14","4.15","5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","6.1","6.2","6.3","6.4","6.5","6.6","6.7","6.8","6.9","6.10","6.11","6.12","6.13","6.14","6.15");
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("message").innerHTML=random;
        $('.currentRhythm_A').html("<img src='../images/RM-" + random + ".png' />");
        $('#currentLabelA').html(random);
        $('#playA').html("<source src='../audio/" + random + ".mp3' type='audio/mpeg' /><source src='../audio/" + random + ".ogg' type='audio/ogg' />");
        $('#playA').load(); 
        $('input:checkbox').removeAttr('checked');
}
</script>

我正在尝试弄清楚如何将这些图像/标签存储在本地存储中。我知道我需要为 #currentLabelA 和 #currentRhythm_A 做这样的事情:

var A = document.getElementById("currentLabelA");
localStorage.setItem("currentLabelA", A.innerHTML);
currentLabelA.innerHTML = localStorage.getItem("currentLabelA");

但我不知道如何调用它。我是否需要调用它两次，一次在函数中用于随机生成的 div 填充，一次在函数中用于用户选择的 div 填充？或者我可以将它放在这两个函数之外作为自己的函数吗？我是 javascript 新手，无法将我的教程整合到一起。非常感谢任何帮助!

<小时/>

已编辑...好的，这是更新后的 JavaScript，以反射(reflect)下面建议的答案。我可以在控制台中看到它正在将值正确保存到本地存储，但它没有使用保存的值预先填充该字段。所以它是设置但不是获取。还有进一步的建议吗？

<!-- fill currentRhythm_A -->   
<script type="text/javascript" language="javascript">

    $(document).ready(function() {
    $('.button').on('click', function() {
        var imagewanted = $(this).closest('.RM_rhythm').find('img').attr("src");
        $('.currentRhythm_A').html("<img src='" + imagewanted + "' />");
        var currentlabel = $(this).closest('.RM_rhythm').find('audio').attr("id");
        $('#currentLabelA').html(currentlabel);
        $('#playA').html("<source src='../audio/" + currentlabel + ".mp3' type='audio/mpeg' /><source src='../audio/" + currentlabel + ".ogg' type='audio/ogg' />");
        $('#playA').load(); 
        localStorage.setItem("image", imagewanted);
        imagewanted = localStorage.getItem("image");
        localStorage.setItem("label", currentlabel);
        currentlabel = localStorage.getItem("label");
   });
});
</script>   


<!-- generate a random rhythm for A --> 
<script>

function GetValueA(){
    var myarray= new Array("0.1","1.1","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","4.1","4.2","4.3","4.4","4.5","4.6","4.7","4.8","4.9","4.10","4.11","4.12","4.13","4.14","4.15","5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","6.1","6.2","6.3","6.4","6.5","6.6","6.7","6.8","6.9","6.10","6.11","6.12","6.13","6.14","6.15");
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("message").innerHTML=random;
        $('.currentRhythm_A').html("<img src='../images/RM-" + random + ".png' />");
        $('#currentLabelA').html(random);
        $('#playA').html("<source src='../audio/" + random + ".mp3' type='audio/mpeg' /><source src='../audio/" + random + ".ogg' type='audio/ogg' />");
        $('#playA').load(); 
        $('input:checkbox').removeAttr('checked');
        localStorage.setItem("random", random);
        random = localStorage.getItem("random");
}
</script>

Answer 1

您需要将这些调用放在您使用的每个处理程序的本地存储中设置信息。然后，您可以在本地运行您的网站，并在开发工具中检查 localStroage，在控制台中。在那里您可以执行与代码中相同的所有操作，设置/获取项目并清除它。

通过这种方式，您可以存储任何 JSON 数据。对于图像，您需要将它们转换为 Base64 格式的字符串，然后可以将该字符串保存在 localStorage 中，但我不建议这样做，因为图像通常具有很大的尺寸(例如 100Kb)，并且您可以放入的数据量有限到本地存储。如果您已经提供了图像，最好将 URL 点保存到图像，或者，如果有新图像，请先将它们保存在云存储桶中，然后保存链接。