欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML笔记03------cookie

程序员文章站 2022-03-31 12:05:57
新浪布局 初始布局代码: .header{height:;background:;} JavaScript焦点事件 docment.focus(); JS事件冒泡机制:当一个元素接收到事件的时候,会把它接收到的所有传播给它的父级,一直到顶层Window.事件。 阻止冒泡 :当前要阻止冒泡的事件函数中 ......

新浪布局

初始布局代码:
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>