cookie和它的封装

cookie是用来储存web页面的用户信息

由于HTTP是一种无状态的协议,服务器但从网络链接上时无法知道客户信息的。

这个时候服务器会给客户端(浏览器)颁发一个cookie,用来确认用户的信息。

获取 cookie 
 document.cookie
设置 cookie 
 document.cookie="name=value"

 cookie 的设置
  语法: document.cookie = 'key=value'
  一次只能设置一条

 cookie 设置的时候加上修饰信息
  语法: document.cookie = 'key=value; 修饰信息'
  修饰一个过期时间 => document.cookie = 'key=value;expires=时间对象'


 document.cookie 将以字符串的方式返回所有的 cookie
 类型格式: cookie1=value; cookie2=value; cookie3=value;
设置失效时间 默认失效时间(session)会话 

cookie的封装:

1.相同的部分   不做处理

2.不同的部分   使用参数进行表示

    // 获取
    function getCookie(key){
        // 'name1=孙悟空; name2=猪八戒; name3=沙悟净'
        // 1.转换为数组  分割字符串
        var arr=document.cookie.split("; ");
        // 2.遍历数组
        for(var i=0;i<arr.length;i++){
            // console.log(arr[i])
            var arrItem=arr[i].split("=");
            // console.log(arrItem);
            // 当数组的第0项和key相同时返回数组的第1项
            if(arrItem[0]===key){
                return arrItem[1]
            }
        }
    }
    // console.log(getCookie("name1"));
    // 设置
    function setCookie(key,value,time){
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+time);//过期时间 按天来计算
        document.cookie=`${key}=${value};expires=${oDate}`
    }
    // 删除  设置过期时间为过去的时间
    function removeCookie(key){
        setCookie(key,"",-1)
    }
    // 清空
    function clearCookie(){
        var arr=document.cookie.split("; ");
        for(var i=0;i<arr.length;i++){
            // console.log(arr[i])
            var arrItem=arr[i].split("=");
            // console.log(arrItem);
            setCookie(arrItem[0],"",-1)
        }
    }

cookie特点 

cookie 是基于域名存储的( 一个域名存储, 哪一个域名使用)
cookie 的存储有大小限制(4 KB 左右, => 50 条左右)
cookie 的存储数据格式 能是字符串格式的内容 key=value; key2=value'
cookie 存储是有时效性的 ,是会话级别的时效, 关闭浏览器自动删除 可以手动设置过期时间, 不管是否关闭浏览器, 都会计时
前后端传输 要 cookie 空间内有内容 在当前页面内发送的所有给后端的信息, 都会自动携带 cookie
前后端操作 ,可以依靠 js 来操作 后端可以依靠任何语言操作 cookie不同网站不能共享

name:一个唯一确定的cookie名称。通常cookie名称不区分大小写

value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码

domain:cookie对哪个域是有效的  域名 www.baidu.com

path:表示这个cookie影响到的路径,浏览器会根据这个配置项
向指定的域中匹配的路径发送cookie

expires:失效时间  表示cookie何时被删除(停止向服务器发送cookie)
时间值是GMT格式的  设置过去的时间,直接删除  默认为会话缓存(关闭浏览器删除)

max-age:与expires效果相同  max-age优先级高于expires

httpOnly:告知浏览器不允许通过脚本document.cookie去更改这个值
同样这个值在document.cookie中也不可见。但在http请求者仍然会携带
这个cookie。注意这个值虽然在脚本中不可获取,但仍然在浏览器
安装目录中以文件形式存在。  这项设置通常在服务器端设置。

secure:安全标志,指定后,只有在使用SSL链接时才能发送到服务器,
如果是http链接则不会

  • 12
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当涉及到读写 Cookie 时,可以使用以下方法进行封装: 1. 设置 Cookie:使用`document.cookie`属性来设置 Cookie。通过传递参数来设置 Cookie 的名称、值以及其他可选的属性(例如过期时间、路径等)。封装一个函数如下: ```javascript function setCookie(name, value, days, path) { let expires = ""; if (days) { let date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=" + (path || "/"); } ``` 使用示例: ```javascript setCookie("username", "John Doe", 7); // 设置一个名为 "username" 的 Cookie,有效期为7天 ``` 2. 获取 Cookie:使用`document.cookie`属性来获取所有的 Cookie,然后解析出指定名称的 Cookie 值。封装一个函数如下: ```javascript function getCookie(name) { let cookieArr = document.cookie.split("; "); for (let i = 0; i < cookieArr.length; i++) { let cookiePair = cookieArr[i].split("="); if (name === cookiePair[0]) { return decodeURIComponent(cookiePair[1]); } } return null; } ``` 使用示例: ```javascript let username = getCookie("username"); // 获取名为 "username" 的 Cookie 值 ``` 3. 删除 Cookie:通过设置 Cookie 的过期时间为过去的时间来删除 Cookie封装一个函数如下: ```javascript function deleteCookie(name) { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; } ``` 使用示例: ```javascript deleteCookie("username"); // 删除名为 "username" 的 Cookie ``` 这样,你可以封装这些函数,以便在需要的时候方便地操作 Cookie

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值