Question

现在我将5个值存储到数组中，并将数组存储到localStorage中。

我有一个需要3个争论的功能。数组，密钥名称和回调函数，用于解析本地存储中的数组。

我还有自己的回调函数，它只解析本地存储中的数组。

然后我有一个函数应该使用forEach函数将每个数组项呈现给页面，但是我不确定将什么放入实际的forEach函数本身。我试过传递密钥这样的东西，我已经坚持了几天，虽然我已经学习了一路，但我仍然想要将存储的数据打印到实际的页面。

这是一个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');
  }
}

Answer 1

添加项目时

更新listItemArray和localStorage。

function addTask() {
    var input = document.getElementById('userTask');
    if (validate(input)) {
        listItemArray.push(input.value);
        storeListItems(listItemArray, 'todos');
        renderHtml(input.value);
    }
}

获取todos onload并渲染它们

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

Answer 2

我修改了你的代码，以便它将当前存储在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开发者工具）查看打印输出。

希望这有帮助。

将localStorage值打印到HTML页面

2 个答案: