封装cookie常用操作

最新推荐文章于 2023-12-21 16:06:15 发布

极客研究者

最新推荐文章于 2023-12-21 16:06:15 发布

阅读量353

点赞数

分类专栏：本地存储

本文链接：https://blog.csdn.net/qq_34550459/article/details/105943284

版权

本地存储专栏收录该内容

3 篇文章 0 订阅

订阅专栏

封装cookie常用操作:
cookieTool.js

//把写入cookie信息的实现代码进行封装
/*
name:cookie名称
value:cookie值
expires:有效天数
path:有效路径
domain:域
secure:安全性设置
name、value、 path、domain为字符串类型
expires为数值
secure:布尔值,表示是否加密传输cookie
*/

function setCookie(name, value, expires, path, domain, secure) {
    var today = new Date();
    today.setTime(today.getTime());
    if (expires) {
        expires = expires * 1000 * 60 * 60 * 24;
    }

    var expires_date = new Date(today.getTime() + (expires));//新建有效时间对象
    document.cookie = name + "=" + escape(value) +
        ((expires) ? ";expires=" + expires_date.toGMTString() : "") +
        ((path) ? ";path=" + path : "") +
        ((domain) ? ";domain=" + domain : "") +
        ((secure) ? ";secure=" + secure : "");

}

//读取指定cookie信息
//参数；cookie名称
//返回值；cookie值
function getCookie(name){

    var start=document.cookie.indexOf(name+"=");//获取与名称相同的字符串索引
    var len=start+name.length+1;//计算值的索引位置

    if((!start)&&(name!=(document.cookie.substring(0,name.length)))){//不存在,则返回null
        return null;
    }

    if(start==-1) return null;//如果没找到,则返回null
    var end=document.cookie.indexOf(";",len);//获取值后面分号的索引位置
    if(end==-1) end=document.cookie.length;//如果索引值为-1，设置为cookie字符串的长度

    return unescape(document.cookie.substring(len,end));//获取名称对应的截取值,并解码返回
}

//修改和删除cooie信息
// 修改cookie数据:只需要使用相同名称和新值重新设置该cookie值即可
// 删除某个cookie信息,只需要为该cookie设置一个已过期的expires值

//参数:
//name:cookie名称 path:所在路径 domian；所在域
function deleteCookie(name,path,domain){
    debugger;
    if(getCookie(name)) {
        document.cookie=name+"="+//如果名称存在,则清空
        ((path) ? ";path=" + path : "") + //如果存在路径,则加上
        ((domain) ? ";domain=" + domain : "")+//如果存在域,则加上
        ";expires=Thu, 01-Jan-1970 00:00:01 GMT";//设置有效期为过去时,即表示该cookie无效,将被浏览器清除
    }
}


//封装cookie操作
/*
既可以写入cookie信息,删除指定的cookie信息,同时也能读取指定名称的cookie值
还可以指定cookie的有效期、有效路径、作用域和安全性选项设置

在调用cookie函数时,仅指定name参数,表示读取指定名称的cookie值
如果指定的name和value这两个参数,则表示写入cookie数据,第三个参数指定传递选项设置
*/ 

//name:cookie名称 value:cookie值 以字符串形式传递
//options是一个对象,该对象包含多项信息；指定cookie信息的有效期、路径、作用域和安全性设置

function cookie(name,value,options){
    if(typeof value != 'undefined'){//如果第2个参数参数
        options=options||{};//初始化第3个参数,如果不存在则设置为空字符串
        if(value==null){//如果第2个参数为null,表示删除该cookie值
            value='';//清空值
            options.expires=-1;//设置失效时间
        }

        var expires='';
        //如果存在时间参数,且值类型为number,或者为具体时间,分别设置时间
        if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)){
            var date;
            if(typeof options.expires == 'number'){
                //设置时间格式,把天数转换为毫秒添加到时间对象中
                date=new Date();
                date.setTime(date.getTime()+(options.expires * 24 *60 *60 * 1000));
            }else{
                date=options.expires;//如果是时间格式,则直接传递时间参数
            }

            expires=";expires="+date.toGMTString();//设置有效期       
        }

        var path=options.path ? ';path='+options.path:'';//设置路径
        var domain=options.domain ? ';domain='+options.domain:'';//设置域
        var secure=options.secure?';secure='+options.secure:'';//设置安全措施,true则直接设置,否则为空
       //把所有字符串信息都存入数组,然后调用join()方法转换为字符串,并写入cookie值
       document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');
    }
    
    else{
        //如果第2个参数不存在的话,则表示读取cookie值
        var cookieValue=null;
        if(document.cookie && document.cookie !=''){//如果cookie信息存在且不为空
            var cookies=document.cookie.split(';');//切分cookie字符串为数组
            for(var i=0;i<cookies.length;i++){//遍历cookie信息
                var cookie=(cookies[i] || "").replace(/^\s+|\s+$/g,"");//清除两侧空格
                if(cookie.substring(0,name.length+1) == (name+ '=')){//匹配指定的cookie名称
                    cookieValue=decodeURIComponent(cookie.substring(name.length+1));
                    break;
                }
            }
        }
        return cookieValue;//返回查找的cookie值
    }
}

测试Demo01:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>读取cookie信息</title>
    <script src="cookieTool.js"></script>
    <script>
    window.addEventListener('load',function(){
      //读取同一路径下,未过期的cookie信息
    //   var password= getCookie("password");
    
     //删除同一路径下的cookie数据
     deleteCookie("password");
    });
    </script>
</head>
<body>
</body>
</html>

测试Demo02:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="cookieTool.js"></script>
    <script>
    window.addEventListener('load',function(){
        //测试封装的cookie()函数

        //写入cookie数据
        // cookie('user','miachel jaskson');

        // cookie('user2','samy',{
        //     expires:10,//有效期为0.1天
        //     path:'/',//整个站点有效
        //     domain:"127.0.0.1", //有效域名
        //     secure:false //不加密传输
        // });

        //读取cookie数据
        // console.log(cookie('user2'));
        // //删除cookie信息
        cookie('user',null)
        console.log(cookie('user'));
    });
    </script>
</head>
<body>
</body>
</html>

在浏览器中查看存储的cookie：
不同的浏览器放置的位置不同.

以chrome为例:
在这里插入图片描述
我们会发现cookie是以站点为单位进行存储的,数据已存储了,这样我们就可以根据需要设置cookie,以及读取cookie数据了。

在这里插入图片描述

极客研究者

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
封装cookie常用操作

封装cookie常用操作:cookieTool.js//把写入cookie信息的实现代码进行封装/*name:cookie名称value:cookie值expires:有效天数path:有效路径domain:域secure:安全性设置name、value、 path、domain为字符串类型expires为数值secure:布尔值,表示是否加密传输cookie*/fu...
复制链接

扫一扫