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

var num = 0,timer = null,max = 400,

xienode = document.queryselector('.xie');

if(localstorage.x){

max = localstorage.x;

xienode.style.width = max + 'px';

};

onclick = function(){

var r = math.random() * 5 + 5;

max -= r;

localstorage.setitem('x',max);

console.log(localstorage)

xienode.style.width = max + 'px';

clearinterval(timer);

timer = setinterval(function(){

num++;

if(num == 10){

clearinterval(timer);

num = 0;

document.body.style.left = 0;

document.body.style.top = 0;

return;

};

document.body.style.left = math.random() * -20 + 10 + 'px';

document.body.style.top = math.random() * -20 + 10 + 'px';

},30)

}

一个带过期机制的localstorage

储存数据:

储存数据的时间:

保存

数据展示:

暂无数据

var nowtime = new date().getminutes();

if(nowtime >= localstorage.timer){

localstorage.clear();

}

else{

if(localstorage.leo){

span.innerhtml = localstorage.leo;

}

}

btn.onclick = function(){

localstorage.setitem('leo',need.value);

localstorage.setitem('timer',new date().getminutes() + number(timer.value));

span.innerhtml = localstorage.leo;

};

html5 - 数据库：indexeddb

创建数据库indexeddb.open('随便起个名字',版本号)

如果有这个数据就打开，没有就创建

版本号只能往上走,不可以降

var request = indexeddb.open('testdbleo',6);

onsuccess 数据库创建或打开成功

onerror 打开失败 (版本号不能降低)

onupgradeneeded 版本升级时触发的函数

// 数据库创建成功

request.onsuccess = function(){

console.log('创建数据库成功');

};

// 数据库创建失败

request.onerror = function(){

console.log('数据库读取失败');

};

// 数据库版本升级

request.onupgradeneeded = function(){

console.log('版本号升级了')

};

createobjectstore 创建一个表

自动递增的 - createobjectstore 表里面递增

{autoincrement: true}

{keypath:数据中的字段}

request.onupgradeneeded = function(){

var db = request.result;

// 一个objectstore相当于一张表

// 指定表的主键自增

db.createobjectstore('test3',{autoincrement: true});

};

设置主键为id

db.createobjectstore('test3',{keypath: 'id'}

unique true 唯一性 如果有多个同样的的情况下 就不写入了

store.createindex('test3','name',{unique:true});

transaction使用事务获取表

readwrite 读写模式

readonly 只能读不能写

var transaction = db.transaction('test3','readwrite');

var store = transaction.objectstore('test3');

操作数据表

add 添加数据，添加 readonly 是报错的

get 里面放入key值就可以的

getall 可以获取所有的表中的数据 result 是以数组的形式表现

put 继续添加数据

delete 删除某一条数据 参数就是key值

clear 删除所有的数据

onsuccess 如果指令成功了执行的回调函数

result 可以看到相关的数据

var json = [{

"id":200,

"name":"modoy",

"age":"15"

},{

"id":201,

"name":"busy",

"age":"21"

},{

"id":202,

"name":"blue",

"age":"23"

}]

// add 添加数据

store.add(json);

// 读取数据store.get()参数是主键的值

var requestnode = store.get(1);

//获取成功后的操作

requestnode.onsuccess = function(){

console.log(requestnode.result);

for(var i=0;i<3;i++){

console.log('名字叫'+requestnode.result[i].name);

console.log('年龄今年已经'+requestnode.result[i].age+'岁了');

}

};

更新指定主键的数据

store.put({

"id":203,

"name":"sky",

"age":"29"

});

获取所有数据

var requestnode = store.getall();

删除指定id的数据

store.delete(201);

游标，此处表示主键<=202

var requestnode = store.opencursor(idbkeyrange.upperbound(202));

requestnode.onsuccess = function(){

//获取游标所取得的值

var cursor = requestnode.result;

if(cursor){

console.log(cursor.value);

cursor.continue();

};

};

索引 唯一性

store.createindex(表名称,数据key值,{unique:true});

----------

var index = store.index(表的名称)get(key值的名称).onsuccess = function(){

e.target.result 找到的数据的内容

}

游标指定范围：

idbkeyrange.only//参数一是范围

upperbound // 小于等于之前的 true 不包含自己的 false 包含自己的

lowerbound // 大于等于之前的 true 不包含自己的 false 包含自己的

bound 参数1 大于等于的 参数2 小于等于的 如果有参数 3 和 4 就是true 和 false

true 不包含自己的 false 包含自己的

参数3 对应着参数1 参数4 对应着参数2

设置游标的direction：

next 顺序查询

nextunique 顺序唯一查询

prev 逆序查询

prevunique 逆序唯一查询

var requestnode = store.opencursor(idbkeyrange.bound(200,202),'prev');

索引和游标结合

//指定数据表

var index = store.index('test3');

//游标指定范围

var requestnode = index.opencursor(idbkeyrange.upperbound(31));

requestnode.onsuccess = function(){

var cursor = requestnode.result;

if(cursor){

//如果查询的数据name为leo

if(cursor.value.name == 'leo'){

// 更新数据

cursor.update({

"id":209,

"name":"leoooo",

"age":31

});

}

console.log(cursor.value);

cursor.continue();

}

};

indexeddb与web storage比较：

优点：indexeddb存储类型丰富

条件搜索强大

存储容量更大

可以在worker中使用

缺点：兼容性问题