我们知道 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>我们了解其中的的各个使用方法：
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 也会模拟处理。
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
