原生js--cookie

Posted 2020-09-19

 

原文：http://www.cnblogs.com/yufann/p/JS-Cookie.html

原生JS--COOKIE:

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

3.设置cookie:(本地下测试cookie要在FF下面测试,IE,Chrom会把cookie去掉);
  --格式:名字=值(多条数据通过‘; ‘(即分号和空格) 来分开)
  --不会覆盖document.cookie="user=yufan";document.cookie="pass=123456";
  --过期时间:expires=时间
  --COOKIE与日期对象共同使用,设置过期时间
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+14);    //设置获取的日期,并不是系统日期
    document.cookie="user=yufan; expires="+oDate; //这样设置的这个cookie将在14天后过期

4.将设置cookie封装成一个函数:
    function setCookie(name,value,myDay){
      var oDate=new Date();
      oDate.setDate(oDate.getDate()+myDay);
      document.cookie=name+‘=‘+value+‘; expires=‘+oDate;
    }
    setCookie(‘username‘,‘yufan‘,25);
    setCookie(‘pass‘,‘123456‘,14);

5.读取cookie:对获取的document.cookie进行字符串分割
  读取cookie封装成一个函数:
    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 ‘‘;
    }
  alert(getCookie(username));

6.删除cookie:时间设置为已经过期的时间,系统自然会删除
  function removeCookie(name){
    setCookie(name,1,-1);
  }
  removeCookie(username,1,-1);

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

 1 HTML代码:
 2 <div id="cookie">
 3   <form id="form1" action="">
 4       用户名:<input type="text" name="username" value="">
 5       密码:<input type="password" name="password" value="">
 6       <input type="submit" name="" value="登录">
 7   </form>
 8 </div>
 9 
10 JS代码:
11 <script type="text/javascript">
12     //cookie记住用户名,密码
13    window.onload=function(){
14       var oForm=document.getElementById(‘form1‘);
15       var username=document.getElementsByName(‘username‘)[0];
16       var pass=document.getElementsByName(‘password‘)[0];
17       oForm.onsubmit=function(){
18         setCookie(‘username‘,username.value,25);
19         setCookie(‘pass‘,pass.value,25);
20       }
21       username.value=getCookie(‘username‘);
22       pass.value=getCookie(‘pass‘);
23 
24       function setCookie(name,value,myDay){
25        var oDate=new Date();
26        oDate.setDate(oDate.getDate()+myDay);
27        document.cookie=name+‘=‘+value+‘; expires=‘+oDate;
28       }
29 
30     function getCookie(name){
31       //document.cookie获取当前网站的所有cookie
32       var arr=document.cookie.split(‘; ‘);
33       for(var i=0;i<arr.length;i++){
34         var arr1=arr[i].split(‘=‘);
35         if(arr1[0]==name){
36           return arr1[1];
37         }
38       }
39       return ‘‘;
40     }
41 
42 
43    }
44 </script>