Question

我目前正在编写一个简单的vanilla JavaScript待办事项应用程序。一切都很好看，但是在新的localStorage中保存数据时，我无法实现，我从未使用过localStorage，我读了很多文章，当我尝试简单的东西时，它可以工作，但我不能使我的应用程序正常工作。我想将输入的数据保存在REFRESH上，它不会消失，现在的方式......这里是应用程序的链接

****我想用VANILLA JAVASCRIPT做这件事，而不是JQUERY ****

My to-do app here!

所以基本上，如果用户做了几次待办事项，并且在刷新时，我想要保留所有内容，就像在图片中一样。

HTML：

<body>
    <div class="holder">
        <div>
            <input type="text" />
        </div>

        <button id="add">Add</button>

        <div class="results"></div>
    </div>

</body>

JS：

document.addEventListener('DOMContentLoaded',function(){

        let holder = document.querySelector('.holder'),
            addBtn = document.querySelector('#add'),
            removeBtn = document.querySelector('#remove'),
            resultBox = document.querySelector('.results');

        let input = document.getElementsByTagName('input')[0];


        function setAttributes(element,attrs){
            for(let i in attrs){
                element.setAttribute(i,attrs[i]);
            }
        }

        setAttributes(input,{
            'placeholder' : 'Enter To-Do',
            'name' : 'todo'
        });

        function addtoBtn(){

            addBtn.addEventListener('click',function(event){

            if(input.value !== ''){
                let openingDiv = '<div class="todo"><span>';
                let closingDiv = '</span><button class="edit">Edit</button><button class="save">Save</button><button class="removeBtn">Remove</button></div>';

                resultBox.innerHTML += openingDiv + input.value + closingDiv;
                input.value = '';
                event.preventDefault(); 


            } else{
                alert('Enter To-do!');
            }

            let innerBtn = document.querySelectorAll('.removeBtn');
            let editBtn = document.querySelectorAll('.edit');
            let saveBtn = document.querySelectorAll('.save');

            for(let collection = 0 ; collection < saveBtn.length ; collection++){
                saveBtn[collection].style.display = "none";
            }

            function removeToDo(){

                this.parentNode.style.display = 'none';
            }

            for(let k = 0 ; k < innerBtn.length ; k++){
                innerBtn[k].addEventListener('click',removeToDo);
            }

            function startContentEdit(){
                this.previousSibling.contentEditable = true;
                this.previousSibling.style.padding = "10px";
                this.previousSibling.style.boxShadow = "0 0 15px #fff";
                this.previousSibling.style.borderRadius = "10px";
                this.previousSibling.style.transition = "all .4s";

                this.style.display = "none";

                for(let el = 0 ; el < saveBtn.length ; el++){
                    this.nextSibling.style.display = 'inline-block';
                }
            }

            for(let j = 0 ; j < editBtn.length ; j++){
                editBtn[j].addEventListener('click',startContentEdit);
            }

            function saveContentEdit(){
                this.style.display = 'none';

                for(let j = 0 ; j < editBtn.length ; j++){

                    this.previousSibling.style.display = "inline-block";

                    this.parentNode.firstElementChild.style.display = "block";
                    this.parentNode.firstElementChild.contentEditable = false;
                    this.parentNode.firstElementChild.style.padding = "0px";
                    this.parentNode.firstElementChild.style.boxShadow = "0 0 0";
                }
            }

            for(let x = 0 ; x < saveBtn.length ; x++){
                saveBtn[x].addEventListener('click',saveContentEdit);
            }

            }); 
        }

        addtoBtn();
});

正如我所说，我看到很多文章，但我找不到任何答案。抱歉，这是我的第一个javascript应用程序，几乎所有工作都在其中：D和我有点兴奋，所以我想让它完全正常工作。

恢复：

是否可以使用localStorage或sessionStorage来保存新生成的

<div class="todo></div>容器？

Answer 1

实际使用本地存储非常简单：给自己一个参考：

store = window.localStorage;

然后你就可以将其存储在其中，就像使用其他容器进行键值对一样：

store[<key>] = <value>; //or alternatively:
store.setItem(<key>, <value>);

并再次检索值：

val = store[<key>]; //or alternatively:
val = store.getItem(<key>);

将javascript对象保存为存储中的字符串我建议使用JSON.stringify（）和JSON.parse（），如下所示：

store.setItem("todos", JSON.stringify(todos));
todos = JSON.parse(store.getItem("todos"))

这里的＆＃39; todos＆＃39;可以是几乎所有没有循环引用的东西，因为这会混淆JSON解析器;＆gt;

Answer 2

我正在开发一个类似的项目，这是一个将html保存到本地存储的示例代码

var myToDos= document.getElementById('myToDos');
var htmlHolder = { "htmlToDo": myToDos.outerHTML };
localStorage.setItem('myStorage', JSON.stringify(htmlHolder ));

您可以使用此

检索它

var myStorage = JSON.parse(localStorage.getItem('myStorage'));

为了加载html元素，您需要使用DOMParser，然后将其附加到您的工作区。

var parsedHTML = new DOMParser().parseFromString(myStorage.htmlToDo, "text/html");

请注意“text / html”将返回带有标题和正文的整个html源代码，通过检查控制台上的输出并使用.lastElementChild等访问相关的子项来获取所需的元素。由于你的容器可能会容纳很多孩子，你所要做的就是遍历.children节点列表。

我告诉你这是完全可能的，因为我是在一个相当绝望的条件下自己完成的。但请注意，localStorage非常小，只有4-10mb左右，视浏览器配额而定。

Answer 3

使用原始代码：

document.addEventListener('DOMContentLoaded',function(){

    let history = JSON.parse(localStorage.getItem("todoHistory")) || [];

        addBtn = document.querySelector('#add'),
        removeBtn = document.querySelector('#remove'),
    resultBox = document.querySelector('.results');

        let input = document.getElementsByTagName('input')[0];


        function setAttributes(element,attrs){
            for(let i in attrs){
                element.setAttribute(i,attrs[i]);
            }
        }

        setAttributes(input,{
            'placeholder' : 'Enter To-Do',
            'name' : 'todo'
        });

    function applyNewEntry(entry){
        if(input.value !== ''){
            let openingDiv = '<div class="todo"><span>';
            let closingDiv = '</span><button class="edit">Edit</button><button class="save">Save</button><button class="removeBtn">Remove</button></div>';

            resultBox.innerHTML += openingDiv + entry + closingDiv;
            event.preventDefault();
            return true;
        }
        return false;
    }

    function addtoBtn(){

        addBtn.addEventListener('click',function(event){

        if(applyNewEntry(input.value)){
            history.push(input.value);
            input.value = '';
            localStorage.setItem("todoHistory", history);
        }
        else{
            alert('Enter To-do!');
        }

        let innerBtn = document.querySelectorAll('.removeBtn');
        let editBtn = document.querySelectorAll('.edit');
        let saveBtn = document.querySelectorAll('.save');

        for(let collection = 0 ; collection < saveBtn.length ; collection++){
            saveBtn[collection].style.display = "none";
        }

        function removeToDo(){

            this.parentNode.style.display = 'none';
        }

        for(let k = 0 ; k < innerBtn.length ; k++){
            innerBtn[k].addEventListener('click',removeToDo);
        }

        function startContentEdit(){
            this.previousSibling.contentEditable = true;
            this.previousSibling.style.padding = "10px";
            this.previousSibling.style.boxShadow = "0 0 15px #fff";
            this.previousSibling.style.borderRadius = "10px";
            this.previousSibling.style.transition = "all .4s";

            this.style.display = "none";

            for(let el = 0 ; el < saveBtn.length ; el++){
                this.nextSibling.style.display = 'inline-block';
            }
        }

        for(let j = 0 ; j < editBtn.length ; j++){
            editBtn[j].addEventListener('click',startContentEdit);
        }

        function saveContentEdit(){
            this.style.display = 'none';

            for(let j = 0 ; j < editBtn.length ; j++){

                this.previousSibling.style.display = "inline-block";

                this.parentNode.firstElementChild.style.display = "block";
                this.parentNode.firstElementChild.contentEditable = false;
                this.parentNode.firstElementChild.style.padding = "0px";
                this.parentNode.firstElementChild.style.boxShadow = "0 0 0";
            }
        }

        for(let x = 0 ; x < saveBtn.length ; x++){
            saveBtn[x].addEventListener('click',saveContentEdit);
        }

        }); 
    }

    addtoBtn();
});

您需要为您的条目实现某种UUID系统，可能通过数据属性将uuid保存到dom中，这样您就可以非常轻松地编辑/删除它们。

基本上，我所说明的是没有理由保存DOM。只需JSON.stringify重要的东西（里面的文本）并保存。然后在重新加载时从本地存储重新编译它。

这是我的codepen

使用localStorage的待办事项应用程序

3 个答案: