Question

您好，我试图了解本地存储的工作方式。我正在尝试接受用户输入并将其添加到本地存储中。我不确定我传递的参数错误。这是我的代码：

const myForm = document.getElementById("todo");
const list = document.querySelector(".list-items");
myForm.addEventListener("submit", addTodo);

function addTodo(e) {
  e.preventDefault();
  const userInput = document.querySelector(".userAdd").value;
  const userListItem = document.createElement("li");
  userListItem.appendChild(document.createTextNode(userInput));
  list.appendChild(userListItem);
  localStorage.setItem('userListItem', userInput);
}

<form id="todo">
  <input class="userAdd" type="text">
  <input  type="submit">
</form>
<ul class="list-items"></ul>

Answer 1

要将list items保存在localStorage中，您需要将它们保存在array中。我相应地修改了您的代码。 https://codepen.io/dasseya1/pen/qMXQmK

const myForm = document.getElementById("todo");
const list = document.querySelector(".list-items");
myForm.addEventListener("submit", addTodo);

function addTodo(e) {
  e.preventDefault();
  const userInput = document.querySelector(".userAdd").value;
  const userListItem = document.createElement("li");
  userListItem.appendChild(document.createTextNode(userInput));
  list.appendChild(userListItem);
  const myArray = map(listItems, getText);
  localStorage.setItem('userListItem', JSON.stringify(myArray));
}

const listItems = document.getElementsByTagName('li');


function map(arrayLike, fn) {
    var ret = [], i = -1, len = arrayLike.length;
    while (++i < len) ret[i] = fn(arrayLike[i]);
    return ret;
}

function getText(node) {
    if (node.nodeType === 3) return node.data;
    var txt = '';
    if (node = node.firstChild) do {
        txt += getText(node);
    } while (node = node.nextSibling);
    return txt;
}

<form id="todo">
  <input class="userAdd" type="text">
  <input  type="submit">
</form>
<ul class="list-items"></ul>

Answer 2

这很好用。当我刷新页面时，它仍然存在。在您的Chrome console中进行测试... ...此外，如果刷新页面后此代码消失了，那么我建议检查您的浏览器 Privacy settings 希望对您有所帮助。

想象一下这是您的userInput数据：

let userInput = ['one', 'two', 'three'];

// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store - [ we would pass it like this, using -> JSON.stringify ]
    localStorage.setItem("userListItems", JSON.stringify(userInput)); 
} else {
    console.warn("Sorry, your browser does not support Web Storage...");
}

// Retrieve - and when we want to get the item we would use JSON.parse to give us back an array
console.log(JSON.parse(localStorage.getItem("userListItems")));

旁注：：如果您使用的是Chrome（我希望这样做），则可以按 CTRL + SHIFT + I 转到'Application'标签，然后在'Storage'下单击'Local Storage' ...，您将在此处找到您的数据并进行进一步检查。

更新：由于@Kaiido，我已将答案更新为更好的版本
localStorage 仅存储字符串。因此，在我之前的回答中，它会被强制转换为"one, two, three"，但现在您实际上又收到了array的回音。

将用户输入存储到localStorage

2 个答案: