HTML5新增核心工具——本地存储
除了Canvas元素外,HMTL5另外一个新增的非常重要的功能是可以在客户端本地存储数据库的Web Storage。本文就介绍下Web Storage以及SQLLite操作。
Web Storage分为两类:
- sessionStorage:数据保存在session 对象中(临时)
- localStorage:数据保存在本地硬件设备中(永久)
sessionStorage:
保存数据的两种方法:
sessionStorage.setItem('key','val');
sessionStorage.key = 'val';
读取数据的两种方法:
sessionStorage.getItem('key');
var temp = sessionStorage.key;
清除数据的方法:
sessionStorage.removeItem('key')
注意:键名即'key'是不能重复的,键名页也不能删除。
示例:
sessionStorage.world='hello world';
sessionStorage.setItem('kitty','hello kitty');
在javascript中运行上述代码,用浏览器打开该页面后按F12呼出控制台,选择Resources标签页下的Session Storage选项,可以看到上述两条数据已经被存入了:
当执行清除后:
sessionStorage.removeItem('kitty');
相应键名的数据被删除:
现在sessionStorage中插入如下数据:
获取session中的数据条数(sessionStorage.length),并在控制台打印出来:
console.log(sessionStorage.length);
获取指定索引下标对应的键名(sessionStorage.key(index)):
console.log(sessionStorage.key(1));
清除所有数据:
sessionStorage.clear();
通过window对象对storage添加监听事件:
window.addEventListener(‘storage’,function(event){ });
localStorage与sessionStorage使用方法一致,只需要变下名字
区别在于localSorage是永久保存,而sessionStorage会在浏览器关闭时自动清除。sessionStorage可以用来暂时保存登陆后的用户名等信息。
实用的本地数据库:
var db=openDatabase("gameDB","1.0","游戏数据库",1024*1024);
参数:1.数据库名,如果存在就打开,如果不存在就创建一个 2.版本号,默认1.0 3.数据库描述 4.数据库大小,单位字节,1024*1024即1M,一般1M到2M就够用了。
访问数据库:
db.transaction(function(tx){
tx.executeSql("SQL语句",[],function(tx,rs){},function(tx,err){});
});
参数:1.SQL语句 2.SQL参数组 3.执行SQL成功时的回调函数 4.执行SQL失败时的回调函数。
其中执行成功回调函数中的rs代表结果集,其中的rows属性保存了每条数据。
用之前做的游戏举个实例:
var username=$("username").value;
var db=openDatabase("gameDB","1.0","游戏数据库",1024*1024);
db.transaction(function(tx){
tx.executeSql("create table t_defenders (username varchar(20),score int)",[],function(tx,rs){},function(tx,err){});
});
db.transaction(function(tx){
tx.executeSql("insert into t_defenders values(?,?)",[username,killNum*100],function(tx,rs){},function(ts,err){});
});
作用为当游戏结束时,在本地数据库中创建名为t_defenders的表,之后获取名字与得分存入表中:
点击确定后F12打开控制台,在Resources下面的Web SQL中可以看到存入的数据:
接下来查看数据:
var db=openDatabase("gameDB","1.0","游戏数据库",1024*1024);
db.transaction(function(tx){
tx.executeSql("select * from t_defenders order by score desc limit 5",[],function(tx,rs){
var row = rs.rows;
$("score-table").innerHTML = "";
var str = "<tr><th>名次</th><th>玩家姓名</th><th>分数</th></tr>";
for(var i = 0;i<row.length; i++){
str += "<tr><td>"+(i+1)+"</td><td>"+row.item(i).username+"</td><td>"+row.item(i).score+"</td></tr>";
}
$("score-table").innerHTML += str;
},function(ts,err){});
大致作用为通过rs.rows获得表中的数据,动态的加入到我们希望显示的地方:
本地数据库的好处在于一些像游戏成绩等简单的数据并不像通过node.js连接MySQL并添加数据那么麻烦,仅仅用HTML5中的本地数据库就可以很方便的对这些数据进行操作。
感谢您的浏览,希望能对您有所帮助。
HTML5新增核心工具——本地存储的更多相关文章
- HTML5新增核心工具——canvas
原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...
- 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)
来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...
- HTML5本地存储——IndexedDB
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5新增的本地存储功能(笔记)
HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...
- HTML5 学习总结(三)——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5 学习笔记(三)——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
随机推荐
- matlab中关于函数句柄、feval函数以及inline函数的解析 (转)
http://blog.sina.com.cn/s/blog_7bff755b010180l3.html MATLAB函数句柄 函数句柄(Function handle)是MATLAB的一种数据类型. ...
- 第一次项目冲刺(Alpha版本)2017/11/14
一.站立式会议 在宿舍进行了第一次会议 会议内容: 1.做了简单的分工 2.提出个人对任务是否有困难 3.规定完成时间在第三天之前 4.商量初步的代码规范 二.分工 三.任务分解图 四.燃尽图 五.数 ...
- [转]Linux下查看CPU信息、机器型号等硬件信息
From: http://www.jbxue.com/LINUXjishu/14582.html 查看CPU信息(型号) : # cat /proc/cpuinfo | grep name | cut ...
- OpenCV2马拉松第2圈——读写图片
收入囊中 用imread读取图片 用nameWindow和imshow展示图片 cvtColor彩色图像灰度化 imwrite写图像 Luv色彩空间转换 初识API 图像读取接口 image = im ...
- Spring常用jar包的功能
jar名称 描述 spring-framework.jar spring框架比较完整的功能,core+aop+ioc+transaction spring-core.jar 基本上的核心工具类,一些u ...
- C# HttpWebRequest请求超时解决办法
request.GetResponse();超时问题的解决,和HttpWebRequest多线程性能问题,请求超时的错误, 解决办法 1.将http的request的keepAlive设置为false ...
- 第二部分 OpenStack安装与配置
第二部分 OpenStack安装与配置 一.引言 本章内容讲解如何在3台物理机上搭建最小化云平台,这3台机器分为称为Server1.Server2和Client1,之后的各章也是如此.Server ...
- saltstack之sls文件配置
state模块 state模块会调用它的sls函数处理一个以.sls结尾的配置文件. sls文件是YAML语言来进行描述的 缩进 不要使用`tab`因为tab是四个空格,而YAML是使用两个空格 冒号 ...
- Leetcode590. N-ary Tree Postorder Traversal
590. N-ary Tree Postorder Traversal 自己没写出来 优秀代码: """ # Definition for a Node. cla ...
- nginx 配置记录 上传文件大小 size client
cat nginx.conf worker_processes auto;events { worker_connections 1024;}http { include mime.types; de ...