JavaScript中的cookie

 

cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来像访问者电脑上存储数据

1.不同的浏览器存放的cookie位置不一样，也是不能通用的

2.cookie的存储是以域名形式进行区分的

3.cookie的数据可以设置名字的

4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样

5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来



cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

document.cookie = '名字=值';

如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间

document.cookie = '名称=值;expires=' + 字符串格式的时间;

日期设置

    var oDate = new Date();
    
    oDate.setDate( oDate.getDate() + 存放天数 );

当cookie存放一些特殊字符时，有时会出错，内容最好用编码存放，encodeURI

document.cookie = 'username='+ encodeURI('hello\n你好') +';expires=' + oDate.toGMTString()

调用时再解码decodeURI

alert(decodeURI(document.cookie));



cookie函数的封装

1. 设置cookie

    function setCookie(key, value, t) {
        var oDate = new Date();
        oDate.setDate( oDate.getDate() + t );
        document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
    }

    2.获取cookie    

    function getCookie(key){
      var arr1=document.cookie.split('; ');
      for(var i=0;i<arr1.length;i++){
          var arr2=arr1[i].split('=');
          if(arr2[0]==key){
              return decodeURI(arr2[1]);
          }
        }
    }

    3.移除cookie(设置一个过期时间)

    function removeCookie(key){
      setCookie(key,'',-1);
    }

cookie的简单应用

自动记录登录名

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        
        var oUsername=document.getElementById('username');
        var oLogin = document.getElementById('login');
        var oDel = document.getElementById('del');
        
        if ( getCookie('username') ) {
            oUsername.value = getCookie('username');
        }
        
        oLogin.onclick = function() {
            
            alert('登陆成功');
            setCookie('username', oUsername.value, 5);
            
        }
        
        oDel.onclick = function() {
            removeCookie('username');
            oUsername.value = '';
        }
        
    }
    
    function setCookie(key, value, t) {
        var oDate = new Date();
        oDate.setDate( oDate.getDate() + t );
        document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
    }
    
    function getCookie(key) {
        var arr1 = document.cookie.split('; ');
        for (var i=0; i<arr1.length; i++) {
            var arr2 = arr1[i].split('=');
            if ( arr2[0] == key ) {
                return decodeURI(arr2[1]);
            }
        }
    }
    
    function removeCookie(key) {
        setCookie(key, '', -1);
    }
    </script>
    </head>
    
    <body>
        <input type="text" id="username" />
        <input type="button" value="登陆" id="login" />
        <input type="button" value="删除" id="del" />
    </body>
    </html>

 

posted @ 2016-09-20 14:14  笑笑晓小姐  阅读(139)  评论(0)    收藏  举报