我正在构建一个视频库，到目前为止已超过 15 页。我的页面由每个视频剪辑的缩略图组成。每页包含 200 到 300 个拇指。当选择拇指时，它会打开一个带有图片、描述和播放按钮的模式来观看视频。我正在使用一个名为 StarRate 的星级评分模块，它为每个拇指提供一组 5 颗星来对视频进行评分。每个星星都是一个单选按钮，您可以选择该按钮来为每个拇指提供所需的评级。一切都按预期进行，但我需要能够在从本地文件加载页面时加载单选按钮的值。我还需要它在评级更改时保存所有值，覆盖原始文件，以便稍后打开页面时更新它。它在本地计算机上运行，而不是在服务器上运行，仅在本地运行，因此我没有可用于存储和检索值的数据库。我是初学者，因此我们将不胜感激您提供的任何帮助:)
这是我的代码示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Video Gallery</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link type="text/css" href="assets/StarRate/jquery-ui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="assets/css/thumbs_new.css" />
<link href='assets/StarRate/jquery.rating.css' type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="assets/StarRate/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/pre_load_img.js"></script>
<script type="text/javascript" src="assets/js/rdm_bg_imgV2.js"></script>
<script type="text/javascript" src="assets/StarRate/jquery.MetaData.js"></script>
<script type="text/javascript" src="assets/StarRate/jquery.rating.js"></script>
</head>
<body>
<div id="wrapper">
!-- Page Header -->
<a name="pagetop" ></a>
<div id="banner" align="center"><img src="images/banner.png" width="75%" /></div>
<!-- Menu -->
<div align="center"><script type="text/javascript" src="assets/js/navmenu.js"></script></div>
<div id="content">
<div class="thumbContainer">
<button class="btn-thumb" id='pic10' href="#M1"></button>
<div class="starContainer">
<input class="hover-star" type="radio" name="m1" value="1" title="Very poor"/>
<input class="hover-star" type="radio" name="m1" value="2" title="Poor"/>
<input class="hover-star" type="radio" name="m1" value="3" title="OK"/>
<input class="hover-star" type="radio" name="m1" value="4" title="Good"/>
<input class="hover-star" type="radio" name="m1" value="5" title="Very Good"/>
</div>
</div>
<div class="thumbContainer">
<button class="btn-thumb" id='pic20' href="#M2"></button>
<div class="starContainer">
<input class="hover-star" type="radio" name="m2" value="1" title="Very poor"/>
<input class="hover-star" type="radio" name="m2" value="2" title="Poor"/>
<input class="hover-star" type="radio" name="m2" value="3" title="OK"/>
<input class="hover-star" type="radio" name="m2" value="4" title="Good"/>
<input class="hover-star" type="radio" name="m2" value="5" title="Very Good"/>
</div>
</div>
<div id="M1"class="modal"><div class="modal-content">
<div class="modal-header"><span class="close">×</span><h2>video 1</h2></div>
<div class="modal-body">
<div class="popupDivPic"><img src="images/posters/video1.jpg" /></div>
<div class="popupDivTxt">
<div class="genreBox">Educational</div>
<div class="DivTxtContainer">
<div class="DivTxtColumn1">Rating :<span class="ratingNUM">7.5</span></div>
<div class="DivTxtColumn2">Runtime :<span class="runtimeNUM">53min</span></div>
</div>
<a href="file:///O|\videos/video1.mkv" title="Start video"><img src="images/playBTN2.gif" /></a><br/>
<p>description</p><br/>
</div>
</div>
<div class="modal-footer"></div>
</div></div>
<div id="M2"class="modal"><div class="modal-content">
<div class="modal-header"><span class="close">×</span><h2>video 2</h2></div>
<div class="modal-body">
<div class="popupDivPic"><img src="images/posters/video2.jpg" /></div>
<div class="popupDivTxt">
<div class="genreBox">Educational</div>
<div class="DivTxtContainer">
<div class="DivTxtColumn1">Rating :<span class="ratingNUM">5.5</span></div>
<div class="DivTxtColumn2">Runtime :<span class="runtimeNUM">45min</span></div>
</div>
<a href="file:///O|\videos/video2.mkv" title="Start video"><img src="images/playBTN2.gif" /></a><br/>
<p>description</p><br/>
</div>
</div>
<div class="modal-footer"></div>
</div></div>
</div><!-- content closed -->
</div><!-- wrapper closed -->
<script type="text/javascript" src="assets/js/open_modal.js"></script>
<div class="footer"><h1><a href="#pagetop" >Back to top</a></h1></div>
<script type="text/javascript"> ChangeIt(); </script>
</body>
</html>
我可以使用以下代码检索每个选定的星形单选按钮的选定值：
<!-- Submit button -->
<button type="button" onclick="displayRadioValue()">
Submit
</button>
<br>
<div id="result"></div>
<script>
function displayRadioValue() {
document.getElementById("result").innerHTML = "";
var ele = document.getElementsByTagName('input');
for (i = 0; i < ele.length; i++) {
if (ele[i].type = "radio") {
if (ele[i].checked)
document.getElementById("result").innerHTML
+= ele[i].name + " Value: "
+ ele[i].value + "<br>";
}
}
}
</script>
我可以使用以下代码设置星形单选按钮的页面加载值：
<script>
$(function() {
var $radios = $('input:radio[name=m2]');
if($radios.is(':checked') === false) {
$radios.filter('[value=2]').prop('checked', true);
}
});
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
</script>
你尝试过吗
localStoragelocalStorage如何设置值：
localStorage.setItem("myCat", "Tom");
如何获取值：
const cat = localStorage.getItem("myCat");
在此处查看更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage