前端Cookie基本使用方法

Cookie

Cookie 历来指就着牛奶一起吃的点心。然而,在因特网内,“Cookie”这个字有了完全不同的意思。那么“Cookie”到底是什么呢?“Cookie”是小量信息,由网络服务器发送出来以存储在网络浏览器上,从而下次这位独一无二的访客又回到该网络服务器时,可从该浏览器读回此信息。这是很有用的,让浏览器记住这位访客的特定信息,如上次访问的位置、花费的时间或用户首选项(如样式表)。Cookie 是个存储在浏览器目录的文本文件,当浏览器运行时,存储在 RAM 中。一旦你从该网站或网络服务器退出,Cookie 也可存储在计算机的硬驱上。当访客结束其浏览器对话时,即终止的所有 Cookie。

Cookie特点

Cookie内存大小受限

IE 6.0 IE 7.0 8.0 Opera Fire Fox Safari Chrome
Cookie个数 每个域名下20个 每个域名下50个 每个域名30个 每个域名50个 没有限制 每个域名53个
Cookie大小 4095字节 4095字节 4096字节 4097字节 4097字节 4097字节

Cookie具有生命周期

    Cookie可以保持登录信息到用户下次与服务器的会话,换句话说,下次访问同一网站时,用户会发现不必输入用户名和密码就已经登录了(当然,不排除用户手工删除Cookie)。而还有一些Cookie在用户退出会话的时候就被删除了,这样可以有效保护个人隐私。
    Cookie在生成时就会被指定一个Expire值,这就是Cookie的生存周期,在这个周期内Cookie有效,超出周期Cookie就会被清除。有些页面将Cookie的生存周期设置为“0”或负值,这样在关闭浏览器时,就马上清除Cookie,不会记录用户信息,更加安全。

Cookie满足同源策略

    虽然网站images.google.com与网站www.google.com同属于Google,但是域名不一样,二者同样不能互相操作彼此的Cookie。

    问题来了 举个例子:
    访问玩zhidao.baidu.com 再访问wenku.baidu.com还需要重新登陆百度账号吗?
    
    解决办法: 设置document.domain = ‘baidu.com’;
    
    
    让页面属于这个基础域名下(那么此页面和任何二级域名为baidu.com的)

封装自己Cookie的增删改查函数

/*
    2017/02/20
    cookie操作
 */
function setCookie(key, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = key + '=' + value + ';expires=' + oDate;

}
function removeCookie(key) {
    setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
function getCookie(key) {
    var cookieArr = document.cookie.split('; ');
    for(var i = 0; i < cookieArr.length; i++) {
        var arr = cookieArr[i].split('=');
        if(arr[0] === key) {
            return arr[1];
        }
    }
    return false;
}

你可能感兴趣的:(前端Cookie基本使用方法)