如何在不使用JQuery，JSON或任何外部库的情况下使用JavaScript在会话存储中存
以下代码包含带有不同类型食物选项的复选框。
如果任务是将复选框存储到会话存储中，并在以后检索它们，那么如何使用JavaScript存储和检索复选框，而不使用JQuery，JSON或任何外部库？
"use strict";
function validate() {
var result = true;
var food = getFood();
if (result) {
saveFood(food)
}
return result;
}
function getFood() {
var foodType = "unknown";
var foodArray = document.getElementById("food").getElementsByTagName("input");
for (var i = 0; i < foodArray.length; i++) {
if (foodArray[i].checked) {
foodType = foodArray[i].value;
}
}
return foodType;
}
function storeFood(food) {
sessionStorage.food = food;
}
function retrieveFood() {
switch (sessionStorage.food) {
case "Pizza":
document.getElementById("pizza").checked = true;
break;
case "Hamburger":
document.getElementById("hamburger").checked = true;
break;
case "Sandwich":
document.getElementById("sandwich").checked = true;
break;
}
}
function init() {
if (document.getElementById("food-page") != null) {
retrieveFood();
document.getElementById("food-form").onsubmit = validate;
}
}
window.onload = init;
<body id"food-page">
<form id="food-form" method="post" action="server">
<fieldset id="food">
<legend>Foods</legend>
<p>
<label for="pizza">Pizza</label>
<input type="checkbox" id="pizza" class="food-choices" name="food-checkboxes" checked="checked" value="Pizza" required="required" />
<label for="hamburger">Hamburger</label>
<input type="checkbox" id="hamburger" class="food-choices" name="food-checkboxes" value="Hamburger" />
<label for="sandwich">Sandwich</label>
<input type="checkbox" id="sandwich" class="food-choices" name="food-checkboxes" value="Sandwich" />
</p>
</fieldset>
</form>
</body>
catspeake3回答
-
犯罪嫌疑人X
JSON不是库，而是一种表示法。花一些时间来阅读它。有一些编码方法。下面有一个简单的示例。获取所有检查的输入及其值：var result = Array.from(document.querySelectorAll('input[type=checkbox]:checked')).map(a => { return { id: a.getAttribute("id"), value: a.value }; });console.log(result);在本地存储中保存和从中检索：var resultInJson = JSON.stringify(result);console.log(resultInJson);localStorage.setItem("data", resultInJson);console.log(localStorage.getItem("data"));console.log(JSON.parse(localStorage.getItem("data"))); -
FFIVE
没有JSON注意事项的解决方案：const foodForm = document.querySelector('#food-form'), StorageName = 'myFoodStorage';foodForm.onchange=()=>{ // = storeFood let CheckList = Array.from(foodForm.querySelectorAll('input[type=checkbox]')).map(a=>`${a.id}=${a.checked}`); sessionStorage.setItem(StorageName, CheckList.join(','));}window.onload=()=>{ // = retrieveFood let CheckList = sessionStorage.getItem(StorageName) if (CheckList) { CheckList.split(',').forEach(e=>{ let pair = e.split('='); document.getElementById('pair[0]').checked = pair[1] === 'true'; }) }} -
慕运维8079593
如果要更高级的序列化，请使用此方法，它应适用于所有值为字符串的对象。用于sessionStorage.setItem('foods', serialize(foodStates))存储复选框的状态并用于对其parse(sessionStorage.getItem('foods'))进行重构"use strict";function sanitize(str) { //Split into char array, escape chars and put back together into string return str.split('').map(chr => sanitize.map[chr] || chr).join('')}function desanitize(str) { //Split into char array, escape chars and put back together into string return str.replace('\\:', ':').replace('\\;', ';').replace('\\\\', '\\')}sanitize.map = { '\\': '\\\\', ':': '\\:', ';': '\\;'}function serialize(obj) { var result = ""; for(var prop in obj) { result += `${sanitize(prop)} :${sanitize(obj[prop])} ;`; } //Remove last ' ;' result = result.slice(0, -2); return result;}function parse(str) { var obj = {}; for(var part of str.split(' ;')) { var [key, value] = part.split(' :') key = desanitize(key) value = desanitize(value) obj[key] = value; } return obj;}var orgObj = {pizza: "true", hamburger: "false", sandwich: "true"}console.log(orgObj)var encodedString = serialize(orgObj)console.log(encodedString)var newObj = parse(encodedString)console.log(newObj)
随时随地看视频慕课网APP
相关分类
JavaScript