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>