JavaScript操作Cookies介绍
2014-08-08
JS  / 已有2090人围观

之前对页面中的Cookie机制不太了解,今天在工作的时候遇到Cookie操作的问题,浪费了很多时间。于是在这里总结一下JavaScript操作Cookie的使用方法。

一、Cookie介绍

Cookie是在你浏览网页的时候,网站服务器放在客户端(Client End,就是你的电脑)里面的一个小小的TXT文件。这个文件里面存储了一些与你访问的这个网站有关的一些东西,当你下一次访问这个网站的时候,Cookie就会记住你上次访问时候的一些状态或者设置,让服务器针对性的发送页面的相关内容。Cookie里面包含的信息并没有一个标准的格式,各个网站服务器的规范都可能不同,但一般会包括:所访问网站的域名(domain name),访问开始的时间,访问者的IP地址等客户端信息,访问者关于这个网站的一些设置等等。Cookie使用类似键值对的方式进行存储,比如“username=zhangshan”。

Cookie一般包含一下几个属性:name(名字),value(值),domain(域),path(路径),expires(过期时间);其中,name和value是必须的,其他的会有默认值。domain的默认值是当前页面的域名,path的默认值是当前页的URL,expires的默认值是Session(会话结束时清除Cookie)。

二、JS操作Cookie

页面中的Cookie可以通过document.cookie得到,你也可以在chrome提供的工具中查看当前的Cookies,如下图:

查看Cookie

添加/修改Cookie

function addCookie(name, value, expires) {
    var d = new Date();
    d.setTime(d.getTime() + (expires * 24 * 60 * 60 * 1000));
    var expiresStr = d.toGMTString();
    document.cookie = name + "=" + value + ";expires=" + expiresStr;
}
// 添加Cookie
addCookie("username", "zhangsan", 30);
// 指定domain和path的写法
document.cookie = "username=zhangsan; domain=.sohu.com; path=/; expires=Wed, 18 Dec 2023 12:00:00 GMT";

读取Cookie

function getCookie(name) {
    var cookieName = name + "=";
    var cookies = document.cookie.split(';');
    for(var i=0; i < cookies.length; i++) {
        var c = cookies[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(cookieName) != -1) return c.substring(cookieName.length, c.length);
    }
    return "";
}
// 获取Cookie
getCookie("username");

删除Cookie

function deleteCookie(name) {
    // 默认为当前的host
    var domain = arguments[1] ? arguments[1]: window.location.host;
    // 默认为当前的URL
    var path = arguments[2] ? arguments[2]: window.location.href;
    document.cookie = name + "=;domain=" + domain + ";path=" + path + ";expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
// 删除Cookie
deleteCookie("username");
// 指定domain和path的写法
document.cookie = "username=zhangsan; domain=.sohu.com; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";


Over!

本文地址:http://xianglong.me/article/javascript-add-delete-cookie/

特别声明:本站文章,如非注明,皆为降龙原创。转载需注明本文链接并保证链接可用。