页面数据存储

1、HTML5添加的storage

它分为两个：

一个是sessionStorage :

session是一种会话，只能在本页面访问。关闭页面此对象清除

方法：
setItem(name,val)   getItem(name) 无值时返回null   removeItem(name)  clear() <br />
属性：
sessionStorage.name //获取或设置指定属性的值  如无此属性会返回undefined<br />
也可用sessionStorage[name]组合的方式获取或设置值<br />
sessionStorage.length 获取属性的个数<br />
得到某个索引的key：localStorage.key( index );   
 sessionStorage.key( index );

二个是localStorage

此对象是本地存储，再打开也不会清除

它的方法和属性和sessionStorage一样

sessionStorage 可以用来即时存储数据，如临时聊天的内容

localStorage 可以当做本地小型数据库来用把值存储成对象json

2、indexedDB

indexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库。相比web sql(sqlite)更加高效，包括索引、
事务处理和健壮的查询功能。indexedDB特点：
一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。
一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键 和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。(有点像列数据库的特点)
IndexedDB中，几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录，返回一个request，在request的result中得到查询结果。又比如打开数据库，返回一个request，在request的result中得到返回的数据库引用。
indexedDB需要放到web服务器上才可以运行。

<input type="text" id="name" placeholder="name">
		<input type="text" id="age" placeholder="age" />
		<button id="but_1">添加</button><br />
		<input type="text" id="select">
		<button id="but_2">id查找</button>
		<button id="but_3">all</button>
		<button id="but_4">name 查找</button>
		<button id="but_5">游标范围</button>
		<div id="list"></div>
		<script>
		var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
		var openRequest;
		var db;
		function init(){
			//返回IDBOpenDBRequest对象
			openRequest=indexedDB.open('testdb',3);//创建或打开数据库(name,version)
			
			openRequest.οnerrοr=function(err){
				console.log(err);
			}			
			//第一次打开页面初始化数据库时会被调用，或在当有版本号变化时
			openRequest.onupgradeneeded=function(e){
				db = e.target.result;
				//有person 时删除它
				if(db.objectStoreNames.contains('person')){
					db.deleteObjectStore('person')
				}
				//判断是否有此objectsotre
				if(!db.objectStoreNames.contains("person")){
					console.log("create person objectstore");
					//创建store
					var objectStore = db.createObjectStore("person", {
						keyPath: "id",//主键名称id
						autoIncrement:true 
					});
					//创建索引 索引名称 字段名 配置 
					//unique 是否惟一索引 此字段的值不能重复 一般用于tel email设为唯一 的
					objectStore.createIndex("name", "name", { unique: false });
				}
			}
			openRequest.onsuccess=function(e){				
				db=e.target.result;		
				//判断是否有store
				if(db.objectStoreNames.contains("person")) {					
					//创建事务指定store和权限
					//在indexedDB里任何的存取对象的操作都需要放在事务里执行。
					//readonly 只读 readwrite 写读 
					var t=db.transaction(["person"],"readwrite");  
					t.οnerrοr=function(e){
						console.log(e);
					}
					t.oncomplete=function(e){
						console.log('事务成功')
					}
					//获取事务中指定store来操作
					var os=t.objectStore('person');
					//os.clear() 可以清除所有数据
					//.add({})添加记录
					//os.add({name:'wangyuan',age:22})
					
					//os.delete(1) 删除记录，根据id
					
					//get(id) 根据id获取记录
					var request=os.get(2);
					request.onsuccess=function(e){
						//可用e.target.result获取记录对象 或request.result
						console.log(e.target.result)
						/*
						 * 获取的记录对象可以修改后用os.put()来修改
						 */
						//e.target.result.age=26;
						//os.put(e.target.result);
					}
				}				
			}		
		}
		/*但indexedDB中没有表的概念，而是objectStore，一个数据库中可以包含多个
		objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。
		也就是说一个objectStore相当于一张表，里面存储的每条数据和一个键相关联。*/
		
		document.querySelector('#but_1').οnclick=function(){
			var name=document.querySelector('#name').value;
			var age=document.querySelector('#age').value;
			var s=db.transaction(["person"],"readwrite").objectStore('person');
			s.add({name:name,age:age})
			
		}
		document.querySelector('#but_2').οnclick=function(){
			var id=document.querySelector('#select').value;
			var s=db.transaction(["person"],"readwrite").objectStore('person');
			//get 时参数需要数字
			s.get(Number(id)).onsuccess=function(e){
				console.log(e.target.result)
			}
		}
		document.querySelector('#but_3').οnclick=function(){
			var id=document.querySelector('#select').value;
			var s=db.transaction(["person"],"readwrite").objectStore('person');
			//创建游标
			var request=s.openCursor();
			var txt='';
			request.onsuccess=function(e){
				var cur=e.target.result;
				if(cur){
					txt+=JSON.stringify(cur.value)+'<br/>'
					cur.continue();
				}
				document.querySelector('#list').innerHTML=txt;
			}
		}
		document.querySelector('#but_4').οnclick=function(){
			var id=document.querySelector('#select').value;
			var s=db.transaction(['person']).objectStore('person');
			//index()指定索引名
			var request=s.index('name');
			//get 查找 name属性为star的记录，只有name==star时才返回记录	
			//name不是唯一索引时会匹配第一条记录
			request.get('star').onsuccess=function(e){
				console.log(e.target.result);
			}
			
			//使用游标，参数是only 
			//name 索引查找name==star的符合条件的都可获取到
			//only 只获取指定值的数据
			request.openCursor(IDBKeyRange.only('star')).onsuccess=function(e){
				var cur=e.target.result;
				if(cur){
					console.log(JSON.stringify(cur.value));
					cur.continue();
				}
			}
		}
		document.querySelector('#but_5').οnclick=function(){
			var id=document.querySelector('#select').value;
			var s=db.transaction(['person']).objectStore('person');
			//index()指定索引名
			var request=s.index('name');
			//lowerbound(val,bool) 获取最小是val的数据，也就是大于val的数据
			//bool表示是否排除val本身，true排除，false不不排除
			//upperBound(val,bool) 获取最大是val的数据，也就是小于val的数据
			//bound(val1,val2,bool1,bool2) 获取大小val1 小于val2的数据
			request.openCursor(IDBKeyRange.lowerBound('w',true)).onsuccess=function(e){
				var cur=e.target.result;
				if(cur){
					console.log(JSON.stringify(cur.value));
					cur.continue();
				}
			}
			
			
		}
		
		window.addEventListener("DOMContentLoaded", init, false);

3、web sql database

html5引入Web SQL Database概念，它使用 SQL 来操纵客户端数据库的 API，
		这些 API 是异步的，规范中使用的方言是SQLlite
		w3c规范已经停止了，但浏览器都已经支持了
		
		<script>
			//创建数据库 name version 描述 size callback
			var db=openDatabase('testdb',1,'desc',2*1024*1024,function(e){
				console.log(e);				
			})
			init();
			//transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数
			function init(){
				db.transaction(function(context){
					//创建表
					//sql,参数数据，sql里用?表示参数，成功回调，失败回调
					context.executeSql('CREATE TABLE IF NOT EXISTS  usertable(id unique,name,age)',[],function(){
						console.log('success')
					},function(err){
						console.log(err)
					});
					context.executeSql('insert into usertable (id,name,age) values (2,"star",23)')
					
				})
				db.transaction(function(ct){
					//查询数据
					ct.executeSql('select * from usertable where id>0',[],function(ct,results){
						console.log(results.rows.length)
						for(var i=0;i<results.rows.length;i++){
							console.log(results.rows[i])
						}
					})
				})
			}
		</script>