将 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 开发人员工具)查看打印输出。

希望对您有所帮助。

在添加项目时更新 listItemArraylocalStorage

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);
}

删除项目后更新 listItemArraylocalStorage

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