cookie是存储在客户端的一些数据,可以使用JavaScript去操作这些数据。cookie以 名称=值
的形式存储数据,常用于记录客户端信息,当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中,服务端通过这种方式来获取用户的信息。
chrome浏览器在本地获取不到cookie,必须在服务器上才可以。如果是本地的话,推荐使用Firefox或者Chrome51旧版本的浏览器,或者搭建本地服务器。
创建Cookie
JavaScript 可以使用 document.cookie
属性来创建 、读取、及删除 cookie。
创建cookie:
document.cookie = "username = Cherry";
//cookie可以通过expires属性设置有效期,默认关闭浏览器即失效
document.cookie = "username = Cherry; expires = 2022 Dec 31 12:00";
//path属性可以告诉浏览器cookie路径,默认属于当前页面
document.cookie = "username = Cherry; expires = 2022 Dec 31 12:00; path = /";
读取Cookie:
可以通过将document.cookie
赋值给变量来读取cookie
document.cookie = "username = Cherry";
var x = document.cookie;
console.log(x);//username=Cherry
如果是多个cookie,则会以字符串返回。
document.cookie = "username = Cherry";
document.cookie = "age = 18";
var x = document.cookie;
console.log(x);
//username=Cherry; age=18;
修改cookie, 修改cookie只需将原来的值覆盖即可。
document.cookie = "username = Cherry";
document.cookie = "username = Maria";
console.log(document.cookie);
//username=Maria
删除cookie:
删除一个cookie也很简单,只需将expires属性设置一个过去时间即可。
document.cookie = "username = Cherry; expires = 2000 Dec 31 00:00:00";
封装函数
可以将设置cookie,读取cookie和删除cookie封装成函数,方便使用。
设置cookie:
function setCookie(c_name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
读取cookie:
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return (arr[2]);
else
return null;
}
删除cookie:
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
完整例子:
function setCookie(cname, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=cname+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return (arr[2]);
else
return null;
}
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
setCookie("cname","Herry",1);
console.log(getCookie("cname"));//Herry
delCookie("cname");
console.log(getCookie("cname"));//null