如何在本地存储中保存和检索多个var。 [英] How do I save and retrieve more than one var in local storage.
本文介绍了如何在本地存储中保存和检索多个var。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个应用程序，允许您将类添加到本地存储。我遇到的问题是在我添加了多个条目后，当我重新加载页面时，只有一个条目显示在本地存储中。
I have created a app that lets you add classes to local storage. The problem I am having is after I have added more than one entry, when I reload the page only one entry is showing up from 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变量，因此它的逻辑行为是只保存单行。
Your are using single localStorage variables so it logic behavior that only single row is saved.
创建辅助方法：
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获取类数组，在localStorage中我们无法保存复杂的对象所以我们需要将它解析为String并通过解析方法从它获取，该方法将String解析为js对象。
Above function gets classes array from localStorage, in localStorage we can not save complex objects so we need to parse it to String and get from it by parse method which is parsing String to js objects.
将代码更改为：
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();
};
下一个显示所有课程不仅单身：
Next display All classes not only single:
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;
}
};
这篇关于如何在本地存储中保存和检索多个var。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
