在本地存储中保存以前的提交 JavaScript
Save previous submissions in local storage JavaScript
我正在制作一个 JavaScript 程序。它使用 3 个输入框，然后将您在每个输入框中键入的内容显示到页面中。我正在使用本地存储重新打印以前的提交，但是当我使用 setItem() 时，它会覆盖所有以前的提交。我还能怎么做才能保留任何之前提交的内容？
我试图用我的代码创建一个 JSFiddle 来发送这个 post，但是代码在 JSFiddle 的控制台中给出了错误。它在本地工作得很好。原始和完整注释的代码粘贴在下面。
注意： This post 不是重复项，因为它处理的是会话存储而不是本地存储。
代码：
"use strict";
// First we do a self-invoking function that contains everything - there will be nothing
// exposed to the global scope.
(function() {
var storageArray = [];
window.onload = retrieve();
function Credential(name, address, email) {
this.name = name;
this.address = address;
this.email = email;
}
var button = document.getElementById("doit");
button.onclick = function() {
/* This function will run when the user clicks on the
* Save button. */
//Step #1 - we get values from the form
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var email = document.getElementById("email").value;
// Step #2 - you will create a new data object
var data = {
name, address, email
};
// Step #3 - call on writeRowtoPage() to write your new data object to the page
writeRowToPage(data, output);
// Step#4 - Store your object in localStorage (preserving data
// that's already in there from prior submissions!)
storageArray.push(data);
window.localStorage.setItem("storageArr", JSON.stringify(storageArray));
}
/* This function accepts two arguments -
@dataObject: your data object representing a single
submission of the data form, which corresponds
to one row in the table
@element: the element on the page to which to write the output
The function assembles a string of HTML, using the data from
dataObject. Once the string is complete, it is appended to the
page using innerHTML.
*/
function writeRowToPage(dataObject, element) {
var s = "<div class=\"info\">";
s += '<div class="nameDiv">';
if (dataObject.name !== 'undefined') {
s += dataObject.name;
}
s += '</div><div class="addrDiv">';
if (dataObject.address !== 'undefined') {
s += dataObject.address;
}
s += '</div><div class="emailDiv">';
if (dataObject.email !== 'undefined') {
s += dataObject.email;
}
s += '</div></div>';
element.innerHTML += s;
}
/* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage(). */
var credString = window.localStorage.getItem("storageArr");
var credList = JSON.parse(credString);
function retrieve() {
for (var i = 0; i < credList.length; i++) {
var newCred = new Credential(credList[i].name, credList[i].address, credList[i].email);
storageArray.push(newCred);
writeRowToPage(newCred, 'output');
}
}
}
)();
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333;
}
.button {
border: 1px solid #888888;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 30px;
width: 82px;
line-height: 14px;
padding: .5em;
text-align: center;
background-color: #614C26;
}
.button:hover {
border: 2px solid #000;
}
label {
display: inline-block;
width: 5em;
}
.info div {
display: inline-block;
width: 10em;
}
.infoHead {
font-weight: bold;
border-bottom: 1px solid gray;
width: 30em;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/cscie3.css">
</head>
<body>
<label for="name">Name</label>
<input type="text" size="40" id="name">
<br>
<label for="address">Address</label>
<input type="text" size="40" id="address">
<br>
<label for="email">Email</label>
<input type="text" size="40" id="email">
<br>
<button id="doit" class="button">Save</button>
<h2>My Records</h2>
<div id="output">
<div class="info infoHead">
<div>Name</div>
<div>Address</div>
<div>Email</div>
</div>
</div>
<script tyle="text/javascript" src="js/hw2b_v3.js"></script>
</body>
</html>
那是因为每次加载页面时，您都会获得新数组并在 localStorage 中设置新值。所以试试这个
"use strict";
// First we do a self-invoking function that contains everything - there will be nothing
// exposed to the global scope.
(function(){
var storageArray = localStorage["storageArr"] ? JSON.parse(localStorage["storageArr"]) : [];
window.onload = retrieve();
function Credential (name, address, email) {
this.name = name;
this.address = address;
this.email = email;
}
var button = document.getElementById("doit");
button.onclick = function(){
/* This function will run when the user clicks on the
* Save button. */
//Step #1 - we get values from the form
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var email = document.getElementById("email").value;
// Step #2 - you will create a new data object
var data = {name, address, email};
// Step #3 - call on writeRowtoPage() to write your new data object to the page
writeRowToPage(data, output);
// Step#4 - Store your object in localStorage (preserving data
// that's already in there from prior submissions!)
storageArray.push(data);
window.localStorage.setItem("storageArr",JSON.stringify(storageArray));
}
/* This function accepts two arguments -
@dataObject: your data object representing a single
submission of the data form, which corresponds
to one row in the table
@element: the element on the page to which to write the output
The function assembles a string of HTML, using the data from
dataObject. Once the string is complete, it is appended to the
page using innerHTML.
*/
function writeRowToPage(dataObject, element) {
var s = "<div class=\"info\">";
s+='<div class="nameDiv">';
if (dataObject.name !== 'undefined') {
s+=dataObject.name;
}
s+= '</div><div class="addrDiv">';
if (dataObject.address !== 'undefined') {
s+=dataObject.address;
}
s+= '</div><div class="emailDiv">';
if (dataObject.email !== 'undefined') {
s+=dataObject.email;
}
s+= '</div></div>';
element.innerHTML += s;
}
/* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage(). */
function retrieve() {
var localMemory = window.localStorage.getItem("localArr");
var parsedLocalMemory = JSON.parse(localMemory);
if (parsedLocalMemory != null){
for (var i = 0; i < parsedLocalMemory.length; i++) {
var nextPerson = new AddrBookEntry (parsedLocalMemory[i].name, parsedLocalMemory[i].addr, parsedLocalMemory[i].email);
writeRowToPage(nextPerson, output);
}
}
}
}
)();
我正在制作一个 JavaScript 程序。它使用 3 个输入框，然后将您在每个输入框中键入的内容显示到页面中。我正在使用本地存储重新打印以前的提交，但是当我使用 setItem() 时，它会覆盖所有以前的提交。我还能怎么做才能保留任何之前提交的内容？
我试图用我的代码创建一个 JSFiddle 来发送这个 post，但是代码在 JSFiddle 的控制台中给出了错误。它在本地工作得很好。原始和完整注释的代码粘贴在下面。
注意： This post 不是重复项，因为它处理的是会话存储而不是本地存储。
代码：
"use strict";
// First we do a self-invoking function that contains everything - there will be nothing
// exposed to the global scope.
(function() {
var storageArray = [];
window.onload = retrieve();
function Credential(name, address, email) {
this.name = name;
this.address = address;
this.email = email;
}
var button = document.getElementById("doit");
button.onclick = function() {
/* This function will run when the user clicks on the
* Save button. */
//Step #1 - we get values from the form
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var email = document.getElementById("email").value;
// Step #2 - you will create a new data object
var data = {
name, address, email
};
// Step #3 - call on writeRowtoPage() to write your new data object to the page
writeRowToPage(data, output);
// Step#4 - Store your object in localStorage (preserving data
// that's already in there from prior submissions!)
storageArray.push(data);
window.localStorage.setItem("storageArr", JSON.stringify(storageArray));
}
/* This function accepts two arguments -
@dataObject: your data object representing a single
submission of the data form, which corresponds
to one row in the table
@element: the element on the page to which to write the output
The function assembles a string of HTML, using the data from
dataObject. Once the string is complete, it is appended to the
page using innerHTML.
*/
function writeRowToPage(dataObject, element) {
var s = "<div class=\"info\">";
s += '<div class="nameDiv">';
if (dataObject.name !== 'undefined') {
s += dataObject.name;
}
s += '</div><div class="addrDiv">';
if (dataObject.address !== 'undefined') {
s += dataObject.address;
}
s += '</div><div class="emailDiv">';
if (dataObject.email !== 'undefined') {
s += dataObject.email;
}
s += '</div></div>';
element.innerHTML += s;
}
/* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage(). */
var credString = window.localStorage.getItem("storageArr");
var credList = JSON.parse(credString);
function retrieve() {
for (var i = 0; i < credList.length; i++) {
var newCred = new Credential(credList[i].name, credList[i].address, credList[i].email);
storageArray.push(newCred);
writeRowToPage(newCred, 'output');
}
}
}
)();
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333;
}
.button {
border: 1px solid #888888;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 30px;
width: 82px;
line-height: 14px;
padding: .5em;
text-align: center;
background-color: #614C26;
}
.button:hover {
border: 2px solid #000;
}
label {
display: inline-block;
width: 5em;
}
.info div {
display: inline-block;
width: 10em;
}
.infoHead {
font-weight: bold;
border-bottom: 1px solid gray;
width: 30em;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/cscie3.css">
</head>
<body>
<label for="name">Name</label>
<input type="text" size="40" id="name">
<br>
<label for="address">Address</label>
<input type="text" size="40" id="address">
<br>
<label for="email">Email</label>
<input type="text" size="40" id="email">
<br>
<button id="doit" class="button">Save</button>
<h2>My Records</h2>
<div id="output">
<div class="info infoHead">
<div>Name</div>
<div>Address</div>
<div>Email</div>
</div>
</div>
<script tyle="text/javascript" src="js/hw2b_v3.js"></script>
</body>
</html>
那是因为每次加载页面时，您都会获得新数组并在 localStorage 中设置新值。所以试试这个
"use strict";
// First we do a self-invoking function that contains everything - there will be nothing
// exposed to the global scope.
(function(){
var storageArray = localStorage["storageArr"] ? JSON.parse(localStorage["storageArr"]) : [];
window.onload = retrieve();
function Credential (name, address, email) {
this.name = name;
this.address = address;
this.email = email;
}
var button = document.getElementById("doit");
button.onclick = function(){
/* This function will run when the user clicks on the
* Save button. */
//Step #1 - we get values from the form
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var email = document.getElementById("email").value;
// Step #2 - you will create a new data object
var data = {name, address, email};
// Step #3 - call on writeRowtoPage() to write your new data object to the page
writeRowToPage(data, output);
// Step#4 - Store your object in localStorage (preserving data
// that's already in there from prior submissions!)
storageArray.push(data);
window.localStorage.setItem("storageArr",JSON.stringify(storageArray));
}
/* This function accepts two arguments -
@dataObject: your data object representing a single
submission of the data form, which corresponds
to one row in the table
@element: the element on the page to which to write the output
The function assembles a string of HTML, using the data from
dataObject. Once the string is complete, it is appended to the
page using innerHTML.
*/
function writeRowToPage(dataObject, element) {
var s = "<div class=\"info\">";
s+='<div class="nameDiv">';
if (dataObject.name !== 'undefined') {
s+=dataObject.name;
}
s+= '</div><div class="addrDiv">';
if (dataObject.address !== 'undefined') {
s+=dataObject.address;
}
s+= '</div><div class="emailDiv">';
if (dataObject.email !== 'undefined') {
s+=dataObject.email;
}
s+= '</div></div>';
element.innerHTML += s;
}
/* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage(). */
function retrieve() {
var localMemory = window.localStorage.getItem("localArr");
var parsedLocalMemory = JSON.parse(localMemory);
if (parsedLocalMemory != null){
for (var i = 0; i < parsedLocalMemory.length; i++) {
var nextPerson = new AddrBookEntry (parsedLocalMemory[i].name, parsedLocalMemory[i].addr, parsedLocalMemory[i].email);
writeRowToPage(nextPerson, output);
}
}
}
}
)();