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
鼠标点击掉血游戏案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{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;}
</style>
</head>
<body>
<div class='line'>
<div class='xie'></div>
</div>
<img src="1.jpeg" class='guai'>
<script type="text/javascript">
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)
}
</script>
</body>
</html>
一个带过期机制的localstorage
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
储存数据:
<input type="" name="" id='need'>
储存数据的时间:
<input type="" name="" id='timer'>
<button id='btn'>保存</button>
数据展示:
<span id='span'>暂无数据</span>
<script type="text/javascript">
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;
};
</script>
</body>
</html>
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中使用
缺点：兼容性问题
上一篇： python 读取鼠标点击坐标的实例