js原生cookie封装函数

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函数,对于高级开发来说肯定是不够用的，但是目前按小夜的技术水平来说，这个就够用了哦，欢迎大家批评指正，学习代码之路永无止境~！