本地存储localStorage
设置存储内容setItem(key,value)javascript
localStorage.setItem('leo','23');
更新存储内容
对象[key]=value
对象.key=valuecss
localStorage.leo = 25;
localStorage['leo'] = 24;
获取存储内容getItem(key)html
console.log(localStorage.getItem('leo'))
删除存储内容removeItem(key)java
localStorage.removeItem('leo');
清空存储内容clear()数据库
localStorage.clear();
获取存储内容长度json
console.log(localStorage.length);
sessionStorage数组
sessionStorage.a = 10;
console.log(sessionStorage);
localStorage与sessionStorage的区别
localStorage:
存储会持久化
容量2-5MB浏览器
sessionStorage:
在网页会话结束后失效
容量不一,部分浏览器不设限session
Storage使用注意:
一、存储容量超出限制,须要使用try catch捕获异常
二、存储类型限制:只能是字符串
三、sessionStorage失效机制:
刷新页面不能使sessionStorage失效
相同URL不一样标签页不能共享sessionStoragedom
鼠标点击掉血游戏案例:
*{margin:0;padding:0;list-style:none;}body{position:relative;height:100%;}html{height:100%;}.guai{position:absolute;left:50%;top:50%;margin:-75px 0 0 -100px;}.line{width:400px;height:20px;border:4px solid black;position:absolute;left:50%;top:20px;margin:0 0 0 -204px;}.xie{width:400px;height:100%;background:red;transition:.3s;}