cookie也叫HTTP Cookie,最初是客户端与服务器端进行会话使用的。比如,会员登录,下次回访网站时无须登录了;或者是购物车,购买的商品没有及时付款,过两天发现购物车里还有之前的商品列表。
HTTP Cookie要求服务器对任意HTTP请求发送Set-Cookie,因此,Cookie的处理原则上需要在服务器环境下进行。当然,现在大部分浏览器在客户端也能实现Cookie的生成和获取。(目前Chrome不可以在客户端操作,其他浏览器均可)
完整格式为:
name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]
中括号是可选,name=value是必选。
document.cookie = 'user=' + encodeURIComponent('冬哥'); //编码写入
alert(decodeURIComponent(document.cookie)); //解码读取
expires=date 失效时间,如果没有声明,则为浏览器关闭后即失效。声明了失效时间,那么时间到期后方能失效。
PS:可以通过Firefox浏览器查看和验证失效时间。如果要提前删除cookie也非常简单,只要重新创建cookie把时间设置当前时间之前即可:date.getDate() - 1或new Date(0)。
var date = new Date(); //创建一个
date.setDate(date.getDate() + 14);
document.cookie = "user= " + encodeURIComponent('冬哥') +";expires=" + date;
path=path 访问路径,当设置了路径,那么只有设置的那个路径文件才可以访问cookie。
var path = '/D:/%E5%86%AC%E5%93%A5/hhh';
document.cookie = "user= " + encodeURIComponent('冬哥') + ";path=" + path;
domain=domain 访问域名,用于限制只有设置的域名才可以访问,那么没有设置,会默认限制为创建cookie的域名。
var domain = 'www.520ly.com';
document.cookie = "user= " + encodeURIComponent('冬哥') + ";domain=" + domain;
PS:如果定义了www.520ly.com,那么在这个域名下的任何网页都可访问,如果定义了m.520ly.com,那么只能在这个二级域名访问该cookie,而主域名和其他子域名则不能访问。
PS:设置域名,必须在当前域名绑定的服务器上设置,如果在520mg.com服务器上随意设置其他域名,则会无法创建cookie。
secure 安全设置,指明必须通过安全的通信通道来传输(HTTPS)才能获取cookie。
document.cookie = "user= " + encodeURIComponent('冬哥') + ";secure";
alert(encodeURIComponent('冬哥'));--------%E5%86%AC%E5%93%A5
alert(decodeURIComponent('%E5%86%AC%E5%93%A5'));-------冬哥
PS:https安全通信链接需要单独配置。
JavaScript设置、读取和删除并不是特别的直观方便,我们可以封装成函数来方便调用。
创建cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires;
}
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure';}
document.cookie = cookieText;
}
常见setcookie name value exprises
function setCookie(name, value, iDay)
{
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
获取cookie
方法一:
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(
document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
方法二:
function getCookie(name) //获取cookie
{
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++)
{
var arr2=arr[i].split('=');
if (arr2[0]==name)
{return arr2[1];}
}
return ' ';
}
删除cookie
1.
function removeCookie(name) //删除cookie
{
setCookie(name, 1, -1);
}
2.
function unsetCookie(name) {
document.cookie = name + "= ; expires=" + new Date(0);
}
失效天数,直接传一个天数即可
function setCookieDate(day) {
if (typeof day == 'number' && day > 0) {
var date = new Date();
date.setDate(date.getDate() + day);
} else {
throw new Error('传递的day必须是一个天数,必须比0大');
}
return date;
}
突然就想上串代码!
setCookie('userName', 'dongge', 365);
setCookie('password', '123456', 14);
alert(document.cookie);
输出 userName=dongge; password=123456
removeCookie('userName');
alert(document.cookie);
输出 password=123456;
alert(getCookie("userName"));
输出 dongge;
cookie局限性
cookie虽然在持久保存客户端用户数据提供了方便,分担了服务器存储的负担。但是还有很多局限性的。
第一:每个特定的域名下最多生成20个cookie(根据不同的浏览器有所区别)。
1.IE6或更低版本最多20个cookie
2.IE7和之后的版本最多可以50个cookie。IE7最初也只能20个,之后因被升级不定后增加了。
3.Firefox最多50个cookie
4.Opera最多30个cookie
5.Safari和Chrome没有做硬性限制。
PS:为了更好的兼容性,所以按照最低的要求来,也就是最多不得超过20个cookie。当超过指定的 cookie时,浏览器会清理掉早期的cookie。IE和Opera会清理近期最少使用的cookie,Firefox会随机清理cookie。
第二:cookie的最大大约为4096字节(4k),为了更好的兼容性,一般不能超过4095字节即可。
第三:cookie存储在客户端的文本文件,所以特别重要和敏感的数据是不建议保存在cookie的。比如银行卡号,用户密码等。
Web存储
在比较高版本的浏览器,JavaScript提供了sessionStorage和localStorage
通过方法存储和获取
localStorage.setItem('name', '曾庆林');
alert(localStorage.getItem('name'));
通过属性存储和获取
localStorage.book = '曾庆林';
alert(localStorage.book);
删除存储
localStorage.removeItem('name');