时间戳

首页 > 解决方案 > 如何在本地存储中获取多个项目

javascript - 如何在本地存储中获取多个项目

问题描述

我正在使用本地存储来设置待办事项。

但是我对 JavaScript 有点陌生，所以我对这件事感到很困惑。我知道如何设置本地存储项目。无论如何，我知道我需要使用列表来执行此操作，但我也很困惑这样做。

请告诉我如何在代码中执行此操作（添加本地存储项以列出和创建

带有列表值的 innerHTML 的标签）。这是我当前的代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id='shopping-list' class="shopping-list">
      <h1>Todo List</h1>
      <input placeholder="Add todo and press enter to submit" id="todo" />
      <li>Learn JavaScript</li>
      <li>Study Neural Networks</li>
      <li>Learn Python</li>
    </div>
  </body>
  <script src="main.js"></script>
  <script>
    todo = document.getElementById("todo")
    todo.addEventListener('keyup', function (e) {
      if (e.key === 'Enter' || e.keyCode === 13) {
        let todo = document.getElementById("todo");
        if (!todo.value) {
          todo.style.borderColor = 'red';
          todo.style.boxShadow = '0px 0px 5px red';
        } else {
            var li = document.createElement('li');
            localStorage.setItem('todo_val', todo.value)
            var todo_value = localStorage.getItem('todo_val')
            var node = document.createTextNode(todo_value);
            li.appendChild(node);
            var place = document.getElementById('shopping-list');
            place.appendChild(li);
            todo.style.borderColor = 'black';
            todo.style.boxShadow = '0px 0px 5px white';
        }
      }
    });
    let todo_val = localStorage.getItem('todo_val')
    console.log(todo_val)
    var li = document.createElement('li');
    var node = document.createTextNode(todo_value);
    li.appendChild(node);
    var place = document.getElementById('shopping-list');
    place.appendChild(li);
  </script>
</html>

谢谢你。

标签： javascripthtml

解决方案

LocalStorage 允许您存储字符串。要存储数组，您可以对其进行序列化（将其转换为字符串）。一种常见的序列化方式是反序列JSON.stringify()化。JSON.parse()

const array = [ "a", "b" ];
const serializedArray = JSON.stringify(array); // '["a","b"]'
const arrayAgain = JSON.parse(serializedArray ); // [ "a", "b" ]

请记住，理论上用户可以修改本地存储中的内容，因此要对“坏数据”保持稳健。也许数据已损坏（重置为默认状态？）或者用户添加了一些东西，因此例如不要将权限存储在本地存储中。一种常见的描述方式是说您应该将本地存储中的所有内容视为“用户输入”。

推荐阅读