HTML笔记03------cookie

616 0 0

作者:天心*梦儿飞*

新浪布局

初始布局代码：
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('名字'));

网站访问登录时，记住用户名和密码

代码如下：

 <!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>

内容来源于网络如有侵权请私信删除

标签： javascript 技术文章开发

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

HTML笔记03------cookie