HT5本地存储（web sql、sessionStorage、localStorage）
我们知道js写的效果，每次刷新都是从新执行，是不存在记录操作的，主要是大部分的效果不需要这样的处理(一个tab切换，焦点图肯定不需要记住运行到哪里，刷新从新开始就好了)！
在html5之前，前端写的效果真的需要存储一些记录，我们都是使用cookie，对于网站换肤其实可以使用这个处理，今天我们介绍的sessionStorage和localStorage其实就是类似cookie的东西，不过他比cookie存储更大，操作更加容易，更符合我们的使用习惯。
一.cookie的使用
我们先回忆cookie的使用：
1.cookie的读取
document.cookie="userId=01"; document.cookie="userName=hulk"; alert(document.cookie);
我们会看到设置的内容，我们知道汉字很特殊，作为值设置我们会使用escape进行编码处理，和unescape解码
2.cookie设置过期
document.cookie="userId=828; expiress=GMT_String";
这个就非常重要了，我们一般会选择3天，7天或者1个月，这样我们把用户的账户存入cookie，下次就可以在不超出过期时间内直接登录了，延时的话我们会利用date对象并且转为gmt形式。
3.cookie删除
我们知道到了设置的过期时间会删除cookie，我们对cookie的删除就是把过期设置到当前日期之前的日子
4.cookie详细介绍
对于cookie的具体操作我们可以看我的这篇介绍：http://my.oschina.net/tbd/blog/490310 介绍内容在博客中间位置。
5.基于cookie的tab切换效果
其原理就是把点击所在的索引存入cookie，每次刷新页面会读取cookie的这个数值做tab默认位置的设置，上面说这种处理是在开玩笑，不过这个例子更让大家容易。
大家在服务器环境下运行，涉及到存储这一块：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cookie</title>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div style=" height:300px; width:300px;">
<div id="list" style=" height:50px; line-height:50px; background:#CC6;">
<span>标题1</span>
<span>标题2</span>
<span>标题3</span>
</div>
<div id="con" style=" height:250px;">
<div style="height:250px;">内容1</div>
<div style="height:250px;">内容2</div>
<div style="height:250px;">内容3</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//cookie索引位置获取
var cookiei=null;
var strCookie=document.cookie;
var cookielist=strCookie.split(";");
var key="ys";
for(var i=0;i<cookielist.length;i++){
//alert(unescape(cookielist[i].split("=")[1]));
if(cookielist[i].split("=")[0]=="ys"){
cookiei=unescape(cookielist[i].split("=")[1]);
};
};
var st=0;
var real=cookiei||st;
//选择器查找
var list=document.getElementById("list");
var listspan=list.getElementsByTagName("span")
var con=document.getElementById("con");
var condiv=con.getElementsByTagName("div");
//初始化设置，有cookie根据cookie设置无默认用第一个
for(var i=0;i<listspan.length;i++){
if(i==real){
listspan[i].style.color="#fff";
condiv[i].style.display="block";
}else{
listspan[i].style.color="#000";
condiv[i].style.display="none";
};
};
//事件设置
for(var i=0;i<listspan.length;i++){
listspan[i].onclick=function(){
//alert(this.innerHTML)
for(var j=0;j<listspan.length;j++){
if(listspan[j]==this){
listspan[j].style.color="#fff";
condiv[j].style.display="block";
document.cookie="ys="+escape(j);
}else{
listspan[j].style.color="#000";
condiv[j].style.display="none"
};
};
};
};
};
</script>
</html>
我们点击到第三个，我们在此刷新发现会定位到第三个显示，实现了记忆处理。
二.sessionStorage、localStorage 本地存储帝时代
上面涉及到了cookie的介绍，cookie是放在document下，我们感觉有些不能适应是不是，应该在window下吧，好吧就是在document下，不过我们ht5的新特性：
window.sessionStorage
window.localStorage
实实在在是在window下。我们一定要记住使用时用哪个对象，与cookie区分。
1.设置localStorage
localStorage.a1 = "aaa";
localStorage["a2"] = "bbb";
localStorage.setItem("a3","ccc");
前2个和操作对象一样，后面是提供的方法处理
2.获取localStorage
alert(localStorage.a1);
alert(localStorage["a2"]);
alert(localStorage.getItem("a3"));
同设置，最后的是方法获取
3.删除localStorage
localStorage.removeItem("a3");//清除c的值
alert(localStorage.getItem("a3"));
清除后，返回null，除了单个清除还有全部清除：
localStorage.clear();
alert(localStorage.a1);
alert(localStorage["a2"]);
alert(localStorage.getItem("a3"));
另一个用法和local差不多就不在做介绍，只不过session会在关闭页面后自动删除，同服务端的session一样机制。
三.Html5数据库 web SQL
ht5的新特性中，为我们添加了数据库的处理功能，我们可以向服务端一样创建数据库，数据表，增删改查了。
Html5数据库API是以一个独立规范形式出现，它包含三个核心方法：
1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction：这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql：这个方法用于执行真实的SQL查询。
下面是一个使用的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web sql</title>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div id="status"></div>
</body>
<script type="text/javascript">
var db = openDatabase('demodb', '1.0', 'demo', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id unique, name ,sex)');
tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (1, "小刚" ,"男")');
tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (2, "小红" ,"女")');
tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (3, "小明" ,"男")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM USERS', [], function (tx, results) {
var status=document.getElementById("status");
var rows = results.rows;
for(var i=0;i<rows.length;i++){
var arr=document.createElement("div");
arr.innerHTML=rows[i].name+"--"+rows[i].sex;
status.appendChild(arr);
};
}, null);
});
</script>
</html>
我们了解其中的的各个使用方法：
1.打开数据库
openDatabase('demodb', '1.0', 'demo', 2 * 1024 * 1024);
打开数据库，没有时创建，第一个参数demodb是数据库名称，第三个参数demo是描述，第四个是的大小
2.执行处理
db.transaction(function (tx) {
});
我们的所有数据表的处理程序都在在这个内部。
3.创建表
tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id unique, name ,sex)');
创建表 USERS，没有时会创建，定义有三个字段，id字段不能重复
4.插入记录
tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (1, "小刚" ,"男")');
给哪个表插入，哪些字段插入
5.获取记录
tx.executeSql('SELECT * FROM USERS', [], function (tx, results) {
}, null);
设置查询条件，会在回调的results拿到查询记录，在results.rows中存放我们的记录集合：
记录形式：
[
{id:1,name:"小明",sex:"男"},
{},
{}
]
都是固定的使用规则，我们如果会sql直接可以使用，不会的话看手册也就直接可以使用的。
四.总结
1.cookie就不用多说了，我们要注意的就是使用是document.cookie，
他的赋值形式是key=val；key2=val2
删除时时利用过期时间，过期时间是date的gmt格式
对于中文等设置和获取要使用escape编码和解码。
2.sessionStorage等是在window下，和object一样的使用规则，同样我自己单出的设置，获取删除和统一删除方法
3.web SQL其实就是本地数据库的处理形式，利用sql语句去处理记录内容，其实在没有出现之前我们利用json也会模拟处理。