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也会模拟处理。

 

 

你可能感兴趣的:(cookie,cookie,localStorage,sessionStorage,Html5本地存储,websql)