HTML笔记03------cookie
新浪布局
初始布局代码：div.header+(div.container>(div.left+div.right))+div.footer
----------
.header{height:;background:;}
JavaScript焦点事件
docment.focus();
JS事件冒泡机制：当一个元素接收到事件的时候，会把它接收到的所有传播给它的父级，一直到顶层Window.事件。
阻止冒泡 ：当前要阻止冒泡的事件函数中调用 event.cancelBubble = true；
cookie ：存储数据
当用户访问了某个网站（网页）的时候，就可以通过cookie来向访问者电脑上存储数据
1.不同浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名的形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小
写法： document.cookie = "名字=值 ";expires=' +字符串格式的时
间';
日期时间转换为字符串-----》oDate.toGMTString();
通过document.cookie来获取网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie，他会把所有的cookie通过一个分号+空格的形式串联起来
cookie默认是临时存储，到浏览器关闭时，自动销毁
内容最好编码存放，encodeURI decodeURI
编码：encodeURI("")；
解码：decodeURI();
----------
如果长时间存放一个cookie，要同时设置一个过期时间
写法： expires =' '
设置： var oDate = new Date();
oDate.setDate(oDate.getDate +5);//5天之后被销毁
document.cookie = '名字=值;expires=" +oDate"';
封装------->设置cookie----》setCookie();
function setCookie(key,value, t) {
var oDate = new oDate();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '='+ value +';expires =' + oDate.toGMTString();
}
setCookie('sex','男'，10);
// 设置cookie sex=男， 10天后销毁
移除cookie----------> removeCookie('cookie名');
封装-------->获取任意cookie值----》getCookie();
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i =0,len = arr1.length;i<len;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr2[1]);
}
}
}
alert(getCookie('名字'));
cookie 应用
网站访问登录时，记住用户名和密码
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!--声明当前页面的编码集：charset=gdk,gb2312(中文编码),utf-8国际编码-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="Keywords" content="关键词,关键词"/>
<meta name="Description" content="描述"/>
<meta name="Author" content="天心阁主">
<title>JS练习---cookie</title>
<style>
</style>
<script>
window.onload = function () {
var oUser = document.getElementById('username'),
oPwd = document.getElementById('password'),
oLogin = document.getElementById('login'),
oDel = document.getElementById('del');
/**
* 登录事件
* 1.点击登录button时，alert('登录成功！');
* 2.获取cookie
* */
//判断cookie是否存储
if ( getCookie('username') ) {
oUsername.value = getCookie('username');
}
oLogin.onclick = function () {
alert('登录成功！');
setCookie('username',oUser.value,10)
oDel.onclick = function() {
removeCookie('username');
oUser.value = '';
}
//设置用户cookie
function setCookie(key,value, t) {
var oDate = new oDate();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '='+ value +';expires =' + oDate.toGMTString();
}
//获取用户登录的cookie
function getCookie(key){
var arr1 = document.cookie.split(';');
for(var i =0,len = arr1.length;i<len;i++){
var arr2 = arr1[i].split('=');
if(arr2[0] == key){
return decodeURI(arr2[1]);
}
}
}
alert(getCookie('名字'));
}
}
function removeCookie(key) {
setCookie(key, '', -1);
}
</script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
</head>
<body>
<div id="wrap">
用户：<input type="text" id="username">
密码：<input type="password" id="password">
<button id="login">登录</button>
<button id="del" style="background: chartreuse">去除</button>
</div>
</body>
</html>