cookie 二：

本篇随笔从cookie的入门开始，介绍了cookie的设置获取和移除，还有一些小的应用案例：

一、设置cookie

<script>
    //设置cookie：
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie=name+'='+value+';path=/;expires='+oDate;
}else{
document.cookie=name+'='+value+';path=/;';
}
}
setCookie('zhangsan','100',3);
setCookie('lisi','200');

</script>

二、获取cookie:

<script>
    //设置cookie：
    function setCookie(name,value,iDay){
        if(iDay){
            var oDate=new Date();
            oDate.setDate(oDate.getDate()+3);
            document.cookie=name+'='+value+';path=/;expires='+oDate;
        }else{
            document.cookie=name+'='+value+';path=/;';
        }
    }
    setCookie('zhangsan','100',3);
    setCookie('lisi','200');
    function getCookie(name){
        var arr = document.cookie.split('; ');
        for(var i =0 ;i < arr.length; i++){
            var tmp = arr[i].split('=');
            if(name == tmp[0]){
                return tmp[1];
            }
        }
        return '';
    }
    alert(getCookie('lisi'));
</script>

三、移除cookie:

<script>
    //name：cookie名字,value:cookie 值; iDay: 过期时间
    //setCookie(name,value,iDay);
    function setCookie(name,value,iDay){
        if(iDay){
            var oDate = new Date();
            oDate.setDate(oDate.getDate() + iDay);
            document.cookie = name+'='+value+';path=/;expires=' + oDate;
        }else{
            document.cookie = name+'='+value+';path=/';
        }
    }

    setCookie('zhangsan','100',3);
    setCookie('lisi','200');

    //getCookie(name);
    //a=1; abc=123
    function getCookie(name){
        var arr = document.cookie.split('; ');
        for(var i =0 ;i < arr.length; i++){
            var tmp = arr[i].split('=');
            if(name == tmp[0]){
                return tmp[1];
            }
        }
        return '';
    }

    //removeCookie(name);
    function removeCookie(name){
        setCookie(name,'as',-1);
    }

    removeCookie('lisi');

</script>

四、小案例：
1.选项卡中，离开页面时停留在一模块，再次打开时，还是那个模块。

<style>
    #box {
        width: 400px;
        height: 300px;
        border: #000 1px solid;
        margin: 100px auto;
    }

    #box a {
        display: block;
        float:left;
        width: 100px;
        height: 39px;
        text-align:center;
        line-height: 39px;
        background:#ccc;
        color: #333;
        text-decoration:none;
        border-bottom: #333 1px solid;
    }

    #box a.active{
        background: #c00;
        color: #fff;
        width: 98px;
        border-left: #333 1px solid;
        border-right: #333 1px solid;
    }

    #box div{
        width: 400px;
        height: 260px;
        text-align:center;
        line-height:260px;
        font-size:50px;
        display:none;
    }
</style>
<script>
    function setCookie(name,value,iDay){
        if(iDay){
            var oDate = new Date();
            oDate.setDate(oDate.getDate()+iDay);
            document.cookie = name+'='+value+';path=/;expires='+oDate;
        }else{
            document.cookie=name+'='+value+';path=/';
        }
    }

    function getCookie(name){
        var arr = document.cookie.split('; ');
        for(var i = 0; i < arr.length; i++){
            var tmp = arr[i].split('=');
            if(name == tmp[0]){
                return tmp[1];
            }
        }
        return '';
    }
    window.onload = function(){
        var oBox = document.getElementById('box');
        var aBtn = oBox.getElementsByTagName('a');
        var aDiv = oBox.getElementsByTagName('div');
        //var index = 0;

        var index = getCookie('tabIndex');
        if(index){
            tab();
        }
        function tab(){
            for(var i = 0; i < aBtn.length; i++){
                aBtn[i].className = '';
                aDiv[i].style.display = 'none';
            }
            this.className = 'active';
            aDiv[index].style.display = 'block';
        }

        for(var i = 0; i < aBtn.length; i++){
            aBtn[i].index = i;
            aBtn[i].onclick = function(){
                index = this.index;
                tab();
                setCookie('tabIndex',this.index,10);
            }
        }
    }
</script>