cookie不能存储大量数据，需要通过服务器的请求来传递，速度太慢
html5提供了两种在客户端存储数据的新方法，localStorage对象和sessionStorage对象
先判断能否使用：alert(typeof(Storage));
localStorage对象：localStorage对象存储的数据没有时间限制，所以称为持久化存储，数据存储长期可用
方法名：
setItem(key,value)：保存数据
getItem(key)：读取数据
removeItem(key)：删除单个数据
clear()：删除所有数据
key(index)：得到某个索引的key
<p id="result"></p>
<script type="text/javascript">
var a=1; localStorage.setItem(a,1);
if(localStorage.a<30)localStorage.a=parseInt(localStorage.a)+1;
else localStorage.a=1;
document.getElementById("result").innerHTML="刷新康康："+localStorage.a
</script>
sessionStorage对象:针对一个session进行数据存储，存储周期短，当关闭浏览器窗口后数据就会被删除
方法名：
setItem(key,value)：保存数据，以键值对的形式保存
getItem(key)：读取数据，读值
removeItem(key)：删除单个数据
clear()：删除所有数据
key(index)：得到某个索引的key，index是位置，0、1、2、3...
浏览器端数据库IndexedDB：
轻量级NoSQL(not only sql,泛指非关系型)数据库，用来持久化大量(250MB)客户端数据
查询能力强大，可以离线工作，直接使用js脚本，不依赖sql语句，操作返回均采用异步
而localStorage和sessionStorage对象采用同步技术实现少量(2.5-10MB)客户端数据存储
可以有多个数据库，有唯一名称
先判断能否使用：alert(indexedDB)
基本步骤：
-
-
- 打开数据库并且开始一个事务
- 创建一个对象仓库(object store)
- 构建一个请求来执行一些数据库操作，例如增加或提取数据等
- 通过监听正确类型的DOM事件以等待操作完成
- 在操作结果上进行一些操作(可以在request对象中找到)
-
数据库创建与打开
<script type="text/javascript">
var request=window.indexedDB.open("mybooks",1); //indexedDB.open(dbname,dbversion);有则打开否则创建
request.onerror=function(event){ alert("数据库连接失败："+event.target.errorCode); }//捕捉连接失败事件并处理，返回错误信息
request.onupgradeneeded=function(e){//数据库创建前不存在时进行初始化
var db=request.result;
var store=db.createObjectStore("books",{keyPath:"isbn"});
var titleindex=store.createIndex("by_title","title",{unique:true});
var authorindex=store.createIndex("by_author","author");
store.put({title:"计算机组成原理",author:"xxx",isbn:"123"});
store.put({title:"数据结构",author:"ccc",isbn:"456"});
}
request.onsuccess=function(e){ db=e.target.result;}//也可以用request.result
alert("数据库连接成功"); }
//成功事件
//打开数据库可能引发四种结果，success成功，error失败,blocked上一次的数据库连接还未关闭
//upgradeneeded第一次打开数据库或者版本发生变化，objectstored的创建删除都是在这个监听事件下执行的
//当数据库连接时，open方法返回一个IDBOpenBDRequest对象
//在连接建立成功时，会触发onsuccess事件，调用函数接受一个事件对象event作为参数，其target.result属性指向打开的indexedDB数据库
//也可以使用监听器来捕获3个事件，分别是success，error，upgradeneeded，可以通过下面的方法为页面元素对象添加事件监听器
//element.addEventListener(event,function,useCapture);
//event为某元素指定监听器名称如click，success，而不是onclick，onsuccess等事件句柄
//function为某个事件绑定指派事件处理函数 //useCapture可选，布尔值，true表示事件句柄在捕获阶段执行，默认值为false表示事件句柄在冒泡阶段执行
</script>
