js cookie的使用及封装加小案例

最新推荐文章于 2023-04-10 18:02:52 发布

划水的乌贼

最新推荐文章于 2023-04-10 18:02:52 发布

阅读量222

点赞数

分类专栏： js 文章标签： java session js cookie web

本文链接：https://blog.csdn.net/dergfg/article/details/113766647

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

保持对代码的热爱并保持怀疑态度

什么是cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

当用户访问 web 页面时，他的名字可以记录在 cookie 中。

在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

cookie的查看

f12调出控制台，我这里暂时没有存储数据，如果存储了可以在这里看到。
在这里插入图片描述

cookie的特点

在浏览器缓存中
只能存文本（字符）
大小限制：4K~
条数限制：50条~
时间限制：默认时间，会话级（关闭浏览器自动删除），可以设置指定时间
不允许跨域：同源策略（同端口，同域名，同协议），浏览器，路径
一般情况下：cookie需要在服务器环境下使用

cookie的语法(document.cookie)

 cookie的值的要求：
     必须是：名字=值
     必须是字符，所以意味传入的时候是对象的时候要用JSON.stringify()转为字符型数据
     名字和值中不允许出现特殊字符
     一行代码只能设置一条cookie
     第一组【名字=值】表示要存的cookie的名字和值
     之后使用分号;隔开的，表示当前这条cookie的描述
     路径，时间，域名地址
	默认路径默认时间默认服务器
	指定路径用path     path=/   为根目录
	指定时间用expries     配合日期对象使用
	如果不设置expries，默认为会话级别 session,会话级就是当你关掉浏览器即啥也没了

   var d=new Date();  //创建日期对象
    d.setDate(d.getDate()-3);
    document.cookie=("a=60;path=/;expires="+d); //三天以后

在这里插入图片描述

删除这个cookies就是让cookie过期 ，日期为过去的日期
    // 删除：让这个cookie过期
    var d = new Date;
    d.setDate(d.getDate()-1);
   document.cookie = "a=60;expires="+d;

cookie的封装

    //cookie增的封装
    function setcookie(key,val,ops){
        ops=ops || {};
        //处理路径  三目表达式简写
        var p=ops.path ?";paht="+ops.path : "";  

        // 处理有效期
        var strD="";
        if(ops.expires){
            var d =new Date();   //创建日期对象
            d.setDate=(d.getDate()+ops.expires);
            strD=";expires="+d;
            console.log(strD);
        }
        document.cookie=`${key}=${val}${p}${strD}`  //拼接
    }
    //删除  原理是过去的日期对象
    function rcookie(key){
        setcookie(key,null,{
            expires:-1
        })

    }
    //测试是否新增
    setcookie("a",60,{
        path:"/",
        expires:10
        
    })


    //读取
    function getcookie(key){
        // 获取所有cookie，并使用【; 】第一次分割，区分出每组cookie
        var cookie=document.cookie.split(";");
        // 遍历所有cookie
        for(var i=0;i<cookie.length;i++){
              // 3. 并使用【=】第二次分割，区分出每组cookie的名字和值
            // 4. 根据cookie的名字判断是否相等，取得对应的cookie的值
            if(cookie[i].split("=")[0]===key){
                return cookie[i].split("=")[1];
            }
        }
        // 以上代码执行完毕后，如果没有找到对应的cookie，那么返回空字符
        return "";
    }
    //测试能否取到
    console.log(getcookie("a"));

记住账号用户名的登录注册

布局比较简陋，甚至说毫无布局，但是这不是重点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号:<input type="text" name="" id="tet1"><br>
    密码:<input type="text" name="" id="tet2"><br>
    <label for="check">记住密码</label>
    <input type="checkbox" name="" id="check"><br>
    <input type="button" name="" id="btn">
</body>
<script src="cookie.js"></script>   //引入cookie的的封装文件
<script>
 var btn=document.getElementById("btn");
 var tet1=document.getElementById("tet1");
 var tet2=document.getElementById("tet2");
 var check=document.getElementById("check");

    btn.onclick=function(){
        if(check.checked){    //判断复选框是否被选中
        var obj={    //定义一个对象用来存储登录名和密码
            un:tet1.value,
            pas:tet2.value
        }
        setcookie("msgs",JSON.stringify(obj));//将对象转成字符后，存入cookie
    }
}

var use = getcookie("msgs") ? JSON.parse(getcookie("msgs")) : {};
console.log(use);

// 根据读取到的数据，渲染到输入框
tet1.value = use.un ? use.un : "";
tet2.value = use.pas ? use.pas : "";
</script>
</html>

在这里插入图片描述

划水的乌贼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js cookie的使用及封装加小案例

保持对代码的热爱并保持怀疑态度什么是cookie？Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。cookie的查看f12调出控制台，我这里暂时没有存储数据，如果存储了可以在这里看到。cookie的
复制链接

扫一扫