javascript - 将本地存储与多个页面上的表单一起使用
问题描述
每次用户在文本框中输入信息时,我都想保存他们输入的所有内容以创建人员对象数组并使用本地存储保存它们。例如,如果用户输入姓名:James,职业:医生和姓名:Sam,职业:护士,那么数组将是
var person = [
{name:"James",
occupation: "doctor"
},
{name:"Sam"
occupation: "nurse"
];
在第二页上,我将为每个人制作一个单独的 div,为里面的每个人显示一张图片,以及来自表单页面的所有数据(类似于年鉴)。我知道这 5 个方法是 setItem()、getItem()、removeItem()、clear() 和 & key()。但是,每次用户完成表单时,我都无法开始使用本地存储部分并在数组中创建一个新对象。我不确定每次填写表单时如何保存所有数据,将数据保存在本地存储中,然后在第二页上检索本地存储数据以在 div 中使用。到目前为止,这是我的代码:
HTML(表格页)
<form onsubmit="return myFunction();">
<table>
<tr>
<p>Name: </p>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<p>Occupation: </p>
<td><input id="occupation" type="text" /></td>
</tr>
<tr>
<td>
<div>
<input type="submit" value="Save" />
</div>
</td>
</tr>
</table>
</form>
JAVASCRIPT
function myFunction() {
var name = document.getElementById("name").value;
var occupation = document.getElementById("occupation").value;
if (name == "") {
alert("You forgot to enter your name!");
}
if (occupation == "") {
alert("You forgot to enter your occupation!");
}
}
注意:我不确定这是否可以使用 jQuery 或其他语言来完成,但我只使用 Javascript。
解决方案
您可以使用 myFunction 验证表单,如果表单通过验证,则可以将表单内容添加到 localstorage JSON 数组。
function myFunction() {
var fname = document.getElementById("name").value;
var foccupation = document.getElementById("occupation").value;
if (fname == "") {
alert("You forgot to enter your name!");
document.getElementById("name").focus();
return false;
}
else if (foccupation == "") {
alert("You forgot to enter your occupation!");
document.getElementById("occupation").focus();
return false;
}
else {
// get array called "pepple" from local storage and then add to it
var allPeople = JSON.parse(localStorage.getItem("people"));
console.log(allPeople);
if(allPeople===null) {
// first time - the array is not in the localstorage yet
allPeople = {items:[{name:fname, occupation:foccupation}]};
}
else {
allPeople.items.push({name:fname, occupation:foccupation});
}
//console.log(allPeople);
localStorage.setItem("people", JSON.stringify(allPeople) );
// go to next page
document.location = "page2.html";
return false;
}
return false;
}
在下一页上可以有一个像这样的 div -
<div id="allpeopledisplay"></div>
和像这样填充相同的javascript。
<script>
var allPeople = JSON.parse(localStorage.getItem("people"));
var allPeopleDiv = document.getElementById('allpeopledisplay');
console.log(allPeople);
console.log(allPeople.items.length);
for(var i = 0; i < allPeople.items.length; i++) {
var person = allPeople.items[i];
console.log(person);
allPeopleDiv.innerHTML += "<div>Name: "+person['name']+"<br/>Occupation: "+person['occupation']+"<hr></div>";
}
</script>
推荐阅读
- linux - 围攻仅捕获最终统计数据
- javascript - React - 将输入道具从 defaultValue 设置为 value 触发无限循环
- android-intent - 浮动操作按钮不显示显示()?
- powershell - Powershell HashSet 成员错误地转换为 hashset
- react-native - 将日期值分配到本机基础日期选择器
- node.js - Angular 8 - 通过 USB 提供时获取 styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
- sql-server - MS SQL -- 从第三个表添加另一个限制
- vue.js - v-bind:class 不使用数组变量
- sql-server - 如何在将数据添加到表中时动态插入日期?
- github - 什么是 GraphQL 查询以确定组织中是否存在 GitHub 包?