本地存储一般体现在搜索记录中,用于方便用户下次搜索
在浏览器的控制台中的Application中查看数据的增删 ,首先先准备四个按钮来控制
<button type="button" onclick="saveDate()">点击存储数据</button>
<button type="button" onclick="readDate()">点击查看数据</button>
<button type="button" onclick="deleteDate()">点击删除数据</button>
<button type="button" onclick="deleteAllDate()">点击清空数据</button>
为他们分别绑定点击事件
存储数据
let p = {name:'Tom',age:18}
function saveDate(){
localStorage.setItem('msg','alone');
localStorage.setItem('mag',1921);
localStorage.setItem('person',JSON.stringify(p));
}
点击按钮后在浏览器中就保存了数据,JSON.stringify是为了解析,不让他以{object,object}方式出现,方便阅读,如下图:
查看数据
function readDate(){
console.log(localStorage.getItem('msg'));
console.log(localStorage.getItem('mag'));
console.log(JSON.parse(localStorage.getItem('person')));
}
点击按钮将在控制台打印出结果,对比之后发现确实是之前存在里面的数据
删除单个数据(或者多个,自己加代码就行)
function deleteDate(){
localStorage.removeItem('msg');
}
这边删掉之前存的msg,在浏览器中显示如图:
发现确实删掉了msg数据
清空数据 (全部清空)
function deleteAllDate(){
localStorage.clear()
}
点击按钮Application中之前存在的数据将全部清空,以上就是localstorage的本地存储