html5倒车游戏,HTML5存储（带一个粗糙的打怪小游戏案例）

本地存储localStorage

设置存储内容setItem(key,value)

localStorage.setItem('leo','23');

更新存储内容

对象[key]=value

对象.key=value

localStorage.leo = 25;

localStorage['leo'] = 24;

获取存储内容getItem(key)

console.log(localStorage.getItem('leo'))

删除存储内容removeItem(key)

localStorage.removeItem('leo');

清空存储内容clear()

localStorage.clear();

获取存储内容长度

console.log(localStorage.length);

sessionStorage

sessionStorage.a = 10;

console.log(sessionStorage);

localStorage与sessionStorage的区别

localStorage：

存储会持久化

容量2-5MB

sessionStorage：

在网页会话结束后失效

容量不一，部分浏览器不设限

Storage使用注意：

1、存储容量超出限制，需要使用try catch捕获异常

2、存储类型限制：只能是字符串

3、sessionStorage失效机制：

刷新页面不能使sessionStorage失效

相同URL不同标签页不能共享sessionStorage

鼠标点击掉血游戏案例：

*{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;}