JS收藏——cookie

概念

页面用来保存信息。

例如：自动登录、记住用户名

特性

• 同一个域名共享一套cookie。

• 数量、大小有限（4k-10k）。

• 有过期时间

  
  

JS使用cookie

document.cookie

设置：

    名字 = 值   添加

expires = 时间  设置过期时间

实例1：

添加多个，也不会被后面的覆盖。

document.cookie = "user = Tim Chen";
document.cookie = "password = 123456";

alert(document.cookie);

实用Tips：

快速设置N天后

var oDate = new Date();

oDate.setDate ( oDate.getDate( ) + N )

实例2：

设置14天过期时间

var oDate = new Date();

oDate.setDate ( oDate.getDate( ) + 14 );

document.cookie = "user = Tim Chen; expires = " + oDate;

alert(document.cookie); 

封装函数

//设置
function setCookie(name, value, iDay){
    var oDate = new Date();
    oDate.setDate ( oDate.getDate( ) + iDay );

    document.cookie = name+'='+value+';expires='+oDate;
}

//读取
function getCookie(name){
    //cookie数据以;分割，所以将其作为分隔符
    var arr = document.cookie.split(';');

    for(var j = 0; j <arr.length; j++){
        //cookie的key和value是用=连接的
        var arr2 = arr[i].split('=');

        if(arr2[0]==name){
            return arr2[1];
        }
    }
    //如果找不到对应的数据，返回
    return "找不到cookie";
}

//删除
function removeCookie(name){
    //把过期时间设为昨天
    setCookie(name,1,-1);
}

记住上一次用户名

• 登录时：用户名存进cookie；

• 再次登录时，从cookie读取用户名

<form id= "fom1" action="#">
    用户名：<input type="text" name="user" /><br>
    密码：<input type="password" name="pass" /><br>
    <input type="submit">
</form>


var oForm = document.getElementById("fom1");
var oUser = document.getElementsByName("user");

oForm.onsubmit = function(){
    setCookie("user",oUser.value,14);
};

oUser.value = getCookie("user");