Question

我已经开始了一个待办事项清单。我在提交项目时添加了一个项目。

我想在刷新页面时添加本地存储，以便将项目保存在浏览器中。

我显然需要在刷新页面时保存所有时间，但因为我的项目仅在点击时更新我不知道如何在功能外部获取功能数据并保存项目。

有什么想法吗？

干杯

// When submit item
var submit = document.getElementById('form');
submit.addEventListener('submit', addItem);

var items = [];

var itemValues = document.getElementById('items');
var listContainer = document.createElement('ul');
itemValues.appendChild(listContainer);

// Add item
function addItem(e) {
    e.preventDefault();
    var item = this.querySelector('[name=item]');
    var itemValue = item.value;
    items.push(itemValue);
    item.value = '';

    // Output items
    var listItems = document.createElement('li');
    listItems.innerHTML = itemValue;
    listContainer.appendChild(listItems);
}

Answer 1

每当添加项目时，您都可以将整个数组写入本地存储：

localStorage.setItem('items', JSON.stringify(items));

然后在页面加载时，您将从本地存储中读取数组并将其分配回您的变量，或将其设置为[]（如现在），如果本地存储中没有任何内容，则显示以下项目：

var items = JSON.parse(localStorage.getItem('items')) || [];
items.forEach(function (itemValue) {
  var listItems = document.createElement('li');
  listItems.textContent = itemValue;
  listContainer.appendChild(listItems);
});

此更新的JSFiddle包含该代码。

当然，您还需要一些功能来删除项目，否则您只能扩展您的列表。

Answer 2

这是一个完整的解决方案。请注意，由于cors和sandbox，代码段在此处不起作用。只需将其粘贴到代码编辑器中即可。

var submit = document.getElementById('form');
submit.addEventListener('submit', addItem);

var items = [];

var itemValues = document.getElementById('items');
var listContainer = document.createElement('ul');
itemValues.appendChild(listContainer);


//retrieve data after reload
window.onload = function() {
  if (localStorage.userData != undefined) {
    var userData = JSON.parse(localStorage.getItem('userData'));
    for (var i = 0; i < userData.length; i++) {
      var listItems = document.createElement('li');
      listItems.innerHTML = userData[i];
      listContainer.appendChild(listItems);
      items = userData;
    }
  }
}


// Add item
function addItem(e) {
  e.preventDefault();
  var item = this.querySelector('[name=item]');
  var itemValue = item.value;
  items.push(itemValue);
  item.value = '';

  // Output items
  var listItems = document.createElement('li');
  listItems.innerHTML = itemValue;
  listContainer.appendChild(listItems);
  localStorage.setItem('userData', JSON.stringify(items));

}

<main>
  <form id="form">
    <input class="form-input" type="text" name="item" placeholder="Add item">
    <input class="btn btn-block" type="submit" value="Submit">
  </form>
  <div id="items"></div>
  <div id="completed"></div>
</main>

Answer 3

这里有一些有用的本地存储小例子

function save() {
  var fieldvalue = document.getElementById('save').value;
  localStorage.setItem('text', fieldvalue);
}

function load() {
  var storedvalue = localStorage.getItem('textfield');
  if (storedvalue) {
    document.getElementById('textfield').value = storedvalue;
  }
}

function remove() {
  document.getElementById('textfield').value = '';
  localStorage.removeItem('textarea');
}

<body onload="load()">
  <input type="textarea" id="textfield">
  <input type="button" value="Save" id="save" onclick="save()">
  <input type="button" value="remove" id="remove" onclick="clr()">
</body>
<!--save& run this in local to see local storage-->

存储本地存储的最佳方式？

3 个答案: