javascript - 无法将数组或对象转换为用于会话存储的 JSON 字符串
问题描述
我一直在尝试使用 JSON.stringify 和 JSON.parse 将我创建的对象存储到位置存储中，但是出了点问题。所有评论都是我过去的尝试。每次我尝试存储元素时，我在 loader() 函数中的 if 语句中都会出现错误，指出“无法读取 null 的属性 '0'”导致我假设数组为空。
function initial() {
if (localStorage.getItem("run") == null) {
/*
var form = document.getElementById("myForm");
var idObject = {};
idObject[form.elements[0].id].("false");
for(var i = 1; i < form.length ; i++){
idObject[form.elements[i].id].push("false");
}
sessionStorage.setItem("savedIds",JSON.stringify(idObject));
*/
/*
var ids = [
{area:"kitchen",done:"true"},
{area:"livingroom",done:"false"},
{area:"bathroom",done:"false"},
{area:"dining",done:"false"},
{area:"bredroom",done:"false"}
];
*/
/*
var ids = {
"kitchen":true,
"livingroom":false,
"bathroom":false,
"dining":false,
"bedroom":false};
*/
var ids = ["false", "false", "false", "false", "false"];
sessionStorage.setItem("savedIds", JSON.stringify(ids));
localStorage.setItem("run", true);
}
}
function loader() {
var form = document.getElementById("myForm");
var obj = JSON.parse(sessionStorage.getItem("savedIds"));
for (var i = 0; i < 5; i++) {
if (obj[i] == "false") {
document.getElementById(form.elements[i].id).style.backgroundColor = "red";
return false;
} else {
document.getElementById(form.elements[i].id).style.backgroundColor = "green";
return false;
}
}
}
编辑1：
function start(){
initial();
loader();
// complete();
}
<body onload="start()">
<header align=center>Home Screen</header>
<p align=center id="result"></p>
<script>
document.getElementById("result").innerHTML = sessionStorage.getItem("currentAddress");
</script>
<ul align=center>
<form id="myForm">
<input type="button" name="area" id="kitchen" value="Kitchen">
<script type="text/javascript">
document.getElementById("kitchen").onclick = function () {
location.href = "http://localhost:8080/Project/kitchen.html";
};
</script>
<input type="button" name="area" id="livingroom" value="Livingroom" >
<script type="text/javascript">
document.getElementById("livingroom").onclick = function () {
location.href = "http://localhost:8080/Project/livingroom.html";
};
</script>
<input type="button" name="area" id="bathroom" value="Bathroom" >
<script type="text/javascript">
document.getElementById("bathroom").onclick = function () {
location.href = "http://localhost:8080/Project/bathroom.html";
};
</script>
<input type="button" name="area" id="dining" value="Dining" >
<script type="text/javascript">
document.getElementById("dining").onclick = function () {
location.href = "http://localhost:8080/Project/dining.html";
};
</script>
<input type="button" name="area" id="bedroom1" value="Bedroom 1" >
<script type="text/javascript">
document.getElementById("bedroom1").onclick = function () {
location.href = "http://localhost:8080/Project/bedroom1.html";
};
</script>
<input type="button" name="area" id="send" value="Complete?" style="display: none";>
<script type="text/javascript">
document.getElementById("bedroom1").onclick = function () {
location.href = "http://localhost:8080/Project/sendinfo.html";
};
</script>
</form>