cookie与HTML5的localStorage和sessionStorage

说这个之前，先说一下本地存储的发展史：

可以看出本地存储出现了好多
作为第一个成熟的本地存储cookie具有很大的意义，它的优点：
1.cookie可以跨越同域名下的多个网页使用
2.cookie可以实现跨页面全局变量
3.同一个网站中所有页面共享一套cookie
4.可以设置有效期限
当然，它也有不少缺点：
1.cookie可能被禁用；
2.cookie与浏览器相关，不能互相访问；
3.cookie可能被用户删除；
4.cookie安全性不够高；
5.cookie存储空间很小(只有4KB左右)
6.cookie操作麻烦，没有方便的API
7.每次操作会随着HTTP请求发送给服务器

所以各大IT行业高层公司开始制定自己的本地存储，比如图片中的userDate、Flash、Gears…
但是他们有他们很大的缺点：必须依赖于自己家的浏览器插件
所以推广不开！

于是新的HTML5解决了这个问题，HTML5的优点：
1.最小5MB，可以申请更大的空间
2.不会随HTTP请求发送给服务器
3.有方便的API操作
4.移动端普及高
5.有localStorage与sessionStorage两种
目前几乎所有的主流浏览器（高版本）都支持HTML5，所以也就支持HTML5的本地存储。

不过，目前cookie并没有绝迹，仍有很多人在使用。
cookie的使用也比较简单，下面是封装的设置和获取cookie的函数，还算比较实用。
设置cookie：

function setCookie(key,val,Days){//设置cookie
    var dates=new Date();//当前时间对象
    dates.setDate(dates.getDate()+Days);//设置有效期
    document.cookie=key+'='+escape(val)+'; expires='+dates;
}

*escape（）是将val进行转码，避免有特殊符号而造成乱码

获取cookie：

function getCookie(key){
    var arr=document.cookie.split('; ');
    for (var i = 0; i < arr.length; i++) {
        var arr2=arr[i].split('=');
        if (arr2[0]==key) {
            return unescape(arr2[1]);
        };
    };
    return false;//没有则返回false
}

*获取的时候使用unescape（）进行解码

好了cookie说完了，接下来是localStorage和sessionStorage：
这两个的区别：
localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问。

sessionStorage为临时性保存数据，当页面关闭就会消失。其他操作与localStorage一样，不能跨页面访问，它只局限在当前的标签页。

localStrage的各种方法：
1.setItem(key , value)，保存或设置数据
如果key已经存在，则覆盖key对应的value
如果不存在则添加key与value
2.getItem(key); 获取key对应的value。
如果key不存在则返回null
3.key(index); 获取指定下标位置的key
4.length 获取localStorage一共有多少条数据
5.clear(); 将同域名下的所有localStorage数据都清空
6.removeItem(‘key’);删除数据，通过key来删除相应的value
7.storage事件：当同源的localStorage有更改以后，其他窗口会触发这个事件。
具体的值有：
key（被增加、删除、修改的数据的key）
oldValue（数据被修改之前的value，如果是数据被增加则为null）
newValue（数据被修改之后的value）
url（修改storage页面的url）