时间戳

首页 > 解决方案 > 如何在不取回先前创建的 Elemnts 的情况下将新创建的 Li 添加到 Localstorage

javascript - 如何在不取回先前创建的 Elemnts 的情况下将新创建的 Li 添加到 Localstorage

问题描述

我有一个 UL，它有一个默认的 Li，如果需要，还可以创建其他 Li 问题是，一旦我从本地存储加载 HTML，它会复制默认元素，而不是新元素+当前，我试图给新创建的元素一个特定的类，并使用通过类名获取元素以及查询选择器，这两种方法都返回了未定义的 HTML 集合或节点列表，任何解决此问题的方法我可以将新创建​​的元素隔离到本地存储。感谢您提前付出的努力和时间。

const dayslist = document.getElementById('list');
function create() {

    const createLi = `<li>new</li><li>new</li><li>new</li><li>new</li>`;
    dayslist.innerHTML += createLi;
    let html = dayslist.innerHTML;
    localStorage.setItem('content', html);
}



function onLoad() {
    if (localStorage.getItem('content')) {
        dayslist.innerHTML += localStorage.getItem('content');
    }
}

onLoad();
<!DOCTYPE html>
<html>

<body>

    <h1>The ul element</h1>

    <ul id=list>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <div onclick="create()">
            <span>create!!</span>
        </div>

    </ul>

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

</html>

标签： javascripthtml

解决方案

function create() {
    const dayslist = document.getElementById('list');

    const createLi = `<li>new</li>`;
    dayslist.innerHTML += createLi;

    // Appending the newly created LIs and storing into local storage
    const prevContent = localStorage.getItem('content');
    const newContent = prevContent ? prevContent + createLi : createLi;
    localStorage.setItem('content', newContent);
}

推荐阅读