HTML5+CSS3的读书笔记(four)--HTML5的数据存储

林子酱
146 阅读4分钟

第七章：HTML5的数据存储

1.Web Storage 与 Cookie的比较


1.相同点：
二者的数据存储最大值都有限制,
Cookie最大可以存储4kb的数据，
Web Storage最大可以存储5MB的数据

2.二者存储的数据内容都可以被用户创建、修改、删除

3.二者都可以被禁止使用

4.二者存储的数据空间是以域名为单位分配的

5.基于安全性考虑，二者都不适合存储重要的数据信息

2.Web Storage的两种存储方式

1.sessionStorage
用于保存会话数据，实际被存储在session对象中，
随着session对象生命周期的结束而销毁

sessionStorage.setItem(key,value)
一旦名称被设定将不允许修改，也不允许重复

sessionStorage.getItem(key)
返回值为对应指定名称的数据值，如果指定的名称不存在会返回null

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function save()
{
	var name = document.getElementById("name").value;
	sessionStorage.setItem("name",name); //将信息存入sessionStorage
}
function read()
{
	var result = document.getElementById("result");
	result.innerHTML = sessionStorage.getItem("name"); //从sessionStorage中读取信息
}
</script>
<fieldset>
<legend>sessionStorage的应用</legend>
<input type="text" id="name" value=""/>
<br>
<span id="result"></span><br>
<button onclick="save()">保存</button>
<button onclick="read()">读取</button>
</fieldset>
</body>
</html>



2.localStorage
用于保存本地数据
将数据保存在客户端只要不手动清除localStorage中的数据将长久保存

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function save()
{
	var name = document.getElementById("name").value;
	localStorage.setItem("name",name);
}
function read()
{
	var result = document.getElementById("result");
	result.innerHTML = localStorage.getItem("name");
}
function remove()
{
	localStorage.removeItem("name");
	localStorage.removeItem("people");
}
</script>
<fieldset>
<legend>localStorage的应用</legend>
<input type="text" id="name" value=""/>
<br>
<span id="result"></span><br>
<button onclick="save()">保存</button>
<button onclick="read()">读取</button>
<button onclick="remove()">清除</button>
</fieldset>
</body>
</html>

3.localStorage的多数据操作

1.读取多条数据
借助for循环以及localStorage对象的key和length属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
function save()
{
	localStorage.setItem("name","Jerry");
	localStorage.setItem("age","29");
	localStorage.setItem("email","yuqi987@sohu.com");
}
function read()
{
	var result = document.getElementById("result");
	for(var i=0; i<localStorage.length; i++)
	{
		var key = localStorage.key(i);//ͨ通过key属性及索引编号获取名称
		var value = localStorage.getItem(key);//ͨ通过名称获取数据值
		result.innerHTML += "key : "+key+" , value : "+value+"<br>";
	}
}
</script>
<fieldset>
<legend>localStorage的应用</legend>
<span id="result"></span><br>
<button onclick="save()">保存</button>
<button onclick="read()">读取</button>
</fieldset>
</body>
</html>


2.删除多条数据信息

function removeAll()
{
	localStorage.clear();
}

4.Web SQL数据库

即可以实现数据的客户端存储，又能缓存从服务器获取的数据
要想使用Web SQL存储数据首先必须创建一个Web SQL数据库
或打开一个现有的Web SQL数据库
创建或打开数据库需要调用方法openDatabase


openDatabase(dbname,dbversion,dbDescribe,dbsize[,callback(()])
--dbsize：指定数据库的大小，单位为字节
--callback():可选参数，指定成功创建或打开数据库后执行的回调函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<!DOCTYPE html>
<meta charset="gb2312" />
<script>
function initDatabase() {
    if (!window.openDatabase) {
        alert('浏览器不支持Web SQL数据库.');
    } else {
        var dbName = 'myDB'; //定义数据库名称
        var dbVersion = '1.0'; //定义数据库版本
        var dbDec = 'DEMO Database'; //定义数据库说明信息
        var dbSize = 100000; //  定义数据库大小
        //创建数据库，并调用showResult方法
        DB = openDatabase(dbName, dbVersion, dbDec, dbSize,showResult());
    }
}
function showResult()
{
	var result = document.getElementById("result");
	result.innerHTML ='数据库创建成功';
}
</script>
<fieldset>
<legend>openDatabase的应用</legend>
<span id="result"></span><br>
<button onclick="initDatabase()">打开/创建</button>
</fieldset>
</body>
</html>

5.Web SQL的增删改查

可通过executeSql()方法执行SQL语句

1.执行流程
打开数据库--开启一个事务--执行相应的语句

事务是指作为单个逻辑工作单元执行的一系列操作
在WEB SQL中开启事务的语法格式为
db.transaction(function(tx){
	tx.executeSql('sql')
})

其中db用于指定当前操作的数据库对象
sql为待执行的sql语句
excuteSql方法的完整语法格式如下

tx.executeSql('sql语句'
				,[params]
                ,function(tx,rs){}
                ,function(){tx,error}
			)
其中‘params’为SQL语句中所需参数对应值，如果SQL语句不需要额外参数，‘params’可置空。

‘function(tx,rs){}’为SQL语句成功执行后的回调函数，其中rs为执行语句后的返回值

‘function(tx,error){}’为SQL语句失败执行后的回调函数

2.建表方法
tx.executeSql('create table [if not exists] tablename (column1,column2,...)')

其中‘tablename’用于指定建立数据表的名称

‘column1,column2...’用于指定创建表所包含的列

‘if not exists’可有可无，
一旦加上，在创建新数据表之前会首先判断该表是否已经存在
如果已经存在则不会执行建表操作

3.插入数据方法
tx.executeSql('insert into tablename(column1,column2,column3) values(?,?,?)',[param1,param2,param3])

‘tablename’用于指定插入待数据的数据表的名称
‘column1,column2...’用于指定待插入数据对应的列
‘?,?,?’和‘[param1,param2,param3’分别对应即将插入的值

4.删除数据方法
tx.executeSql('delete from tablename where column1=?',[param])

tablename用于指定待删除数据的数据表的名称
‘column1’用于指定待删除数据对应的列名
‘param’用于指定参数值

5.更新数据方法

tx.executeSql('update table set column1=?,column2=?,column3=?',[params1,param2,param3])

tablename用于指定待更新数据的数据表的名称
‘column1’用于指定待更新数据对应的列名
‘?,?,?’和‘[param1,param2,param3’分别对应即将插入的值

6.查询数据方法

tx.executeSql('select column1,column2,... from tablename where column1=?',[param])

其中‘column1,column2,...’用于指定待查询的数据列的名称--查询所有用*
tablename用于指定待查询数据所在的表名

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>
var DB;
//创建数据库方法
function initDatabase() {
    if (!window.openDatabase) {
        alert('浏览器不支持Web SQL数据库.');
    } else {
        var dbName = 'myDB'; //定义数据库名称
        var dbVersion = '1.0'; //定义数据库版本
        var dbDec = 'DEMO Database'; //定义数据库说明信息
        var dbSize = 100000; //定义数据库大小
		////创建数据库并调用showResult方法
        DB = openDatabase(dbName, dbVersion, dbDec, dbSize,showResult('数据库创建成功')); 
    }
}
//创建数据库表方法
function createTable()
{
	DB.transaction(function(tx){
		tx.executeSql(
			'create table if not exists USERINFO(USERNAME,EMAIL)',
			[],
			showResult('数据表创建成功')
		);
	});
}
//插入数据方法
function insertData()
{
	DB.transaction(function(tx){
		tx.executeSql(
			'insert into USERINFO(USERNAME,EMAIL) values(?,?)',
			["Jerry","yuqi987@sohu.com"],
			function(tx,rs){
				showResult('添加成功');
			},
			function(tx,error){
				showResult('添加失败');
			}
		);
	});
}
function updateData()
{
	DB.transaction(function(tx){
		tx.executeSql(
			'update USERINFO set EMAIL=?',
			["jerry.yq@gmail.com"],
			function(tx,rs){
				showResult('更新成功');
			},
			function(tx,error){
				showResult('更新失败');
			}
		);
	});
}
function queryData()
{
	DB.transaction(function(tx){
		tx.executeSql(
			'select * from USERINFO',
			[],
          function(tx,rs){
              var msg ='';
              for(var i=0;i<rs.rows.length;i++)
              {
                  msg += 'username : '+rs.rows.item(i).USERNAME+ ' , email : ' 
+rs.rows.item(i).EMAIL + "<br>";
              }
              showResult(msg);
          }
		);
	});
}
function deleteData()
{
	DB.transaction(function(tx){
		tx.executeSql(
			'delete from USERINFO',
			[],
			function(tx,rs){
				showResult('删除成功');
			},
			function(tx,error){
				showResult('删除失败');
			}
		);
	});
}
function showResult(msg)
{
	var result = document.getElementById("result");
	result.innerHTML =msg;
}
</script>
<fieldset>
<legend>Web SQL建表,插入及查询操作</legend>
<span id="result"></span><br>
<button onclick="initDatabase()">创建数据库</button>
<button onclick="createTable()">创建数据表</button>
<br>
<button onclick="insertData()">插入数据</button>
<button onclick="updateData()">更新数据</button>
<button onclick="queryData()">查询所有数据</button>
<button onclick="deleteData()">删除所有数据</button>
</fieldset>
</body>
</html>

6.注册与登录的案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script>

var DB;
//创建数据库方法
function initDatabase() {
    if (!window.openDatabase) {
        alert('浏览器不支持Web SQL数据库.');
    } else {
        var dbName = 'mydb'; //定义数据库名称
        var dbVersion = '1.0'; //定义数据库版本
        var dbDec = 'DEMO Database'; //定义数据库说明信息
        var dbSize = 100000; //定义数据库大小
        DB = openDatabase(dbName, dbVersion, dbDec, dbSize); //创建数据库
    }
}
//创建数据表
function createTable()
{
	DB.transaction(function(tx){
		tx.executeSql('create table if not exists USERINFO(USERNAME,PASSWORD,EMAIL,HOBBY)');
	});
}
//注册方法
function register()
{
	initDatabase();
	createTable();
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	var email = document.getElementById("email").value;
	var hobby = document.getElementById("hobby").value;
	DB.transaction(function(tx){
		tx.executeSql(
				'select * from USERINFO where USERNAME=?',
				[username],
				function(tx,rs){
					if (rs.rows.length>0) //用户名已经存在
					{
						alert("该用户名已经存在，请使用其他用户名注册。");
					}
					else
					{
						DB.transaction(function(tx){
							tx.executeSql( //将新用户注册信息插入数据库
								'insert into USERINFO(USERNAME,PASSWORD,EMAIL,HOBBY) values(?,?,?,?)',
								[username,password,email,hobby],
								function(tx,rs){
									alert('注册成功');
								},
								function(tx,error){
									alert('注册失败');
								}
							);
						});
					}
				}
		);
	});
}
//登录方法
function login()
{
	initDatabase();
	var username = document.getElementById("login_username").value;
	var password = document.getElementById("login_password").value;
	DB.transaction(function(tx){
		tx.executeSql(
			'select * from USERINFO where USERNAME=? and PASSWORD=?',
			[username,password],
			function(tx,rs){
				if (rs.rows.length==0) //未查询到指定用户名与密码的用户信息
				{
					alert("登录失败");
				}
				else
				{
					var msg ='';
					for(var i=0;i<rs.rows.length;i++)
					{
						msg += '您好，'+rs.rows.item(i).USERNAME 
							+'\n\n您的email是 : ' +rs.rows.item(i).EMAIL
							+'\n\n您的爱好是：'+rs.rows.item(i).HOBBY;
					}
					alert(msg);
				}
			}
		);
	});
}

</script>
<body>
	<div>
		<div style="float:left;border-style:outset;width:300px;height:300px">
			<center>
			<h2>注册新用户</h2>
			<table>
				<tbody><tr>
					<td>用户名</td>
					<td><input type="text" id="username"></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" id="password"></td>
				</tr>
				<tr>
					<td>电子邮箱</td>
					<td><input type="text" id="email"></td>
				</tr>
				<tr>
					<td>兴趣爱好</td>
					<td><input type="text" id="hobby"></td>
				</tr>
				<tr>
					<td colspan="2" align="right">
						<input type="button" value="注册新用户" onclick="register()">
					</td>
				</tr>
			</tbody></table>
			</center>
		</div>
		<div style="float:left;border-style:outset;margin-left: 30px;width:300px; height:300px">
			<center>
			<h2>用户登录</h2>
			<table>
				<tbody><tr>
					<td>用户名</td>
					<td><input type="text" id="login_username"></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" id="login_password"></td>
				</tr>
				<tr>
					<td colspan="2" align="right">
						<input type="button" value="用户登录" onclick="login()">
					</td>
				</tr>
			</tbody></table>
			</center>
		</div>
	</div>
</body>
</html>
avatar
文章
阅读
粉丝