JS基础——Cookie与存储

一、Cookie是什么

Cookie是一种客户端（浏览器）把用户信息以文件形式存储到本地硬盘的技术，说白了就是一种浏览器技术

二、Cookie的作用

Cookie的作用很单一，就是存储客户数据。（存储数据的文件叫Cookie文件）

三、Cookie与变量的区别

变量：数据是存储到内存中的，是一种暂时存储（一关浏览器就没了）

Cookie:数据是存储到Cookie文件中的（硬盘），是一种长期存储（即使关了浏览器还存在）

四、Cookie的注意事项

1、不同浏览器存放Cookie的位置不同，也是不能通用的

2、Cookie文件的存储以域名形式进行区分的

3、Cookie的数据可以设置名字（为了存储大量数据和方便操作这些数据）

4、一个域名下存放Cookie的数量是有限的，而不同浏览器存放的个数不同

5、每个cookie存放的内容大小也是有限的，而不同浏览器存放内容大小不同

五、从Cookie中获取数据

语法格式：

document.cookie  //name=leo; age=32

我们通过document.cookie来获取当前域名下的cookie时候，得到的是一个字符串类型的值，它包含了当前域名下的所有cookie。所有cookie通过一个分号+空格连接起来

六、向Cookie中写入数据

语法格式：

document.cookie = 'username=leo';
document.cookie = 'age=17';

七、Cookie长期存储数据

如果Cookie要长时间存储数据，需要在写入Cookie时同时给它设置一个过期时间

语法格式：document.cookie = ‘username=leo；expires=‘ + 时间;

注意：Cookie文件默认是临时存储的，当浏览器关闭时自动销毁。

var oDate = new Date();
oDate.setDate(oDate.getDate() + 5);
document.cookie = 'username=leo；expires=' +oDate;

八、IE兼容问题

上面这种Cookie长期存储数据，在ie中有兼容性问题。

原因：oDate是object类型，而cookie中要求oDate必须是字符串

解决：把oDate转化成string类型

var oDate = new Date();
oDate.setDate(oDate.getDate() + 5);
document.cookie = 'username=leo；expires=' +oDate.toGMTString();

九、存储特殊字符问题

问题：在Cookie存储特殊字符的时候（例如：中文、转义字符等），存储不了特殊字符

解决：内容最好编码存放（encodeURI编码，decodeURI解码）

var oDate = new Date();
oDate.setDate(oDate.getDate() + 5);
document.cookie = 'username='+encodeURI('你好吗')+'；expires=' +oDate.toGMTString();
alert(decodeURI(document.cookie));

十、封装读取单个Cookie值的方法

由于document.cookie获取的是该网站下的所有cookie值，为了能够获取所需的那个值，我们必须自己封装函数。

//读取Cookie的方法
function getCookie(key){
        var arr1 = document.cookie.split('; ');
        for(var i=0;i<arr1.length;i++){
                var arr2 = arr1[i].split('=');
                if(arr2[0] == key){
                        return decodeURI(arr2[1]);
                }
        }
}

十一、封装写入Cookie的方法

function setCookie(key,value,t){
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + t);
        document.cookie = key + '=' + encodeURI(value) + ';expire=' + oDate.toGMTString();
}