javascript - 如何将星级值保存到本地存储以及页面重新加载时如何显示?
问题描述
我为星级评分开发了一个网页。当用户单击星星时,我需要将星星值保存到本地存储中,并且需要在页面重新加载时在星星上显示该值。
这是我尝试过的
<!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');
然后你检查星的值,并根据你把所有的低到填充星
编辑:另一件事,对于这部分
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>
推荐阅读
- python - 如何使用 Python - Django 获取模型的第 n 条记录?
- mysql - 这需要多对多的关系吗?
- android - 任务“:app:checkDebugAarMetadata”执行失败。安卓
- reactjs - 在 AWS Lambda 上运行的对 NextJS 的替代 SSR React
- excel - 将生成的 excel 变量导出到真实的 excel 文件
- css - CSS FlexBox - 调整窗口大小时图像未调整大小
- python - Tensorflow Keras 模型结果不可重现
- flutter - 如何在颤动中为小部件使用 const 构造函数?
- python - 从字符串创建正则表达式字符集
- neo4j - 从 csv 文件中获取节点标签名称