浏览器存储（localStorage和sessionStorage)

我们知道 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有多种意思：

储存在用户本地终端上的数据，是网站为了识别用户和跟踪会话而存储在用户本地终端中的文本数据；
兼容Arduino标准的硬件开发平台；
集英社创办的月刊少女漫画杂志；
一种英语单词，意思为“饼干”或“小甜点”。

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 是以一个独立规范形式出现，它包含三个核心方法：

openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
transaction：这个方法允许我们根据情况控制事务提交或回滚。
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>

我们了解其中的的各个使用方法：