什么是cookie
用来保存页面信息的，如用户名、密码
cookie的特性：同一个网站中所有的页面共享一套cookie；数量、大小限制；过期时间
js中使用cookie：document.cookie
如何设置cookie？
在js中，使用document.cookie = "键=值"即可，但是这种方式设置的cookie由于没有添加过期时间，所以关闭浏览器，cookie就丢失，我们要在后边继续加上expires=时间设置上国旗时间即可.
// 获取系统当前时间
var oDate = new Date();
// 设置距离当前时间多少天后cookit过期
oDate.setDate(oDate.getDate() + 30);
// 设置cookie及过期时间
document.cookie = "userName=hello;expires=" + oDate;
document.cookie = "password=123456;expires=" + oDate;
alert(document.cookie);
效果图：
cookie
如何从cookie中取值
示例：将用户名密码写入
div {
width: 500px;
height: 500px;
margin: 0 auto;
}
#userName {
display: block;
width: 200px;
height: 30px;
margin: 0 auto;
}
#password {
display: block;
width: 200px;
height: 30px;
margin: 0 auto;
}
#save {
display: block;
width: 100px;
height: 20px;
margin: 0 auto;
}
#cokie {
display: block;
width: 100px;
height: 20px;
margin: 0 auto;
}
window.onload = function () {
var oBtn = document.getElementById('save');
var oBtn1 = document.getElementById('cokie');
var name ;
var pass ;
oBtn.onclick = function () {
name = document.getElementById('userName').value;
pass = document.getElementById('password').value;
var oDate = new Date();
oDate.setDate(oDate.getDate() + 30);
// 写入cookie
document.cookie = "userName=" + name + "; expires=" + oDate;
document.cookie = "password=" + pass + "; expires=" + oDate;
}
oBtn1.onclick = function () {
var oCookie = document.cookie.split('; ');
for (var i = 0; i < oCookie.length; i++) {
var temp = oCookie[i].split('=');
if (i == 1) {
document.getElementById('userName').value = temp[1];
};
if (i == 0) {
document.getElementById('password').value = temp[1];
};
};
}
}
网友评论