如何使用 localstorage 在我的网页上使用 JavaScript 显示值？答案

【问题标题】：How can I use localstorage to display the values on my web page using JavaScript?如何使用 localstorage 在我的网页上使用 JavaScript 显示值？
【发布时间】：2021-09-09 03:41:29
【问题描述】：

我的任务是在我的 HTML 页面上制作一个带有输入字段和按钮的简单网页。使用 JavaScript，我需要将输入存储在 localstorage 中，我开始工作了。但是，当我按下按钮时，我希望存储的值显示在用 JavaScript 创建的新 div 元素中，并带有一个删除按钮，以从本地存储中删除该项目。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="inp-value">
    <button id="btn">Klicka här!</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript：

const btn = document.getElementById("btn");

btn.onclick = function(){
    const value = inpValue.value;

    localStorage.setItem("Name", value);
    
};

【问题讨论】：

标签： javascript html local-storage

【解决方案1】：

使用这些

Storage.getItem()

const storedName = localStorage.getItem("Name");

Storage.removeItem()

localStorage.removeItem("Name");

文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【讨论】：

谢谢，但这并不能帮助我在我的网页上的新 div 中显示 localstorage 的值：/
document.querySelector('#div_id_for_display').innerHTML = storedName; 可以工作
script.js:8 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at HTMLButtonElement.btn.onclick got this error message
你有显示的 div 吗？如果没有，请将<div id="div_id_for_display"></div> 添加到您的html
这个任务不允许我在 html 中创建一个 div，应该在单击按钮时在 JavaScript 中这样做

【解决方案2】：

这是您的解决方案。

Javascript 代码

 <script>
       
        btnClick = function () {
            var inputValue = document.getElementById("inp-value").value;
            var ul = document.getElementById("list");
            var li = document.createElement("li");
            var listItems = ul.getElementsByTagName('li');

            localStorage.setItem(`item-${listItems.length + 1}`, inputValue);

            var html = `<li  id="item-${listItems.length + 1}"><div><lable>${inputValue}</lable> <button onclick="removeClick(${listItems.length + 1})" >X</button></div> </li>`
            ul.innerHTML += html;

        };
        removeClick = function (item_id) {
          
            var ul = document.getElementById("list");
            localStorage.removeItem(`item-${item_id}`);
            ul.removeChild(ul.childNodes[item_id]);
        }
    </script>

HTML

<body>
    <input type="text" name="" id="inp-value">
    <button id="btn" onclick="btnClick()">Klicka här!</button>

    <ul id="list">

    </ul>
</body>

【讨论】：