如何将星级值保存到本地存储以及页面重新加载时如何显示?
How to save star rating value into a local storage and how it display when the page reload?
我开发了一个星级评分网页。我需要在用户点击星星时将星星值保存到本地存储中,并需要在页面重新加载时在星星上显示该值。
这是我试过的
<!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('star', 'theStarClickedID');
然后你用
取回
var star = localStorage.getItem('star');
然后你检查星的值,并根据它把所有的都降低到 filledstar
编辑:这部分的另一件事
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>
我开发了一个星级评分网页。我需要在用户点击星星时将星星值保存到本地存储中,并需要在页面重新加载时在星星上显示该值。
这是我试过的
<!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('star', 'theStarClickedID');
然后你用
取回var star = localStorage.getItem('star');
然后你检查星的值,并根据它把所有的都降低到 filledstar
编辑:这部分的另一件事
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>