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

本地存储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;}