如何在本地存储中保存和检索多个var
How do I save and retrieve more than one var in local storage.
我创建了一个应用程序，可以将类添加到本地存储中。我遇到的问题是，在添加了多个条目后，当我重新加载页面时，本地存储中只显示一个条目。
"use strict";
var $ = function(id) { return document.getElementById(id); };
var className = [];
var classNumber = [];
var startDate = [];
var classLength = [];
var classWeekday = [];
var classTime = [];
var classDescription = [];
var displayClassList = function() {
var className = localStorage.className;
var classNumber = localStorage.classNumber;
var startDate = localStorage.startDate;
var classLength = localStorage.classLength;
var classWeekday = localStorage.classWeekday;
var classTime = localStorage.classTime;
var classDescription = localStorage.classDescription;
$("classesHeader").innerHTML = ("Classes");
$("name").innerHTML = ("Names");
$("number").innerHTML = ("Number");
$("start").innerHTML = ("Start");
$("length").innerHTML = ("Length");
$("weekday").innerHTML = ("Weekday");
$("time").innerHTML = ("Time");
$("description").innerHTML = ("Description");
var table = $("classesTable")
var row = table.insertRow(table.rows.length);
var cell = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
cell.innerHTML = className;
cell2.innerHTML = classNumber;
cell3.innerHTML = startDate;
cell4.innerHTML = classLength;
cell5.innerHTML = classWeekday;
cell6.innerHTML = classTime;
cell7.innerHTML = classDescription;
};
var addToTable = function() {
var className = $("className").value;
var classNumber = $("classNumber").value;
var startDate = $("startDate").value;
var classLength = $("classLength").value;
var classWeekday = $("classWeekday").value;
var classTime = $("classTime").value;
var classDescription = $("classDescription").value;
localStorage.className = className;
localStorage.classNumber = classNumber;
localStorage.startDate = startDate;
localStorage.classLength = classLength;
localStorage.classWeekday = classWeekday;
localStorage.classTime = classTime;
localStorage.classDescription = classDescription;
displayClassList();
};
var clearForm = function() {
$("className").value = "";
$("classNameError").firstChild.nodeValue = "*";
$("classNumber").value = "";
$("classNumberError").firstChild.nodeValue = "*";
$("startDate").value = "";
$("startDateError").firstChild.nodeValue = "*";
$("classLength").value = "";
$("classLengthError").firstChild.nodeValue = "*";
$("classWeekday").value = "";
$("weekdayError").firstChild.nodeValue = "*";
$("classTime").value = "";
$("timeError").firstChild.nodeValue = "*";
$("classDescription").value = "";
$("classDescriptionError").firstChild.nodeValue = "*";
//tasks.length = 0;
//localStorage.tasks = "";
// $("classList").value = "";
$("className").focus();
};
window.onload = function() {
displayClassList();
$("register").onclick = addToTable;
$("reset_form").onclick = clearForm;
};
<!DOCTYPE html>
<html>
<head>
<title>Class Catalog Maintenance</title>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 700px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
label {
float: left;
width: 9.5em;
}
input {
width: 22em;
margin-right: 1em;
margin-bottom: 1em;
}
span {
color: red;
}
input[type=button] {
width: 10em;
}
p {
margin: 0;
}
td {
width: 7em;
}
</style>
</head>
<body>
<main>
<h1>Class Catalog Maintenance</h1>
<h2>Add a class</h2>
<label>Class Name:</label>
<input type="text" name="className" id="className">
<span id="classNameError">*</span><br>
<label>Class Number:</label>
<input type="text" name="classNumber" id="classNumber">
<span id="classNumberError">*</span><br>
<label>Start Date:</label>
<input type="text" name="startDate" id="startDate">
<span id="startDateError">*</span><br>
<label>Class Length (in weeks):</label>
<select name="classLength" id="classLength">
<option value="">Select an option</option>
<option>10</option>
<option>7.5</option>
<option>6</option>
</select>
<span id="classLengthError">*</span><br><br>
<label>Weekday and Time:</label>
<select name="classWeekday" id="classWeekday">
<option value="">Select an option</option>
<option>TTH</option>
<option>MWF</option>
<option>TWTH</option>
</select>
<span id="weekdayError">*</span>
<select name="classTime" id="classTime">
<option value="">Select an option</option>
<option>8:00am</option>
<option>9:00am</option>
<option>10:00am</option>
<option>11:00am</option>
<option>12:00pm</option>
<option>1:00pm</option>
<option>2:00pm</option>
<option>3:00pm</option>
<option>4:00pm</option>
<option>5:00pm</option>
<option>6:00pm</option>
</select>
<span id="timeError">*</span><br><br>
<label>Class Description:</label>
<span id="classDescriptionError">*</span><br><br>
<textarea name="classDescription" id="classDescription" rows="5" cols="40"></textarea>
<br><br>
<input type="button" id="register" value="Add">
<input type="button" id="reset_form" value="Clear">
<h2 id="classesHeader"> </h2>
<table id="classesTable">
<tr>
<th id="name" align="left"></th>
<th id="number" align="left"></th>
<th id="start" align="left"></th>
<th id="length" align="left"></th>
<th id="weekday" align="left"></th>
<th id="time" align="left"></th>
<th id="description" align="left"></th>
</tr>
</table>
</main>
</html>
您使用的是单个localStorage变量，因此只保存一行是逻辑行为。
创建助手方法：
function getClasses(){
var classes;
if (typeof localStorage.classes === "undefined")
classes=[];//new array
else
classes=JSON.parse(localStorage.classes);//get classes String and parse it to JS array
return classes;
}
上面的函数从localStorage获取classes数组，在localStorage中我们不能保存复杂的对象，所以我们需要将其解析为String，然后通过解析方法从中获取，该方法将String解析为js对象。
将代码更改为：
var addToTable = function() {
var className = $("className").value;
var classNumber = $("classNumber").value;
var startDate = $("startDate").value;
var classLength = $("classLength").value;
var classWeekday = $("classWeekday").value;
var classTime = $("classTime").value;
var classDescription = $("classDescription").value;
var classes=getClasses(); //use helper method
var newClass={};
newClass.className = className;
newClass.classNumber = classNumber;
newClass.startDate = startDate;
newClass.classLength = classLength;
newClass.classWeekday = classWeekday;
newClass.classTime = classTime;
newClass.classDescription = classDescription;
classes.push(newClass); //add class to array
localStorage.classes=JSON.stringify(classes);//save with changes as String
displayClassList();
};
下一个显示所有类别不仅仅是单一的：
var displayClassList = function() {
var classes=getClasses();
$("classesHeader").innerHTML = ("Classes");
$("name").innerHTML = ("Names");
$("number").innerHTML = ("Number");
$("start").innerHTML = ("Start");
$("length").innerHTML = ("Length");
$("weekday").innerHTML = ("Weekday");
$("time").innerHTML = ("Time");
$("description").innerHTML = ("Description");
var table = $("classesTable")
for (var i=0; i<classes.length; i++){ //loop for all classes from local storage
var row = table.insertRow(table.rows.length);
var cell = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
cell.innerHTML = className;
cell2.innerHTML = classNumber;
cell3.innerHTML = startDate;
cell4.innerHTML = classLength;
cell5.innerHTML = classWeekday;
cell6.innerHTML = classTime;
cell7.innerHTML = classDescription;
}
};
相关文章：
- 使用JSP从服务器检索和显示图像
- 通过Magento的网络服务检索运费
- 控制台返回var不是't定义，但它是
- 如何通过php页面将数据库值检索到jquery自动完成框中
- 从var向代码隐藏函数传递值
- 如何通过引用var Using DataTables来进行分页或排序
- jQuery语法添加了var
- 无法使用javascript检索SPList项
- 如何将具有文本类型值的var放入jQuery函数中
- 可以't使用Angular解析/检索JSON
- JS:检查URL中的参数，然后迭代一个参数为var的函数
- GoogleFeed正在检索图像
- 通过ajax将坐标传递到php服务器端，并在处理后检索到javascript
- 使用Scala Play Framework视图中的键检索映射值
- 更改json/javascript对象var名称或从数字var中检索值
- 如何将动态追加元素的多个值存储到单个 var 中，然后检索到函数中
- 自定义 Javascript 提示对话框(如何检索值并将其存储为 var）
- 如何在本地存储中保存和检索多个var
- ReactJs 组件如何从 componentWillMount 中检索 var
- 在javascript var中检索mysql数据
