Javascript 用户可以故意或通过随机生成填写两个相关div—；如何将所选值存储在本地存储器中？

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

填充的div（“#currentLabelA”和“#currentlymthm_A”）的HTML：

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

---

编辑。。。 好的，下面是更新后的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(); 
        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>

$（文档）.ready（函数（）{
$（'.button'）。在（'click'，function（）上{
var imagewanted=$（this）.最近（'.RM_节奏'）.find（'img'）.attr（“src”）；
$（'.currentRhythm_A'）.html（“”）；
var currentlabel=$（this）.最近（'.RM_节奏'）.find（'audio'）.attr（“id”）；
$（'#currentLabelA'）.html（currentlabel）；
$（'#playA'）.html（“”）；
$（'#playA'）.load（）；
setItem（“image”，imagewant）；
imagewanted=localStorage.getItem（“图像”）；
setItem（“标签”，currentlabel）；
currentlabel=localStorage.getItem（“标签”）；
});
});
函数GetValueA（）{
新阵列；2.4”、“2.4”、“2.5”、“2.4”、“3.3”、“3.4”、“3.3”、“3.4”、“3.5”、“3.5”、“3.4”、“3.3”、“3.4”、“3.4”、“3.3”、“3.3”、“3.3”、“3.3”、“3.3”、“3.3”、“3.3”、“3.3”、“2.4”、“2”、“2.4”、“2”、“2.4”、“2”、“2”、“2.6”、“2”、“2.6”、“2”、“2.6”、“2”、“2.6”、“2”、“2”、“2.6”、“2”、“2.6”、“2”、“2.6”、“2.6”、“2”、“2.6”、“2”、“2.6”、“2.6”、“2.6”、“2”、“2”、“2.6”、“2.6”、“2”、“2.6”、“2.6”、“2.6”、“2.6”、“2.6”、“2”、“2.6”、“2”、“2.6”、“2.6”、“2.6”、“2.6”、“2”、“2”、“2”、““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）]；
//警报（随机）；
document.getElementById（“message”）.innerHTML=random；
$（'.currentRhythm_A'）.html（“”）；
$（'#currentLabelA'）.html（随机）；
$（'#playA'）.html（“”）；
$（'#playA'）.load（）；
$（'input:checkbox'）。removeAttr（'checked'）；
setItem（“随机”，随机）；
random=localStorage.getItem（“随机”）；
}

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

---

不过，通过这种方式，您可以存储任何JSON数据。对于图像，您需要将其转换为base64格式的字符串，然后可以将该字符串保存在localStorage中，但我不建议这样做，因为图像通常具有较大的大小（如100Kb）而且您可以放入本地存储的数据量是有限的。如果您已经提供了URL指向图像，最好保存URL指向图像，或者，如果有新图像，请先将它们保存在云存储桶上，然后保存链接。

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

---

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

我尝试了一个基本想法，并尝试进行一个可以

• 列出节奏
• 随机化选择
• 保存所选内容（使用本地存储）
• 清晰选择

看一看，看看有什么可以用的。：）

感兴趣的文件（见左侧）：

• index.html
• src/index.js
• src/listOfIds.js

---

我尝试了一下基本想法，并试图做一个可以

• 列出节奏
• 随机化选择
• 保存所选内容（使用本地存储）
• 清晰选择

看一看，看看有什么可以用的。：）

感兴趣的文件（见左侧）：

• index.html
• src/index.js
• src/listOfIds.js

---

为什么需要将这些图像/标签存储在本地存储器中？这是一个帮助人们学习如何即兴创作的程序。选择节奏会为他们提供一组本周的作业。我希望这些节奏在用户屏幕上持续一周（或直到他们更改）。但是，如果有更好的方法，我完全愿意接受另一种解决方案！请参见下面我的答案。为什么需要将这些图像/标签存储在本地存储中？这是一个帮助人们学习如何即兴创作的程序。选择节奏可以为他们提供一组本周的作业。我希望这些节奏在用户屏幕上持续一周（或直到他们改变）。如果有更好的方法，我完全愿意接受另一种解决方案！请参见下面的答案。是的，我确实已经提供了图像，因此我应该能够提供路径或部分路径。我感谢您的建议。您能帮我指出我在每个处理程序中正确放置这些调用的位置吗？每个图像URL都是字符串，您只需保存字符串，然后单击t当你需要它时，从localStorage中获取URL字符串并将其放置到位

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

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

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

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

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