本地存储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中使用
缺点：兼容性问题
HTML5存储（带一个粗糙的打怪小游戏案例）的更多相关文章
-
HTML5游戏开发,剪刀石头布小游戏案例
剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...
-
基于HTML5的WebGL实现的2D3D迷宫小游戏
为了实现一个基于HTML5的场景小游戏,我采用了HT for Web来实现,短短200行代码,我就能实现用"第一人称"来操作前进后退上下左右,并且实现了碰撞检测. 先来看下实现的效 ...
-
一个很有意思的小游戏：Dig2China
最近通关了一个小游戏,游戏故事是这样的:一个美国小男孩想要去中国,他决定从自家后院往下挖,横穿地心去中国,期间经历了很多次失败.但是,每次尝试都能收获一批钱,用这些钱升级钻地机,调整自己的工具,终于在 ...
-
一听就懂：用Python做一个超简单的小游戏
写它会用到 while 循环random 模块if 语句输入输出函数
-
一个打砖块的小游戏1.0 KILL THE BLOCKS !
/******************************************** * 程序名称:MR.DUAN 的打砖块(KILL THE BLOCKS !) * 作 者:WindAutum ...
-
一个控制台贪吃蛇小游戏（wsad控制移动）
/******************************************** * 程序名称:MR.DUAN 的贪吃蛇游戏(链表法) * 作 者:WindAutumn <flutti ...
-
简单的鼠标操作<;一个填充格子的小游戏>;
#include "graphics.h" #include "conio.h" void main(){ // 初始化界面 initgraph(, ); ; ...
-
带你使用h5开发移动端小游戏
带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...
-
Chrome自带恐龙小游戏的源码研究(一)
目录 Chrome自带恐龙小游戏的源码研究(一)——绘制地面 Chrome自带恐龙小游戏的源码研究(二)——绘制云朵 Chrome自带恐龙小游戏的源码研究(三)——昼夜交替 Chrome自带恐龙小游戏 ...
随机推荐
-
Android开发学习之路-PopupWindow和仿QQ左滑删除
这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...
-
hadoop 集群 加入一个新的存储节点和删除一个计算节点需要刷新集群状态命令
加入一个新的存储节点和删除一个计算节点需要刷新集群状态命令 方式1:静态添加datanode,停止namenode方式 1.停止namenode 2.修改slaves文件,并更新到各个节点3.启动na ...
-
解决Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future:
php 5个版本,5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器直接上5.5,但是程序出现如下错误:Deprecated: mysql_connect(): The mysql extens ...
-
linux系统中实现mongodb3.0.5数据库自动备份
最近两天,因公司业务需要,要定期备份mongodb数据库中的数据. 查了很多资料后,发现mongodb似乎并没有自带的定时备份功能,于是只好转移目标到linux系统的定时任务上,于是学习并使用了cro ...
-
【数学规律】Vijos P1582 笨笨的L阵游戏
题目链接: https://vijos.org/p/1582 题目大意: 就是o(o<=50)个人在n*m(n,m<=2000)的格子上放L型的东西(有点像俄罗斯方块的L,可对称旋转),问 ...
-
Android Animation 动画Demo（Frame帧动画）
上一页介绍Animation动画第一:Tween吐温动画. 本文介绍了以下Animation也有动画的形式:Frame帧动画. Frame动画是一系列照片示出的顺序按照一定的处理,和机制,以放电影很阶 ...
-
vscode下运行matlab记录
Linux下安装MATLAB可参照以下链接: https://blog.csdn.net/qq_31285709/article/details/82083902 在vscode 中运行.m文件. 首 ...
-
生存模型(Survival Model)介绍
https://www.cnblogs.com/BinbinChen/p/3416972.html 生存分析,维基上的解释是: 生存分析(Survival analysis)是指根据试验或调查得到的数 ...
-
analyse web.xml of hello1
web.xml注释分析: 补充: 一.XML文档的xmlns.xmlns:xsi和xsi:schemaLocation (参考博客:https://www.cnblogs.com/osttwz/p/6 ...
-
MongoDB（课时5 数据查询）
3.4.2 数据查询 对于数据的查询操作核心语法: db.集合名称.find({查询条件}, {设置显示的字段}) 范例:没查询条件 db.info.find() 范例:有查询条件,查询出url为&q ...