文章/答案/技术大牛

发布

社区首页 >问答首页 >用户可以故意或随机生成两个相关的divs -如何将所选值存储在本地存储中？

问用户可以故意或随机生成两个相关的divs -如何将所选值存储在本地存储中？
EN

Stack Overflow用户

提问于 2019-11-28 11:54:19

回答 2查看 40关注 0票数 0

我有两个相关的div(图像及其相应的标签)，用户可以用两种方式之一填写:要么直接选择图像，要么点击从数组中选择的“随机”按钮。

用于填充的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，以反映下面建议的答案。我可以在控制台中看到它正在正确地将值保存到本地存储，但它并不是预先使用保存的值填充字段。所以它是设定的，但没有得到。还有进一步的建议吗？

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

javascript

local-storage

回答 2

Stack Overflow用户

发布于 2019-11-28 12:56:04

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

但是，这样就可以存储任何JSON数据。对于图像，您需要将它们转换为base64格式的字符串，然后可以用localStorage保存该字符串，但我不建议这样做，因为图像通常有很大的大小(比如100 of )，而且可以放入localStorage的数据量有限。最好将URL保存到图像，如果您已经为它们提供了服务，或者，如果有新的图像，则先将它们保存在云桶上，然后保存链接。

票数 1

Stack Overflow用户

发布于 2019-11-29 13:01:41

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

rhythms

Randomise
List a selection
Save (具有本地存储)
清除选择

看看有没有什么可以用的。:)

https://codesandbox.io/s/summer-worker-j9mvo

感兴趣的档案(见左侧)：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59088308

复制

相似问题

问用户可以故意或随机生成两个相关的divs -如何将所选值存储在本地存储中？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用户可以故意或随机生成两个相关的divs -如何将所选值存储在本地存储中？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用户可以故意或随机生成两个相关的divs -如何将所选值存储在本地存储中？
EN