web9（cookie）

最新推荐文章于 2023-02-05 14:02:39 发布

蒙蒙小公举

最新推荐文章于 2023-02-05 14:02:39 发布

阅读量541

点赞数

分类专栏：前端文章标签： cookie

本文链接：https://blog.csdn.net/qq_44102678/article/details/104546505

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

基础知识

	Client	Offset	scroll
尺寸	元素可以显示内容的区域（元素的可视区域）	元素除了外边距之外的尺寸。	元素的内容实际占用的尺寸（新浏览器有最小值是client范围）
位置	取元素左、上边框的宽度	取元素相对于定位参照元素的偏移值。	取元素内容因为滚动条而被超出的部分的尺寸。

例如：
ClientX,ClientY
OffsetX,OffectY
scrollX,scrollY

Cookie

定义: cookie是浏览器的本地存储，浏览器会以文本文件的方式来存储数据。 cookie中的数据本地es和远程后台程序都可以操作的。
特点：
1、存储数据有长度限制。
2、前后台都可用。
3、存储和读取速度较慢。
4、数据只能设置，无法主动移除，只能通过设置过期时间的方式来移除数据。
cookie判断名称相同的标准是：
name相同、域名相同、路径相同

本地存储

h5本地存储： localStorage、sessionStorage（两者属于h5新增的）
和cookie的不同之处：
1、cookie是本地和后台都可以访问操作的，而Storage仅仅本地可以操作，后台无法读取操作。
2、存储的数据可以比cookie大很多。
3、读取写入的速度比cookie快。
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，
常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);


对于需要和服务器传输的数据，或将来要传输到服务器的数据。
必须做编码，得到编码的数据后需要解码后再使用
encodeURIComponent(txt) 编码
decodeURIComponent(txt)  解码

和服务器传输的经常是json（数组或对象）数据，需要转化
JSON.parse(txt)  将字符串（格式化的字符串）转化为json。
JSON.stringify(json)  将json转化为字符串用来保存或传输

cookie或Storage存储的数据只能是字符串形式。

登陆验证案例

cookie.js

//对于需要和服务器传输的数据，或将来要传输到服务器的数据。
// 必须做编码，得到编码的数据后需要解码后再使用
// encodeURIComponent(txt) 编码
// decodeURIComponent(txt)  解码
var cookie = {
    set:function (name,value,expires,path,domain) {
        // 过期时间是以小时为单位
        //var name = String(name);
        // var value = String(value);
        var name = encodeURIComponent(name);
        var value = encodeURIComponent(value);
        if(name){
            var txt = name +'='+value;
            if(!isNaN(expires)){
                var date = new Date();
                //现在改为过期时间以分钟为单位
                date.setMinutes(date.getMinutes()+expires*1);
                txt += '; expires=' + date.toGMTString();
            }
            if(path){
                txt += '; path=' + path
            }
            if(domain){
                txt += '; domain=' + domain
            }
            document.cookie = txt;
        }
    },
    get:function (name) {
        // var name = String(name);
        var name = encodeURIComponent(name);
        var result = '';
        if(name){
            // 'a=1; b=2; c=3'
            var txt = document.cookie;
            var arr = txt.split('; ');
            for(var i=0;i<arr.length;i++){
                var subArr = arr[i].split('=');
                if(subArr[0] == name){
                    return decodeURIComponent(subArr[1]);
                }
            }
        }
        return result;
    }
};

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
</head>
<body>
<FORM action="index.html">
    用户名：<input name="uid" type="text" ><br>
    密码: <input type="password" name="pwd" style="position:relative;left:22px"><br>
            <button type="submit">登陆</button>
</FORM>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>

<script src="js/cookie.js"></script>
<script>
    // document.write(
    //     location.search
    // )
    //字符串截取从第二字符开始截取，一直截取到末尾
    var search = location.search.slice(1);

    var arr = search.split('&');
    var uid = get('uid');
    var pwd = get('pwd');
    //第一次登陆
    if(uid =='abc'&& pwd =='123'){
        cookie.set('logined','true',1);
    }else{
        //表示登陆过
        if(cookie.get('logined')){
            cookie.set('logined','true',1);
        //没登录过
        }else{
            alert('登陆超时');
            //页面跳转
            location = 'login.html'
        }
    }

    function get(name) {
        for (var i=0;i<arr.length;i++){
            var subArr = arr[i].split('=');
            if(subArr[0]==name){
                return subArr[1];
            }
        }
    }
</script>
</body>
</html>

运行截图
在这里插入图片描述
设置时在一分钟内连续刷新登陆后的index.html页面没有问题。
但是在一分钟后或者删除cookie
那么当再次刷新时

就会显示

画布标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布</title>
    <style>

    </style>
</head>
<body>
<canvas width="500" height="500" id="huabu"></canvas>
<script>

    var huabu = document.getElementById('huabu');
    var bi = huabu.getContext('2d');
    bi.translate(250,250);
    var img = new Image();
    img.src = 'images/zhaosi.png';

    setInterval(doit,13);

    function doit() {
        //先做擦除工作
        bi.clearRect(-250,-250,500,500);
        bi.fillStyle = 'black';
        //开始画一个正方形
        bi.fillRect(-250,-250,500,500);

        bi.fillStyle = '#dcdcdc';
        //再画一个圆形外框(前提：开路径，关路径)
        bi.beginPath();
        bi.arc(0,0,250,0,Math.PI*2);
        bi.fill();
        bi.closePath();

		//开一个渐变色
        var jbs = bi.createRadialGradient(0,0,10,0,0,240);
        jbs.addColorStop(0,'white');
        jbs.addColorStop(1,'yellow');
        bi.fillStyle = jbs;
        //再画一个原型里的圆盘(前提：开路径，关路径)
        bi.beginPath();
        bi.arc(0,0,240,0,Math.PI*2);
        bi.fill();
        bi.closePath();
        
		//在画一组表的指针(首先画线的颜色)
        bi.fillStyle = 'black';
        bi.textAlign = 'center';
        bi.textBaseline = 'middle';
        //调大字体
        bi.font="30px Arial";
        //再画线条(线条2个像素)
        for (var i=0;i<60;i++){
            bi.rotate(Math.PI/30*i);
            if(i%5 == 0){
                if(i%15 ==0){
                	//一刻钟
                    bi.fillRect(-2,-240,4,20);
                }else{
                	//每个小时
                    bi.fillRect(-1,-240,2,20);
                }
                //重新映射画布上的 (0,-200) 位置。
                bi.translate(0,-200);
                //首先旋转当前绘图
                bi.rotate(-Math.PI/30*i);
                //写数字
                bi.fillText(i==0?12:i/5,0,0);
                //首先旋转当前绘图
                bi.rotate(Math.PI/30*i);
                //重新映射画布上的 (0,200) 位置。
                bi.translate(0,200);
            }else{
                bi.fillRect(-1,-240,2,10);
            }
            bi.rotate(-Math.PI/30*i);
        }

        var date = new Date();

        var hh = date.getTime();
        hh = hh/1000/60/60%12+8;
        bi.rotate(Math.PI*hh/6);
        bi.fillStyle = '#666666';
        bi.fillRect(-4,-160,8,190);
        bi.rotate(-Math.PI*hh/6);

        var mm = date.getTime();
        mm = mm/1000/60%60;
        bi.rotate(Math.PI*mm/30);
        bi.fillStyle = '#666666';
        bi.fillRect(-3,-180,6,220);
        bi.rotate(-Math.PI*mm/30);

        var ss = date.getTime();
        ss = ss/1000%60;
        bi.rotate(Math.PI*ss/30);
        bi.fillStyle = 'red';
        bi.beginPath();
        bi.moveTo(0,-220);
        bi.lineTo(-3,30);
        bi.lineTo(3,30);
        bi.lineTo(0,-220);
        bi.fill();
        bi.closePath();
        bi.drawImage(img,-30,-180,60,100);
        bi.rotate(-Math.PI*ss/30);

        bi.beginPath();
        bi.fillStyle = 'green';
        bi.arc(0,0,10,0,Math.PI*2);
        bi.fill()
        bi.closePath();
    }

</script>
</body>
</html>

在这里插入图片描述

表单及按键事件

按键事件中keypress是高级事件，触发的条件是有字符输出。
按键事件的触发顺序是按下（onkeydown），keypress，弹起（onkeyup），字符是在keypress，弹起之间完成输出
阻止字符输出，必须在按下，keypress这两个事件中阻止。

表单的本地验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的本地验证</title>
    
</head>
<body>
<!--autocomplete="off"-->表示当鼠标进入输入框中，没有下拉提示
<form>
    用户名：<input type="text" name="uid" autocomplete="off"><span></span><br>
    密码：<input type="password" name="pwd"><span></span><br>
    <button type="submit">提交</button>
</form>

<script>
    var form = document.forms[0];

    form.onsubmit = function (e) {
        var key = true;
        if(form.uid.value.length <6){
            key = false;
        }
        if(form.pwd.value.length <8){
            key = false;
        }

        return key;
    };

    form.uid.onfocus = function () {
        // 当函数是由事件触发调用的，那么this表示触发事件的元素
        var tips = this.nextElementSibling;
        tips.innerHTML = '字母为首的字母数字和下划线6-18位';
        tips.style.color = 'black';
    }
    form.uid.onblur = function () {
        var tips = this.nextElementSibling;
        var txt = this.value;
        if(!txt){
            tips.innerHTML = '';
        }else{
            if(/^[a-z][a-z0-9_]{5,17}$/i.test(txt)){
                tips.innerHTML = '正确';
                tips.style.color = 'green';
            }else{
                tips.innerHTML = '错误';
                tips.style.color = 'red';
            }
        }
    }


</script>
</body>
</html>

效果图
在这里插入图片描述

蒙蒙小公举

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web9（cookie）

基础知识ClientOffsetscroll尺寸元素可以显示内容的区域（元素的可视区域）元素除了外边距之外的尺寸。元素的内容实际占用的尺寸（新浏览器有最小值是client范围）位置取元素左、上边框的宽度取元素相对于定位参照元素的偏移值。取元素内容因为滚动条而被超出的部分的尺寸。例如：ClientX,ClientYOffsetX,OffectY...
复制链接

扫一扫