cookie的使用

1.使用场景

• 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了。
• 追踪用户行为。例如天气预报网站，系统能够记住上一次访问的地区。
• 定制页面。如果网站提供了换肤功能，当用户下次访问时，仍然可以保存上一次访问的界面风格。
• 创建购物车。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

2.cookie的设置

• 设置cookie：

1、document.cookie = 'userId=121;phone=1311111111';
2、document.cookie="str="+escape("I love ajax");(相当于document.cookie="str=I%20love%20ajax";为了避免空格符号等，使用escape()统一编码)
3、当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

• 获取cookie值：

1、document.cookie直接获取所有的cookie
2、若想获得单个cookie，需要进行字符串和数组的相关操作。

• 删除cookie：

1、删除cookie，可将其过期时间设定为一个过去的值。

3.函数

• 添加cookie：addCookie(name,value,time)
• 调用方法：addCookie('userId','121',5)

function addCookie(name,value,time){
    var str = name+"="+escape(value);
    if(time>0){//time为0时不设定过期事件，浏览器关闭时cookie自动消失    
        var date = new Date();
        var ms = time*24*3600*1000;
        date.setTime(date.getTime()+ms);
        str += ";expires="+date.toGMTString()+";path=/"; 
        document.cookie = str;
    }
}

• 获取指定cookie：getCookie(c_name)
• 调用方法：getCookie('userId')

function getCookie(name) {
    if(document.cookie.length > 0) {
        c_start = document.cookie.indexOf(name + "=")
        if(c_start != -1) {
            c_start = c_start + name.length + 1
            c_end = document.cookie.indexOf(";", c_start)
            if(c_end == -1) c_end = document.cookie.length
            return unescape(document.cookie.substring(c_start, c_end))
        }
    }
    return ""
}

• 删除指定cookie：deleteCookie(name)
• 调用方法：deleteCookie('userId')

function deleteCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if(cval != null)
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/";
}

• 检测是否有cookie存在：checkCookie(name)
• 调用方法：checkCookie('userId')

function checkCookie(name) {
    var c = document.cookie.indexOf(name);
    if(c != -1) {
        return true;
    } else {
        return false;
    }
}

• 更新cookie：updateCookie(name,value,time)
• 调用方法：updateCookie('userId','111',2)

function updateCookie(name, value, time) {
    var str = name + "=" + escape(value);
    var date = new Date();
    var ms = time * 24 * 3600 * 1000;
    date.setTime(date.getTime() + ms);
    str += ";expires=" + date.toGMTString() + ";path=/";
    document.cookie = str;
}

4.使用案例(记住密码-部分代码)

html

image.png

javascript