小贝子编程

如何将表单值作为数据存储和检索到本地存储中，然后在UI中显示它们



我想将用户的输入值，即姓名、年龄和性别存储到本地存储中，然后显示到UI中。

现在发生的情况是，在UI上显示新注册的学生并在本地存储数据(两者都有效)，但随后重新加载页面后，学生数据从UI中消失。我不想发生这种事；我该怎么做？

这是我迄今为止想出的一些代码。。。

<main>
<div class="container">
<h1>student's info</h1>
<form class="input-form">
<input type="text"class="full-name" name="name" placeholder="Enter Full Name">
<input type="number"class="age" name="name" placeholder="Age">
<input type="text" class = "gender"name="name" placeholder="gender">
<button class="submit-btn" type="submit">submit</button>
</form>
</div>
<div class="con"> 
<div class="student">
</div>
</div>
</main>

// GLOBAL VARIABLES
var submitBtn, student, fullName, age, gender;
submitBtn = document.querySelector('.submit-btn');
student = document.querySelector('.student');
fullName = document.querySelector('.full-name');
age = document.querySelector('.age');
gender = document.querySelector('.gender');
var arr = [];
// EVENTLISTENERS
submitBtn.addEventListener('click', addStudent);
// FUNCTIONS
function addStudent(e) {
e.preventDefault();
let div = document.createElement('div');
div.classList.add('student-box');
let nameSpan = document.createElement('span');
nameSpan.classList.add('student-name');
nameSpan.innerText = fullName.value;
let ageSpan = document.createElement('span');
ageSpan.classList.add('student-age');
ageSpan.innerText = age.value;
let genderSpan = document.createElement('span');
genderSpan.classList.add('student-gender');
genderSpan.innerText = gender.value;
saveToLocal();
div.append(nameSpan, ageSpan, genderSpan);
student.appendChild(div);
fullName.value = '';
age.value = '';
gender.value = '';
}
function saveToLocal() {
getData();
arr.push({
name: fullName.value,
ages: age.value,
genders: gender.value,
});
localStorage.setItem('student', JSON.stringify(arr));
}
function getData() {
if (localStorage.getItem('student') !== null) {
JSON.parse(localStorage.getItem('student'));
//localStorage.setItem('student', JSON.stringify(arr));
//var dis = JSON.Parse(localStorage.getItem('student'));
//student.appendChild();
//arr = JSON.parse();
//console.log(arr);
}/* else {
}*/
}

您需要从本地存储中获取学生对象，然后使用这些值来设置您的输入值，如下所示：

if(localStorage.getItem('student') !== null) {
try {
const studentData = JSON.parse(localStorage.getItem('student'))[0];
fullName = studentData.name;
age = studentData.age;
gender = studentData.gender;
document.getElementsByClassName("full-name")[0].value = fullName;
document.getElementsByClassName("age")[0].value = age;
document.getElementsByClassName("gender")[0].value = gender;
} catch() {}
}

从OP的代码中可以清楚地看出，OP想要。。。

  • 从localStorage检索整个学生相关数据，作为学生特定数据项的数组。

  • 通过每个表单提交，添加单个新学生。

  • 对于每份表格，请提交。。。

    • 。。。创建一个新的数据项，然后。。。

      • 。。。必须添加(推送)到最初检索到的已注册学生列表中
      • 。。。其中该更新/突变的阵列则必须全部再次被保存/放入CCD_ 2中

    • 。。。创建一个新的DOM片段(视图项)，该片段包含所有新注册的学生的数据，然后。。。

      • 。。。必须附加到所有尚未注册的学生的最初呈现的DOM表示

因此，OP需要为上述每个任务实现至少一个专门且命名正确的函数(还会有额外的辅助函数)。

让我们从存储开始；人们希望同时从本地存储器获取和将整个注册的学生数据放入本地存储器。因此，要实现两个功能getRegisteredStudentData和putRegisteredStudentData。后者很容易直接存储学生相关数据项数组的JSON字符串版本，而前者已经增加了复杂性，因为必须确保检索到的数据的有效性。就注册学生而言，这意味着一个唯一数据项的数组。

为了确保唯一性，必须首先创建一个Map实例，在该实例中，通过项的键添加每个数据项，其中键是根据项的数据值创建的，这里是(全)name、gender和age的级联值。然后返回表示所有创建的映射的唯一values的数组。

以上两段是对两个助手任务sanitizeRegisteredStudentData和createMapOfUniqueStudentItems的描述。另一个助手是parseJSON，它实现了不抛出异常的JSON.parse功能。

另一项任务是呈现所有存储和检索的学生数据。名为renderRegisteredStudentData的函数需要两个参数，一个是创建的学生概览应附加到的DOM/元素节点(dataParent)，另一个是学生项目数组(studentList)。

存在元素节点创建的重复任务，这些任务可以被实现为功能本身，例如根据数据项的name、gender和age属性创建单个注册学生的视图。因此，CCD_ 20是一个可重复使用的渲染辅助对象。

剩下的是…的初始化。。。

  1. 。。。何时何地呈现最初检索到的存储的学生数据。

  2. 。。。CCD_ 21类型的事件注册以及每当新学生的数据项将被创建、推送/存储和呈现/附加时的处理。

对于(1)，在初始化任务中，将查询元素节点，需要将渲染的学生数据附加到其中。还需要检索通过调用localStorage2实现的学生列表。由于所有渲染任务都已经实现，只需要调用renderRegisteredStudentData，将节点和数据项数组传递给它

对于(2)，在初始化任务中，还将查询表单元素节点，以便添加事件侦听器。每当一个新学生通过'submit'表格注册时，都需要一个处理程序函数来处理以下内容。。。

  • 阻止实际的表单默认操作。

  • 从表单的当前CCD_ 25 CCD_。

  • 从处理程序函数的this-context访问所有必要的、绑定的、注册表特定的上下文数据。。。就是。。。

    const { dataRoot, studentList, studentMap } = this;

    • dataRoot是必需的，以便对DOM结构进行引用，在DOM结构中应附加新呈现的学生视图项。

    • studentList是要将新创建的数据项推送到/添加到的数据项数组的引用。

    • studentMap是为了不允许创建注册的学生副本而需要查找的映射的唯一数据项的引用。

  • 确保新创建的数据项的唯一性，然后。。。

    • 更新学生列表/数组(push)和学生查找映射(set)

    • 具有刚刚更新/变异的学生列表的本地存储更新。

    • 呈现/附加新注册学生的数据。

注意。。。由于SO阻止使用CCD_ 33，下面提供的示例代码附带了一个模拟的区域设置存储功能实现，这意味着注册的学生数据无法在页面重新加载后幸存下来

function parseJSON(value) {
let result;
try { result = JSON.parse(String(value)); } catch (err) {}
return result;
}
function createMapOfUniqueStudentItems(studentList) {
return new Map(
studentList
.map(({ name, gender, age }) => [
// create any student's unique key for a map ...
[name.toLowerCase(), gender.toLowerCase(), age].join('_'),
// ... of unique student items.
{ name, gender, age }
])
);
}
function sanitizeRegisteredStudentData(studentList) {
return Array.isArray(studentList)
&& [
// get rid of possible duplicate data items.
...createMapOfUniqueStudentItems(studentList).values()
] || [];
}
function getRegisteredStudentData() {
return sanitizeRegisteredStudentData(
parseJSON(
localStorage
.getItem('registered-students')
)
);
}
function putRegisteredStudentData(value) {
return localStorage
.setItem('registered-students', JSON.stringify(value));
}
function createRegisteredStudentViewItem({ name, gender, age }) {
return [name, gender, age]
.reduce((itemRoot, value) => {

const valueNode = document.createElement('td');
valueNode.appendChild(
document.createTextNode(value)
);
itemRoot.appendChild(valueNode);
return itemRoot;
}, document.createElement('tr'));
}
function renderRegisteredStudentData(dataParent, studentList) {
console.log({ get: studentList });
const dataRoot = (new DOMParser)
.parseFromString(
'<table><thead></thead><tbody></tbody></table>',
"text/html",
)
.querySelector('table')
.cloneNode(true);
dataRoot
.querySelector('thead')
.appendChild(createRegisteredStudentViewItem({
name: 'Full Name', gender: 'Gender', age: 'Age',
}));
studentList
.reduce((itemParent, studentData) => {
itemParent.appendChild(
createRegisteredStudentViewItem(studentData)
);
return itemParent;
}, dataRoot.querySelector('tbody'));
dataParent.appendChild(dataRoot);
}
function registerNewStudentFromBoundContext(evt) {
evt.preventDefault();
const { dataRoot, studentList, studentMap } = this;
const formData = new FormData(evt.currentTarget);
const itemData = [
...formData.entries()
]
.reduce((result, [key, value]) =>
Object.assign(result, { [ key ]: value }), {}
);
const { name, gender, age } = itemData;
// create a student items unique key for a map lookup.
const uniqueStudentKey = [
name.toLowerCase(), gender.toLowerCase(), age
].join('_');
// prevent duplicates.
if (!studentMap.has(uniqueStudentKey)) {
// add non duplicate item data to list or registered students ...
studentList.push(itemData);
// ... update the lookup map accordingly ...
studentMap.set(uniqueStudentKey, itemData);
// ... and update the local storage.
putRegisteredStudentData(studentList);
console.log({ put: studentList });
// render the newly registered student's data.
dataRoot
.querySelector('tbody') 
.appendChild(
createRegisteredStudentViewItem(itemData)
);
}
}
function initStudentRegistry(rootNode) {
const formNode = rootNode.querySelector('form');
const overviewNode = rootNode.querySelector('.registry-overview');
const studentList = getRegisteredStudentData();
const studentMap = createMapOfUniqueStudentItems(studentList);
renderRegisteredStudentData(overviewNode, studentList);
formNode
.addEventListener(
'submit', registerNewStudentFromBoundContext.bind({
dataRoot: overviewNode, studentList, studentMap,
}),
);
// additional helpers for local storage 
// related demonstration purposes only.
formNode
.querySelector('[data-clear-table]')
.addEventListener('click', evt => {
evt.preventDefault();
[...overviewNode.querySelector('tbody').childNodes]
.forEach(child => child.remove());
});
formNode
.querySelector('[data-rerender-table]')
.addEventListener('click', evt => {
evt.preventDefault();
[...overviewNode.childNodes]
.forEach(child => child.remove());
renderRegisteredStudentData(
overviewNode, getRegisteredStudentData(),
);
});
}
function main() {
initStudentRegistry(
document
.querySelector('.student-registry')
);
}
main();
body { margin: 0; }
form, h1 { position: fixed; right: 45%; }
h1 { margin: 0; font-size: 1.2em;  width: 7.9em; } 
form { top: 1.5em;  width: 9.5em; }
table { width: 30%; margin: 0; }
fieldset { margin: 0; padding: 0; border: none; }
button { margin: 4px 0; }
fieldset button { display: block; }
.as-console-wrapper { left: auto!important; min-height: 100%; width: 45%; }
<script>
// mock for the SO specific stack snippet
// due to the policies and environment are
// not allowing an original storage access.
const localStorage = (function () {
// https://developer.mozilla.org/en-US/docs/Web/API/Storage
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
const storage = new Map;
function key(int) {
return [
...storage.keys()
][parseInt(int, 10)];
}
function setItem(key, value) {
return storage.set(String(key), String(value));
}
function getItem(key) {
return storage.get(String(key));
}
function removeItem(key) {
return storage.delete(String(key));
}
function clear() {
return storage.clear();
}
return {
get length() {
return storage.size;
},
key,
getItem,
setItem,
removeItem,
clear,      
};
}());
</script>
<main>
<div class="student-registry">
<h1>student's info</h1>
<form method="post" action="">
<input type="text" name="name" placeholder="Enter Full Name"/>
<input type="number" name="age" placeholder="Age" value="6" min="6" max="120"/>
<input type="text" name="gender" placeholder="Gender"/>
<button type="submit">
register student
</button>
<fieldset>
<button data-clear-table>
clear table
</button>
<button data-rerender-table>
rerender table<br/>from (mocked)<br/>local storage
</button>
</fieldset>
</form>
<div class="con"> 
<div class="registry-overview">
</div>
</div>
</div>
</main>

因为您的数据正在存储到本地存储，所以请尝试如下，

document.getElementById("buttotton").onclick = function() {  
fun()  
};  
function fun()
{
var arr = [];
arr.push({
name:document.getElementsByClassName("full-name")[0].value,
ages:"25",
genders:"male"

});
localStorage.setItem('student', JSON.stringify(arr));
}
if(localStorage.getItem('student') !== null) {
let text = localStorage.getItem("student");
const obj = JSON.parse(text);
// const studentData = JSON.parse(localStorage.getItem('student'));
fullName = obj[0].name;


document.getElementsByClassName("full-name")[0].value = fullName;


}
<input type="text"class="full-name" name="name" placeholder="Enter Full Name">
<input type="button" id="buttotton" value="save">

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium