如何在 localStorage 中保存从用户那里收到的多个值？

Question

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("task").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("list").appendChild(li);
  }

  document.getElementById("task").value = "";

  localStorage.setItem('data', inputValue);
}

当我输入新数据时，我希望 localStorage 保留我输入的所有数据，但它只存储最后一次输入。我该如何解决这个问题？

Answer 1

您需要将其作为数组或对象构建到文本字符串中，然后从那里对其进行格式化。否则你只是将最新的值推入本地存储，从而删除以前的值。那样做有点烦人，但它有效=)

Answer 2

你的起点是对的，夺取了 inputValue:

let inputValue = document.getElementById('task').value;

您将把这个值添加到一个数组中，该数组包含以前相似值的列表。

但在您执行此操作之前，最好查看您的 localStorage 条目 data 是否已经包含任何内容。

如果是，那将是您 array 的来源。

如果没有，您可以创建一个空的 array，而不是：

let inputValues;      // This will be an array
let inputValuesJSON;  // This will be a JSON serialisation of the array

if (localStorage.getItem('data') !== null) {

  inputValuesJSON = localStorage.getItem('data');
  inputValues = JSON.parse(inputValuesJSON);
}

else {
  
  inputValues = [];
}

现在您有一个 array，您可以向其中添加新的 inputValue:

inputValues.push(inputValue);

并将inputValues数组转为JSON字符串：

inputValuesJSON = JSON.stringify(inputValues);

最后，将更新后的 JSON 字符串存储在 localStorage:

localStorage.setItem('data', inputValuesJSON);

为什么我们需要使用 JSON 序列化？为什么我们不能只将 array 存储在 localStorage 中？

仅仅因为 localStorage 将仅存储 strings.

它不能存储像arrays和objects这样的数据结构。

Answer 3

这应该保存在一个数组中，加载时应该从 localStorage 中获取和显示。问题是您改写了该值或 appending/modify 现有值。

我已经为fix/explain案例准备了样本。

JSFiddle example

HTML

<input type="text" id="task">
<button onclick="addElement()">
Add
</button>
<ul id="list"></ul>

Javascript

window.addEventListener('load', function () {
  try {
    var storageData = localStorage.getItem('data');
    
    if (storageData) {
        var parsedData = JSON.parse(storageData);
      if (parsedData.items && parsedData.items.length) {
        var list = document.getElementById("list");
                for(var i = 0; i < parsedData.items.length; i++) {
          var li = document.createElement("li");
          var t = document.createTextNode(parsedData.items[i].value);
          li.appendChild(t);
          list.appendChild(li);
        }
      } else {
        
      }
    }
  } catch (e) {
        console.err("Error while reading items from local storage: ", e);
  }
});

// Create a new list item when clicking on the "Add" button
function addElement() {
  var inputValue = document.getElementById("task").value;
  if (inputValue === '') {
    alert("You must write something!");
    return;
  }

  

  try {
    var storageData = localStorage.getItem('data');
    var dataToWriteToStorage = {};
    if (storageData) {
        var parsedData = JSON.parse(storageData);
      if (parsedData.items && parsedData.items.length) {
                parsedData.items.push({id: new Date().getTime().toString(16), value: inputValue});
        dataToWriteToStorage = parsedData;
      } else {
        dataToWriteToStorage = {
            items: [{id: new Date().toString(16), value: inputValue}]
        };
      }
    }
    localStorage.setItem('data', JSON.stringify(dataToWriteToStorage));
    // Only add item to list once it's saved to localStorage
    var li = document.createElement("li");
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    document.getElementById("list").appendChild(li);
    // Reset the input
    document.getElementById("task").value = "";
  } catch (e) {
    console.err("Error while saving item to local storage: ", e);
    alert("There was an error and the item could not be saved");
  }
}

Answer 4

谢谢大家。实际上，这样做是有效的：

  let arr;

  if(localStorage.getItem('dataX')) {
    arr = JSON.parse(localStorage.getItem('dataX'));
  }
  else {
    arr = [];
  }
  
  arr.push(inputValue);
  localStorage.setItem('dataX', JSON.stringify(arr));

如何在 localStorage 中保存从用户那里收到的多个值？

How to keep multiple values received from user in localStorage?

javascript

local-storage

如何在 localStorage 中保存从用户那里收到的多个值？

How to keep multiple values ​received from user in localStorage?

javascript

local-storage

How to keep multiple values received from user in localStorage?