存储在本地存储上的 li 元素不会在屏幕上显示

林达贝尔法

我正在开发一个项目，我需要向用户询问输入，当用户单击按钮时，输入将存储在本地存储中并显示在屏幕上，我希望每次用户进入页面时input 显示为 li 元素，但问题是 input 只在文档上显示一次，刷新页面时，li 元素消失，但键和值仍存储在本地存储中。

这是我的 JavaScript 的一部分。

const input = document.querySelector('#text-input');
const addBtn = document.querySelector('#add-plan-btn');
const ol = document.querySelector('ol');

addBtn.addEventListener('click', displayInput);

function displayInput(){
    // this function shows the input on an li element
    let li = document.createElement('li');
    window.localStorage.setItem('plan', input.value);
    li.textContent = localStorage.getItem('plan');
    ol.appendChild(li);
}

这是我的 html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div class="container">
            <h1>Plan Maker</h1>
            <div class="input-plan">
                <input type="text" id="text-input" placeholder="enter here...">
                <button type="submit" id="add-plan-btn">Add</button>
            </div>
            <ol>
            </ol>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

我需要帮助，请提前致谢。

阿里雷扎·艾哈迈迪

首先，您需要保存ol.innerText在本地存储中，在页面加载时，您可能需要检查本地存储是否有价值，li根据存储值创建一些并附加到ol标签

试试这个：

 const input = document.querySelector('#text-input');
 const addBtn = document.querySelector('#add-plan-btn');
 const ol = document.querySelector('ol');

 addBtn.addEventListener('click', displayInput);

 var data = localStorage.getItem('plan');
 if (data) {
     var lst = data.split("\n");
     lst.forEach(t => ol.innerHTML += "<li> " + t + "</li>");
 }

 function displayInput() {
     // this function shows the input on an li element
     let li = document.createElement('li');
     li.textContent = input.value;
     ol.appendChild(li);
     window.localStorage.setItem('plan', ol.innerText);
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。