首页 > 代码库 > JS基础——Cookie与存储

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();
}


JS基础——Cookie与存储