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>