Javascript 如何检索HTML复选框'；来自本地JSON文件的状态？

有了一个HTML表，其中有一些复选框，我希望将其保存在一个local.JSON文件中，从而不是

localStorage

每个复选框的状态，当我重新加载页面时，我希望自动重新加载（如果存在）保存的JSON文件，以便检索以前配置的复选框状态

该表的结构如下所示。 它被封装成一个表格。 行的数量是动态构建的，因此是可变的

LocalStorage

方法无法解决问题，因为我无法将该文件从一台PC移植到另一台PC，检索复选框的状态。这是我的需要

通过下面的代码，我能够编写该文件。 但当我尝试加载它时，它无法返回：

未捕获的SyntaxError:JSON中位置1处的意外标记i

但从我看到的情况来看，JSON文件的格式是正确的。 我可以看到它在控制台（铬）以及

JSON

{“checkfield0”：true，“checkfield1”：true，“checkfield2”：false，“checkfield3”：false}

JQUERY

（函数（$）{
$.fn.toJSON=function（）{
var$elements={}；
var$form=$（此）；
$form.find（'input，select，textarea'）。每个（函数（）{
var name=$（this.attr（'name'））
变量类型=$（this.attr（'type'））
如果（姓名）{
var$价值；
如果（类型=='radio'）{
$value=$（'input[name='+name+']：选中'，$form）.val（）
}else if（类型=='checkbox'）{
$value=$（this）.is（“：选中”）
}否则{
$value=$（this.val（）
}
$elements[$（this.attr（'name'）]=$value
}
});
返回JSON.stringify（$elements）
};
$.fn.fromJSON=函数（json_字符串）{
var$form=$（此）
var data=JSON.parse（JSON_字符串）
$。每个（数据、函数（键、值）{
变量$elem=$（“[name=“”+key+“]”，$form）
变量类型=$elem.first（）.attr（'type'）
如果（类型=='radio'）{
$（'[name=“'+key+']”][value=“'+value+''“]]”）。属性（'checked'，true）
}else if（type='checkbox'&&（value==true | | value==true））{
$（“[name=“”+key+“]”）。prop（'checked'，true）
}否则{
$elem.val（值）
}
})
};
}（jQuery））；
//测试代码。
//它只对SAVE有效。空载
$（文档）.ready（函数（）{
$（“#保存文件”）。在（'click'，function（）上{
日志（“保存表单数据…”）
var data=$（“form#TableForm”）.toJSON（）
控制台日志（数据）；
//localStorage['form_data']=数据；
函数saveText（文本、文件名）{
var a=document.createElement（'a'）；
a、 setAttribute（'href'，'data:text/plain；charset=utf-8'，+encodeURIComponent（text））；
a、 setAttribute（'下载'，文件名）；
a、 单击（）
}
saveText（数据，“FORM.fields.json”）；
返回false；
})
$（“#加载文件”）。在（'click'，function（）上{
日志（“正在加载表单数据…”）
控制台日志（“file:///k:/projects/FORM.fields.json“”//在控制台中，JSON已正确加载
$（“form#TableForm”）。fromJSON（“file:///k:/projects/FORM.fields.json")
})
});

HTML

拯救
负载
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素

这里有一些有趣的代码。我猜你的挑战来自这样一个事实：出于安全原因，javascript不能只读取本地文件。它必须是用户启动的事件，您需要使用

和

下面是一个演示：

//禁止在单击按钮时提交表单
$（'form button'）。在（'click'，e=>e.preventDefault（））上；
//打开文件加载器
$（'button.file load'）。在（'click'，function（）上{
$（'.file loader'）。单击（）；
});
//取消选中所有复选框
$（'button.reset'）。在（'click'，function（）上{
$（'table input[type=“checkbox”]”）。每个（函数（）{
此项检查=错误；
});
});
//将复选框状态转换为json并保存
$（'button.file save'）。在（'click'，function（）上{
设a=document.createElement（'a'），
国家={}；
$（'table input[type=“checkbox”]”）。每个（函数（）{
states[this.name]=this.checked
});
a、 setAttribute（'href'，'data:text/plain；charset=utf-8'，+JSON.stringify（states））；
a、 setAttribute（'download'，'checkbox_saved_states.json'）；
a、 单击（）；
a、 删除（）；
});
//加载保存的状态
$（'.file loader'）。在（'change'，function（）上{
let reader=new FileReader（）；
reader.onload=函数（文件）{
$.each（JSON.parse（file.target.result）、函数（id、state）{
$（`forminput[name=“${id}”]`）.prop（'checked'，state）；
});
};
reader.readAsText（this.files[0]）；
});

拯救
负载
重置
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素
这里有一些描述性的元素