HTML 5 中Web SQL 的使用示例

web sql 是在模拟，可以使用js来操作sql完成对数据的读写，但是这个东西目前支持的浏览器不多，而且其w3c规范已经停止支持，貌似其前景不是很明朗。

w3c 规范：https://www.w3.org/tr/webdatabase/#dom-sqltransaction-sync-executesql （目前已经停止更新，组织也没想清楚发展方向）

支持的浏览器以及版本：

safari (3.2+)
chrome (3.0+)
opera (10.5+)

通常常规的离线应用使用的是webstorage，但是webstorage带有很大的局限性，比如存储空间，domain安全机制等，而web sql 就没有那么多的限制，其有更大的存储空间（可自定义设置），跨域读写，存储结构*等特点，而且可以方便的使用sql来进行读写，非常的方便。

示例代码

	
		
		使用数据库实现web留言板
		<script language="javascript">
			var datatable = null;   
			//使用opendatabase方法来创建一个访问数据库的对象 
			var db = opendatabase('mydata', '', 'my database', 102400);
			
			// 初始化操作
			function init() {       
				datatable = document.getelementbyid("datatable");       
				showalldata();   
			}   

			// 删除所有数据
			function removealldata() {       
				for (var i =datatable.childnodes.length-1; i>=0; i--)      {           
					datatable.removechild(datatable.childnodes[i]);       
				}       
				var tr = document.createelement('tr');       
				var th1 = document.createelement('th');       
				var th2 = document.createelement('th');       
				var th3 = document.createelement('th');       
				th1.innerhtml = '姓名';       
				th2.innerhtml = '留言';       
				th3.innerhtml = '时间';       
				tr.appendchild(th1);       
				tr.appendchild(th2);       
				tr.appendchild(th3);       
				datatable.appendchild(tr);   
			}   
			
			// 展示每行数据
			function showdata(row)  {       
				var tr = document.createelement('tr');       
				var td1 = document.createelement('td');       
				td1.innerhtml = row.name;       
				var td2 = document.createelement('td');       
				td2.innerhtml = row.message;       
				var td3 = document.createelement('td');       
				var t = new date();       
				t.settime(row.time);       
				td3.innerhtml=t.tolocaledatestring()+" "+t.tolocaletimestring();       
				tr.appendchild(td1);       
				tr.appendchild(td2);       
				tr.appendchild(td3);       
				datatable.appendchild(tr);     
			}   

			// 展示所有数据
			function showalldata()  {       
				db.transaction(function(tx)      {           
					tx.executesql('create table if not exists msgdata(name text, message text, time integer)',[]);           
					tx.executesql('select * from msgdata', [], function(tx, rs)          {               
						removealldata();               
						for(var i = 0; i 
	
		使用数据库实现web留言板
		
			
				姓名：
				 
			
			
				留言：
				 
			
			
				 
				 
			
			
				
					

				
			
		
		
		
		
	

对于websql，由于宽泛的读写规则，其带来的就是很大的安全问题，跨域读取，xss攻击，sql注入等都是非常头疼的事情。所以什么样的数据可以存储，如何存储，需要慎重考虑。w3c目前停止了该规范的更新，可能对目前的规范设计并不满意，而目前浏览器厂商的支持度也不高，后续的发展，还是未知。