如何使用 javascript 在本地存储中存储多个复选框值？答案

【问题标题】：How do I store mutilple checkbox values in local storage with javascript?如何使用 javascript 在本地存储中存储多个复选框值？
【发布时间】：2018-12-18 16:59:12
【问题描述】：

尝试存储复选框的值，但我的本地存储应用程序似乎没有弹出任何内容：(

<label id='interest'>Interests:</label>
<input type="checkbox" id="education" value="education" name="user_interest"><label class="light" for="Education">Educational purpose</label><br>

<input type="checkbox" id="CCA" value="CCA" name="user_interest">
<label class="light" for="CCA">CCA Points</label><br>

<input type="checkbox" id="development" value="development" name="user_interest"><label class="light" for="development">Development</label><br>

<input type="checkbox" id="design" value="design" name="user_interest"><label class="light" for="design">Design</label><br>

<input type="checkbox" id="business" value="business" name="user_interest"><label class="light" for="business">Business</label>


<button type="submit" onClick="signup()" id="sign_up">Sign Up</button>




<script>
function signup()
{
localStorage.setItem("users_interests" + document.getElementByClassName("light").value, document.getElementByClassName("light").value);
}

</script>

【问题讨论】：

没有这样的文档称为getElementByClassName 只有getElementsByClassName 返回节点集合，请参阅此处的文档（developer.mozilla.org/en-US/docs/Web/API/Document/…）

标签： javascript local-storage storage local

【解决方案1】：

试试这个

function signup()
{
var users_interests =[];
var els = document.getElementsByName("user_interest");

Array.prototype.forEach.call(els, function(el) {   
      if (el.type == "checkbox" && el.checked) { 
         users_interests.push(el.value); 
      }
    // Do stuff here 
});

localStorage.setItem("users_interests",JSON.stringify(users_interests));
  console.log(JSON.parse(localStorage.getItem("users_interests")));
}

【讨论】：

在这个例子中我们都检查并将结果放入一个数组中，如果要使用逗号分隔的返回，只需删除 json。 json 返回数组示例 - [a, b, c] 不是 json (string) 示例 - a, b, c

【解决方案2】：

文档中没有这样的方法 getElementByClassName 只有 getElementsByClassName 返回一个节点集合，所以你需要将你的函数更改为这样的：

function signup()
{
    //Declare constant variable to hold the elements with class light
    const lightEles = document.getElementsByClassName("light");

    //Declare an array to hold the values
    let eleValues = [];

    //Iterate the node collection and push each element's value into the array
    for(let x = 0; x < lightEles.length; x++){
        eleValues.push(lightEles[x].value);
    }

    //Set array to localStorage key
    localStorage.setItem("users_interests", eleValues);
}

【讨论】：