关于本地存储的那些事

好久没有更博了呢，，博主是个懒妹子~~~今天，我们就来说一下关于web前段关于本地存储的那些事。

对于本地存储从来就不是一个新鲜的概念，随着web应用程序的出现，也产生了对于能够字节在客户端上存储用户信息能力的要求。主要常用的方式也就是那么几种，用一张很经典的图来开始我们这个话题。

1.cookies

在h5之前，一般采用cookies的方式。

什么是cookie？

cookie是存储于访问者计算机中的变量
cookie是浏览器提供的一种机制，可以由JavaScript对其进行操作(设置、读取、删除)

cookie的优点
cookie可以跨越同域名下的多个网页使用
cookie可以实现跨页面全局变量
同一个网站中所有页面共享一套cookie
可以设置有效期限

cookie机制将信息存储于用户硬盘，因此可以作为跨页面全局变量，这是它最大的一个优点
常用场合：（1）保存用户登录状态；（2）跟踪用户行为；（3）定制页面；（4）创建购物车 …等等

cookie的缺点

（1）cookie可能被禁用；
（2）cookie与浏览器相关，不能互相访问；
（3）cookie可能被用户删除；
（4）cookie安全性不够高；
（5）cookie存储空间很小(只有4KB左右)
（6）cookie操作麻烦，没有方便的API
（7）cookie每次操作会随着HTTP请求发送给服务器

简单封装设置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函数用来对cookie的值进行转码，以免获取的时候会出现乱码
    }
    function getCookie(key){//获取cookie
        var cookies=document.cookie;
        var arr1=cookies.split('; ');
        for (var i = 0; i < arr1.length; i++) {
            var arr2=arr1[i].split('=');
            if (arr2[0]==key) {
                return unescape(arr2[1]);//解码
            };
        };
        return false;
    }
    function rmCookie(key){//删除cookie
        setCookie(key,'a',-3);//将cookie设置为过期后，系统会自动删除
    }

2.flash

众所周知，h5以前，flash在视频，音频领域占据着非常牛掰的地位，但是h5普及以来，flash已经放弃了移动端，所以用flash的方式在移动端是不可以用的，并且flash的使用必须要有插件，比较麻烦。

3.HTML5 LocalStorage

Web Storage 的目的是克服由cookie带来的一些限制，当数据需要被阉割控制在客户端上时，无需持续的将数据发回服务器。

Web Storage 的两个主要目标：

1.提供一种在cookie之外存储会话数据的途径。
2.提供一种存储大量可以跨回话存在的数据的机制。

1.Storage 类型

主要方法：

1. clear（）：删除所有值，FireFox 不支持
2. getItem（name）：根据指定名字获取对应的值
3. key（index）：获取index位置处的值的名字
4. romoveItem（name）：删除name指定的键值对
5. setItem（name，value）：设置键值对

---

2.sessionStorage

sessionStorage对象存储在特定某个会话的临时数据，存储的数据在浏览器关闭后将不再存在。
sessionStorage中的数据只能在最初给对象存储数据的页面访问到，其他页面不可访问。
sessionStorage 是Storage的实例，可以使用Storage的方法。

3.globalStorage

globalStorage可以跨越会话存储数据，但是有特定的访问限制，即首先要指定那些域可以访问。

这里指定的存储空间只能由来自wrox.com的页面访问，其他域名不可访问。

globalStorage对象不是Storage的实例，而具体的globalStorage[“wrox.com”]才是。

globalStorage["wrox.com"].name = 'mike';//保存数据
var name = globalStorage["wrox.com"].name;//获取数据
var book = globalStorage["wrox.com"].getItem('book');//获取数据

如果不能确定域名，可以使用location.host作为属性名比较安全。

globalStorage["location.host"].name = 'mike';//保存数据
var name = globalStorage["location.host"].getItem('name');//获取数据

4.locaStorage

locaStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。

locaStorage不能指定任何访问规则，规则实现就设定好了。要访问同一份locaStorage对象，页面就必须来自同一个域名，使用同一种协议，在同一个端口上，相当于globalStorage[“location.host”]。

locaStorage.setItem('name','mike');//使用方法存储数据
locaStorage.name = 'mike';//使用属性存储数据
var name = locaStorage.getItem('name');//使用方法获取数据
var name = locaStorage.name;//使用属性获取数据

兼容性写法：

function getLocalStorage(){
    if(typeof locaStorage == 'object'){
        return locaStorage;
    }else if(typeof globalStorage== 'object'){
        return globalStorage[location.host];
    }else{
        throw new Error("Local Storage not available.");
    }
}

5.storage 事件

对Storage 对象进行任何修改，都会在文档上触发storage 事件。

window.addEventListener('storage',function (e){//服务器环境运行
    txt.innerHTML='发生变化的key是：'+e.key+'，旧的值是：'+e.oldValue+'，新的值是：'+e.newValue+'，修改数据的页面地址是：'+e.url;
},false);