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>