首頁猿問如何在不使用JQuery，JSON...

如何在不使用JQuery，JSON或任何外部庫的情況下使用JavaScript在會話存儲中存

JavaScript

catspeake 2021-05-11 17:43:14

以下代碼包含帶有不同類型食物選項的復選框。如果任務是將復選框存儲到會話存儲中，并在以后檢索它們，那么如何使用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>

查看完整描述

3 回答

犯罪嫌疑人X

TA貢獻2080條經驗獲得超4個贊

JSON不是庫，而是一種表示法?；ㄒ恍r間來閱讀它。

有一些編碼方法。下面有一個簡單的示例。

獲取所有檢查的輸入及其值：

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")));

反對回復 2021-05-20

FFIVE

TA貢獻1797條經驗獲得超6個贊

沒有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';

})

}

反對回復 2021-05-20

慕運維8079593

TA貢獻1876條經驗獲得超5個贊

如果要更高級的序列化，請使用此方法，它應適用于所有值為字符串的對象。

用于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)

反對回復 2021-05-20

3 回答
0 關注
165 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在不使用JQuery，JSON或任何外部庫的情況下使用JavaScript在會話存儲中存

如何在不使用JQuery，JSON或任何外部庫的情況下使用JavaScript在會話存儲中存

3 回答

添加回答

如何在不使用JQuery，JSON或任何外部庫的情況下使用JavaScript在會話存儲中存