将 localStorage 值打印到 HTML 页面
Printing localStorage values to the HTML page
现在我将 5 个值存储到一个数组中,并将该数组存储到 localStorage 中。
我有一个需要 3 个参数的函数。数组、键名和解析本地存储中数组的回调函数。
我还有回调函数本身,它只解析本地存储中的数组。
然后我有一个函数应该使用 forEach 函数将每个数组项呈现到页面,但是我不确定将什么放入实际的 forEach 函数本身。试过传key之类的东西,卡了好几天了,虽然一路学习了,但是还是卡在想把存储的数据打印到实际页面上。
这是一个 JSBin:http://jsbin.com/monanoruno/edit?html,css,js,output
我的代码在这里:
window.onload = function() {
//global variables (global scope)
var warning = document.getElementById('warning');
var clear = document.getElementById('clear')
//array used for localstorage
var listItemArray = [];
var key = 'todos';
//this is where the party starts
fetch('todos', render);
clear.addEventListener('click', clearInput, false);
};
// create a function that adds task on user click button
function addTask() {
//variables within addTask scope
var addLi = document.createElement('LI');
var deleteTask = document.createElement('input');
var input = document.getElementById('userTask');
var inputValue = document.createTextNode(input.value);
var myUL = document.getElementById('myUL');
validate(input) //returns input or false
//define attributes of delete task button
deleteTask.setAttribute('type', 'submit');
deleteTask.setAttribute('value', 'X');
deleteTask.setAttribute('id', 'delete');
//event listener that toggles a 'crossout' effect for completed tasks
addLi.addEventListener('click', taskToggle, false);
//add the input value and delte task elements to the list item
addLi.appendChild(inputValue);
addLi.appendChild(deleteTask);
//add list element to ul element
myUL.appendChild(addLi);
//add the list item to an array
listItemArray.push(input.value);
//event that deletes single tasks
deleteTask.addEventListener('click', function(){
myUL.removeChild(addLi);
});
}
function validate(input) {
return input.value.length ? input : false
}
function storeListItems(listItemArray, key, fetch) {
var notes = JSON.stringify(listItemArray);
fetch(localStorage.setItem(key, notes));
}
function fetch(key, callback) {
callback(JSON.parse(localStorage.getItem(key)));
}
function render(data) {
data.forEach(function (current, index, array) {
});
}
//define clear button
function clearInput() {
var input = document.getElementById('userTask');
input.value = '';
}
//function removes all list elements created
function removeAll(myUL) {
//try while(myUL.firstChild) myUL.firstChild.remove()
myUL.innerHTML = '';
}
//define crossout function
function taskToggle(e) {
//li elements are targetted by the event object
var li = e.target;
//if li contains class remove, else add
if (li.classList.contains('crossOut')) {
li.classList.remove('crossOut');
} else {
li.classList.add('crossOut');
}
}
我已经修改了您的代码,以便它将 listItemArray
中当前的任何内容保存到本地存储,然后在页面加载后再次打印该持久存储数组中的每个项目。
事实证明您实际上并没有将数组保存到本地存储,因此每次调用 render()
函数时您都得到 null。
您会注意到我现在添加了这一行:storeListItems(listItemArray, 'todos');
现在通过 todos
键将数组(首先转换为字符串)正确存储到本地存储中。
您在 data.forEach
循环中对匿名函数的定义指定了太多参数。您会注意到它现在只指定一个参数,表示作为循环迭代的一部分访问的当前项:
function render(data) {
data.forEach(function(currentItem) {
console.log(currentItem);
});
}
您将在 http://codepen.io/anon/pen/xZEpqo?editors=001 找到一个工作示例,您可以在其中使用浏览器内控制台(例如 Chrome 开发人员工具)查看打印输出。
希望对您有所帮助。
在添加项目时更新 listItemArray
和 localStorage
。
function addTask() {
var input = document.getElementById('userTask');
if (validate(input)) {
listItemArray.push(input.value);
storeListItems(listItemArray, 'todos');
renderHtml(input.value);
}
}
获取 todos
加载并渲染它们
function fetch(key, callback) {
listItemArray = JSON.parse(localStorage.getItem(key));
callback(listItemArray);
}
删除项目后更新 listItemArray
和 localStorage
deleteTask.addEventListener('click', function() {
var index = listItemArray.indexOf(val);
listItemArray.splice(index, 1);
storeListItems(listItemArray, 'todos');
myUL.removeChild(addLi);
});
清空 remove all
上的列表
function removeAll(myUL) {
myUL.innerHTML = '';
listItemArray = [];
storeListItems(listItemArray, 'todos');
}
检查这个JS Bin
现在我将 5 个值存储到一个数组中,并将该数组存储到 localStorage 中。
我有一个需要 3 个参数的函数。数组、键名和解析本地存储中数组的回调函数。
我还有回调函数本身,它只解析本地存储中的数组。
然后我有一个函数应该使用 forEach 函数将每个数组项呈现到页面,但是我不确定将什么放入实际的 forEach 函数本身。试过传key之类的东西,卡了好几天了,虽然一路学习了,但是还是卡在想把存储的数据打印到实际页面上。
这是一个 JSBin:http://jsbin.com/monanoruno/edit?html,css,js,output
我的代码在这里:
window.onload = function() {
//global variables (global scope)
var warning = document.getElementById('warning');
var clear = document.getElementById('clear')
//array used for localstorage
var listItemArray = [];
var key = 'todos';
//this is where the party starts
fetch('todos', render);
clear.addEventListener('click', clearInput, false);
};
// create a function that adds task on user click button
function addTask() {
//variables within addTask scope
var addLi = document.createElement('LI');
var deleteTask = document.createElement('input');
var input = document.getElementById('userTask');
var inputValue = document.createTextNode(input.value);
var myUL = document.getElementById('myUL');
validate(input) //returns input or false
//define attributes of delete task button
deleteTask.setAttribute('type', 'submit');
deleteTask.setAttribute('value', 'X');
deleteTask.setAttribute('id', 'delete');
//event listener that toggles a 'crossout' effect for completed tasks
addLi.addEventListener('click', taskToggle, false);
//add the input value and delte task elements to the list item
addLi.appendChild(inputValue);
addLi.appendChild(deleteTask);
//add list element to ul element
myUL.appendChild(addLi);
//add the list item to an array
listItemArray.push(input.value);
//event that deletes single tasks
deleteTask.addEventListener('click', function(){
myUL.removeChild(addLi);
});
}
function validate(input) {
return input.value.length ? input : false
}
function storeListItems(listItemArray, key, fetch) {
var notes = JSON.stringify(listItemArray);
fetch(localStorage.setItem(key, notes));
}
function fetch(key, callback) {
callback(JSON.parse(localStorage.getItem(key)));
}
function render(data) {
data.forEach(function (current, index, array) {
});
}
//define clear button
function clearInput() {
var input = document.getElementById('userTask');
input.value = '';
}
//function removes all list elements created
function removeAll(myUL) {
//try while(myUL.firstChild) myUL.firstChild.remove()
myUL.innerHTML = '';
}
//define crossout function
function taskToggle(e) {
//li elements are targetted by the event object
var li = e.target;
//if li contains class remove, else add
if (li.classList.contains('crossOut')) {
li.classList.remove('crossOut');
} else {
li.classList.add('crossOut');
}
}
我已经修改了您的代码,以便它将 listItemArray
中当前的任何内容保存到本地存储,然后在页面加载后再次打印该持久存储数组中的每个项目。
事实证明您实际上并没有将数组保存到本地存储,因此每次调用 render()
函数时您都得到 null。
您会注意到我现在添加了这一行:storeListItems(listItemArray, 'todos');
现在通过 todos
键将数组(首先转换为字符串)正确存储到本地存储中。
您在 data.forEach
循环中对匿名函数的定义指定了太多参数。您会注意到它现在只指定一个参数,表示作为循环迭代的一部分访问的当前项:
function render(data) {
data.forEach(function(currentItem) {
console.log(currentItem);
});
}
您将在 http://codepen.io/anon/pen/xZEpqo?editors=001 找到一个工作示例,您可以在其中使用浏览器内控制台(例如 Chrome 开发人员工具)查看打印输出。
希望对您有所帮助。
在添加项目时更新 listItemArray
和 localStorage
。
function addTask() {
var input = document.getElementById('userTask');
if (validate(input)) {
listItemArray.push(input.value);
storeListItems(listItemArray, 'todos');
renderHtml(input.value);
}
}
获取 todos
加载并渲染它们
function fetch(key, callback) {
listItemArray = JSON.parse(localStorage.getItem(key));
callback(listItemArray);
}
删除项目后更新 listItemArray
和 localStorage
deleteTask.addEventListener('click', function() {
var index = listItemArray.indexOf(val);
listItemArray.splice(index, 1);
storeListItems(listItemArray, 'todos');
myUL.removeChild(addLi);
});
清空 remove all
function removeAll(myUL) {
myUL.innerHTML = '';
listItemArray = [];
storeListItems(listItemArray, 'todos');
}
检查这个JS Bin