本地存储-记事本案例-CFANZ编程社区

1.本地存储有两种，一种生命周期为关闭浏览器，另一种为手动删除

关闭浏览器就消失的为会话存储sessionStorage

需要手动删除的是本地存储localStorage

他们都有相同的方法

setItem('存储的名字',存储的内容) 存储数据

getItem('存储的名字') 获取存储的数据

removeItem('存储的名字') 删除存储的数据

clear() 清空存储的数据

2.记事本案例

<!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>本地存储</title>
</head>
<body>
    <input type="text">
    <button>添加</button>
    <button>清空</button>
    <div id="no">
        <h1>未完成</h1>
    </div>

    <script>
        var input = document.querySelector('input');
        var btns = document.querySelectorAll('button');
        var no = document.querySelector('#no');
        var yes = document.querySelector('#yes');
        var num = localStorage.length+1;
        var things = [];
        var ss;
        
        //添加事件

        btns[0].onclick = () => {
            if(input.value != '')
            {
                things.push(input.value);
                
                localStorage.setItem(`things[${num}]`,things[num-1]);
                ss = localStorage.getItem(`things[${num}]`);
                num++;
                zhan();
            } 
        }
        

        //清除内存
        btns[1].onclick = () => {
            localStorage.clear();
            console.log(localStorage.length);
            things = [];
            num = 0;
        }
        

        //删除方法
        fndel = function(mm){
            index = mm.parentNode.index;
            mm.parentNode.parentNode.removeChild(mm.parentNode);
            localStorage.removeItem(`things[${index}]`);
            console.log(localStorage.length);
            things.length--;
            console.log(things.length);
            num--;
        }
        

        //渲染方法
        zhan = function(){
                
                var div = document.createElement('div');
                div.setAttribute('class','thing');
                div.index = num;
                var btn2 = document.createElement('button');
                btn2.setAttribute('class','del');
                btn2.setAttribute('onclick','fndel(this)');
                btn2.innerHTML = '删除';
                div.innerHTML = ss;
                div.appendChild(btn2);
                no.appendChild(div);
                console.log(localStorage.length);
                console.log(things.length);
        }
        

        //页面初始化
       for(let i = 1;i <= localStorage.length;i++)
       {
         ss = localStorage.getItem(`things[${i}]`);
         zhan();
         things.push(0);
       }

    </script>
</body>
</html>