美文网首页
js原生cookie封装函数

js原生cookie封装函数

作者: CoTe白夜 | 来源:发表于2017-08-02 20:19 被阅读0次

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

    相关文章

      网友评论

          本文标题:js原生cookie封装函数

          本文链接:https://www.haomeiwen.com/subject/lgvylxtx.html