我们知道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也会模拟处理。