码迷,mamicode.com
首页 > Web开发 > 详细

原生JS 的cookie和jq的cookie,

时间:2017-04-10 19:39:22      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:特性   bsp   写入   window   nload   共享   onload   tco   用户   

COOKIE基础及应用:
1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名
2.COOKIE的特性:
  --同一个网站中,所有的页面共享同一套cookie
  --数量,大小有限(4k-10k,不能用来存大的内容)
  --过期时间

 

 

Jquery写入cookie

    $.cookie("this-cookie","this-value",{
    expires:10,//有效日期
    path:"/",//cookie的路 径
    domanin:    //cookie的域名
    secure:true //true,cookie的传输会要求一个安全协议,否则反之
   });

Jquery读取cookie

     $.cookie("this-cookie")

Jquery删除cookie

    $.cookie("this-cookie",null)

 

原生写cookie

示例:记住用户登录的用户名和密码
    方法:可以在用户第一次登录时用cookie记住登录的用户名和密码,
           下次再打开页面时用户名和密码就自动出现在表单里面
      --提交时:记住用户名
      --window.onload:读取用户名

 

HTML代码:
<div id="cookie">
  <form id="form1" action="">
      用户名:<input type="text" name="username" value="">
      密码:<input type="password" name="password" value="">
      <input type="submit" name="" value="登录">
  </form>
</div>

JS代码:
<script type="text/javascript">
    //cookie记住用户名,密码
   window.onload=function(){
      var oForm=document.getElementById(‘form1‘);
      var username=document.getElementsByName(‘username‘)[0];
      var pass=document.getElementsByName(‘password‘)[0];
      oForm.onsubmit=function(){
        setCookie(‘username‘,username.value,25);
        setCookie(‘pass‘,pass.value,25);
      }
      username.value=getCookie(‘username‘);
      pass.value=getCookie(‘pass‘);

      function setCookie(name,value,myDay){
       var oDate=new Date();
       oDate.setDate(oDate.getDate()+myDay);
       document.cookie=name+‘=‘+value+‘; expires=‘+oDate;
      }

    function getCookie(name){
      //document.cookie获取当前网站的所有cookie
      var arr=document.cookie.split(‘; ‘);
      for(var i=0;i<arr.length;i++){
        var arr1=arr[i].split(‘=‘);
        if(arr1[0]==name){
          return arr1[1];
        }
      }
      return ‘‘;
    }


   }
</script>

  

 

原生JS 的cookie和jq的cookie,

标签:特性   bsp   写入   window   nload   共享   onload   tco   用户   

原文地址:http://www.cnblogs.com/shuaishuaidejun/p/6690265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!