这是一个网页，您可以在其中从三个单选按钮中选择背景图片。我想将选择的一个保存在本地存储中，所以当页面刷新时，最后选择的背景图像就会出现。事实并非如此，我不明白为什么，你呢？提前致谢:)
<!DOCTYPE html>
<html manifest="my.manifest">
<head>
<script src="modernizr.js"></script>
<script>
function setBg() {
myForm = document.getElementById("bgList");
for (var i = 0; i < myForm.land.length; i++) {
if (myForm.land[i].checked) {
break
}
}
document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";
if (Modernizr.localstorage) {
localStorage.setItem("background", i);
//alert(localStorage.getItem("background"));
}
else{
alert("Can not be saved to localstorage!");
}
}
</script>
</head>
<body>
// Sørger for å velge et bakgrunnsbilde når siden lastes
<script src="modernizr.js">
window.onload = function(e){
mittLand = 0;
if (localStorage.getItem("background") != null) {
mittLand = parseInt(localStorage.getItem("background"));
alert(mittLand);
}
myForm = document.getElementById("bgList");
myForm.land[mittLand].checked=true;
setBg();
}
</script>
<form id="bgList">
<h1>Velg ditt favorittland</h1>
<input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
<input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
<input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
</form>
</body>
</html>
最佳答案
我不明白哪个部分不起作用？警报正确显示所选选项，但由于您在设置背景之前进行警报，因此背景在警报时不是样式，在您按下警报后图像设置正确。
<!DOCTYPE html>
<html>
<head>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script>
function setBg() {
myForm = document.getElementById("bgList");
for (var i = 0; i < myForm.land.length; i++) {
if (myForm.land[i].checked) {
break
}
}
document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";
if (Modernizr.localstorage) {
localStorage.setItem("background", i);
//alert(localStorage.getItem("background"));
}
else{
alert("Can not be saved to localstorage!");
}
}
</script>
</head>
<body>
// Sørger for å velge et bakgrunnsbilde når siden lastes
<script>
window.onload = function(e){
mittLand = 0;
if (localStorage.getItem("background") != null) {
mittLand = parseInt(localStorage.getItem("background"));
alert(mittLand);
}
myForm = document.getElementById("bgList");
myForm.land[mittLand].checked=true;
setBg();
}
</script>
<form id="bgList">
<h1>Velg ditt favorittland</h1>
<input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
<input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
<input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
</form>
</body>
</html>
试过这段代码有效。使用 modernizr 更新
关于html - 页面刷新时保存在localstorage中的变量消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15649237/