[JS] JS与Cookie

小生做web相关的比赛时记录，错误的地方恳请纠正，谢谢！

前言

Javascript是运行在客户端的脚本，不能够对Session进行操作，因为Session是运行在服务器端；
而cookie是运行在客户端，所以JS是可以操作cookie

JS与cookie

存值

cookie存储的内容：username,password

function savePassword(username,password,days) {
    var exp = new Date();
    //cookie有效期
    exp.setTime(exp.getTime()+ days*24*60*60*1000);
    //escape()字符串转义函数
    //expires保存时间
    document.cookie = username + "=" + escape(password) +";expires=" + exp.toGMTString();
}

取值

由username取password
方案一：

function getPasswordInCookie(username) {
	//创建正则表达式
    var reg = nnew RegExp("(^| )"+username+"=([^;]*)(;|$)");
    var attribute;
    //根据正则表达式在cookie中匹配
    if ( attribute= document.cookie.match(reg) ) {
    	//unescape()函数对 被escape()函数编码的字符串 进行解码
    	return unescape(attribute[1]);
    } else {
    	return null;
    }
}

方案二：

function getCookie(username) {
  var name = username + "=";
  var cookie = document.cookie.split(';');
  for(var i=0; i<cookie.length; i++) {
    var c = cookie[i].trim();
    if (c.indexOf(name)==0) 
    	return c.substring(name.length,c.length);
  }
  return "";
}

删除

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

jQuery与cookie

需要使用：jquery的cookie插件
这里使用cdn：http://www.bootcdn.cn/jquery-cookie/

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

存值

会话cookie

没有指明cookie有效期间，默认到用户关闭浏览器为止

$.cookie('key','value')

持久cookie

指明cookie有效时间

$.cookie('key','value',{expires : 7});

cookie路径参数

默认情况下，只有设置cookie的网页才能读取该cookie
如果想让一个页面读取另一个页面设置cookie，必须设置cookie的路径
cookie的路径用于设置能够读取cookie的顶级目录
将这个路径设置为网站的根目录，可以让所有网站都能互相读取cookie

$.cookie('key','value',{ expires:7,path:'/' });

取值

存在返回value，不存在返回null

$.cookie('key'); 

删除

$.cookie('key',null);

例子

用户登录时选择保存账号密码、自动登录

思路

1. 上次登录时
   用户选择保存账号密码(username,password保存至cookie)
   用户选择自动登录(autologin=1存至cookie)
   注：选择了自动登录，默认选择保存账号密码(上次登录时候JS端实现)
2. 再次登录时
   document加载完成，JS加载保存的username,password
   若autologin=1则自动触发表单提交事件(选择了保存)