Cookie是什么(还有session)?
- cookie 和 session 都是用来储存一些 浏览器用户的信息, 举个例子— 当用户登陆你的网站,在登陆页面(这个文件为login.html ) 登陆成功后需要跳转到首页(index.html) ,然后在首页加载你的个人信息
- 那么如何把之前登陆页面的信息传递到首页去呢,这里就用cookie或者session存起来,然后再把这个信息在首页index.html显示,只要用户访问的是这个网站,那么存在这里面的信息都可以用到。
- 也可以理解成这两个是一个小数据库,然后可以在本网站的如何一个页面储存信息或者读取信息,来实现数据的交互。
前期接触H5的码友在接触cookie的时候可能会有茫然,而网上百度的都是JQ引入封装好的cookie方法,确实JQ是特别方便的,但是这给一些刚刚学JS同学造成困难,那么我们如何利用JS的知识去设置浏览器cookie呢?
- 想研究JS原生的码友可以看下小夜自己封装的关于cookie设置,删除,和获取的方法,而现在还不会用JQ的码友可以将下面的代码复制下来直接使用。
//设置Cookie
function setCookie(name,value,lostTime,path) {
//首先判断用户传入参数的个数,至少传入2个参数
if(arguments.length==2){
document.cookie=name+"="+value;//直接设置
}
else if(arguments.length==3){
varifLp=typeof(arguments[2]);//需要判断用户输入的第三个参数类型
if(ifLp=="number"){
var Cookietime=newDate();
Cookietime.setDate(Cookietime.getDate()+lostTime);
document.cookie=name+'='+value+';expires='+Cookietime;//设置自定义时间的Cookie
}
else{document.cookie=name+"="+value+";path="+arguments[2];//设置自定义地址的Cookie}
}
}
else{
varCookietime=newDate();
Cookietime.setDate(Cookietime.getDate()+lostTime);
document.cookie=name+'='+value+';expires='+Cookietime+";path="+path;//设置全部自定义属性的Cookie
}
}
//获取Cookie
function getCookie(name) {
vararr=document.cookie.split('; ');
for(vari=0;i
vararr2=arr[i].split('=');
if(arr2[0] == name ){return arr2[1];}
}
return'';
}
//删除Cookie
function removeCookie(name,path) {
if(path){
setCookie(name,1,-1,path);
}else{
setCookie(name,1,-1);
}
}
1. 设置cookie
在引入上面代码的前提下:
setCookie("userName","xiaoye",0,"/");
函数接受四个参数:
- 第一参数:必填,设置cookie的名称
- 第二参数:必填,设置改名称下cookie的值(内容)
- 第三参数:选填,设置cookie过期的时间,不填或者填0都为默认,默认浏览器关闭时移除
- 第四参数:选填,设置cookie的路径。(对于初学者可先放一边)
在只天三个参数的情况下,代码会自动判断所写第三个参数的类型。
2. 获取cookie
所以说设置了cookie要干嘛,就是在其他页面需要的时候快速调用。
getCookie("userName");
获取参数没搞什么花样,就是传入cookie的名称即可返回改cookie的值(内容)
3. 删除cookie
removeCookie("userName","/");
所以删除cookie可以接受一到两个参数,路径如果之前没有设置可以不用传入。
好了,就是这些了,这是小夜用原生js自己封装起来的cookie函数,对于高级开发来说肯定是不够用的,但是目前按小夜的技术水平来说,这个就够用了哦,欢迎大家批评指正,学习代码之路永无止境~!