H5ke11--3介绍本地,会话存储
代码顺序:
1.设置input,捕获input如果有多个用属性选择符例如
input[type=file]点击事件.向我们的本地存储设置键值对
2.在点击事件外面设置本地存储表示初始化的值.点击上面的事件才能修改我们想修改的值
会话(session)浏览a数据可以写到本地硬盘,关闭页面数据就没了
本地(localStorage):以前是a打开的,有数据.放在本地.以后打开b页面还可以有相同数据
除非清空缓存
大家一定要注意要清楚缓存在这里
清除之后就是
因为我减少了设置属性
现在
现在我不设置了想变空,变不会去啦,已经存在啦
只能修改
修改后
或者全部清空
localStorage.clear()<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" value="修改"><script>let btn=document.querySelector("input")btn.addEventListener("click",(event)=>{localStorage.setItem("name","Bobxiugai")localStorage.setItem("age","00")localStorage.setItem("tall","000")})console.log(localStorage.length);localStorage.setItem("name","Alice");// localStorage.setItem("age",20);// localStorage.setItem("tall","165.2");console.log(localStorage.length);console.log(localStorage.getItem("name"));console.log(localStorage.getItem("age"));console.log(localStorage.getItem("tall")); </script> </body> </html>
宏观
参考:本地存储三种方式得区别_本地存储的区别-CSDN博客
indexedDB几乎就是一个完善的数据库系统,复杂
笔记
localStorage是Map,
方法
setItem(key,value)
getItem(key)得到
.key方法可以得到键
storage里面的值只能是字符串类型
java值可以任意类型
has方法
这节课,我们要用setItem保存
getitm写上去
key获取键
clear清除全部
Removeitem(key)
length
localStorage没有java的contain,我们用geitem
会引发的事件
加载器吧浏览器加载完了会引发load事件,准备关闭之前beforeunload….我们只要在这之前填充上去就行了