如何将星级值保存到本地存储以及页面重新加载时如何显示？答案

【问题标题】：How to save star rating value into a local storage and how it display when the page reload?如何将星级值保存到本地存储以及页面重新加载时如何显示？
【发布时间】：2021-07-02 10:26:30
【问题描述】：

我为星级评分开发了一个网页。当用户单击星星时，我需要将星星值保存到本地存储中，并且需要在页面重新加载时在星星上显示该值。

这是我尝试过的

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="manifest" href="manifest.json">
</head>
<body>
    <h1>This is Home page</h1>
    <p>This is a testing page for rating.</p>
    <div>
        <img onClick="rate()" class="star" id="1" src="./img/star.png" />
        <img onClick="rate()" class="star" id="2" src="./img/star.png" />
        <img onClick="rate()" class="star" id="3" src="./img/star.png" />
        <img onClick="rate()" class="star" id="4" src="./img/star.png" />
        <img onClick="rate()" class="star" id="5" src="./img/star.png" />
    </div>
    <div>
        <img onClick="rate1()" class="star" id="6" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="7" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="8" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="9" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="10" src="./img/star.png" />
    </div> 
</body> 
</html>
<script>
    function rate() {
        const { id } = event.target;
        var i;
        for (i = 1; i <= 5; i++) {
            if (i <= parseInt(id)) {
                document.getElementById(i).setAttribute("src", "./img/fillstar.png");
            } else {
                document.getElementById(i).setAttribute("src", "./img/star.png");
            }
        }
    }

    function rate1() {
        const { id } = event.target;
        var i;
        for (i = 6; i <= 10; i++) {
            if (i <= parseInt(id)) {
                document.getElementById(i).setAttribute("src", "./img/fillstar.png");
            } else {
                document.getElementById(i).setAttribute("src", "./img/star.png");
            }
        }
    }
</script>

请帮我解决这个问题。如何使用 'localStorage.setItem()' 设置星值以及如何在页面重新加载时显示该星值？

【问题讨论】：

当你得到评级时，通过调用localStorage.setItem('starRating',rating); 保存它，其中rating是你的评级，当你想检索它时，调用let rating = localStorage.setItem('starRating');，它会将值提取到一个名为rating的变量中
使用id 属性存储图像的星值是一个糟糕的选择。如果您在一页上有多个评分怎么办？
是的，我的页面上有多个评分。有什么建议吗？
你可以使用data attributes

标签： javascript html rating-system

【解决方案1】：

对于本地存储，您可以使用类似的东西

localStorage.setItem('star', 'theStarClickedID');

然后你把它拿回来

var star = localStorage.getItem('star');

然后你检查星的值，并根据你把所有的低到填充星

编辑：另一件事，这部分

for (i = 1; i <= 5; i++) {
        if (i <= parseInt(id)) {
            document.getElementById(i).setAttribute("src", "./img/fillstar.png");
        } else {
            document.getElementById(i).setAttribute("src", "./img/star.png");
        }
    }

我觉得你可以的

for (i = 1; i <= parseInt(id); i++) {
     document.getElementById(i).setAttribute("src", "./img/fillstar.png");
}

第二次编辑：你要求什么

<script>
    load()
    function load() {
        var star = localStorage.getItem('star');;
        for (i = 1; i <= parseInt(star); i++) {
            
            document.getElementById(i).setAttribute("src", "./img/fillstar.png");
            
        }
    }
</script>

【讨论】：

感谢您的回答。我知道这一点，我需要在星星上显示“localStorage.getItem('star')' 值
好吧，例如，您只需执行加载功能，并为星星的 id 更改图像编号？
能否提供一些代码示例？
我编辑了:)，没试过，如果它不起作用，对不起 PS：你应该把它放在javascript文件中，并添加页面加载验证
好的，我试试这个。你能告诉我在哪里设置“localStorage.setItem('star', 'theStarClickedID');”这行代码？