Ajax-cookie用法及封装

2022-12-05 127

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Ajax-cookie用法及封装

1.什么是cookie

cookie是一种会话跟踪技术。

它是客户端使用的一种技术服务端使用的会话跟踪技术是session。

2.cookie 的作用：

将网页中的数据保存到浏览器当中

3.cookie的生命周期

默认生命周期是一次会话，浏览器关闭之后数据就会被清除

4.如何设置cookie的生命周期

通过express设置过期时间，并且过期时间没有过期，那么下次打开浏览器数据还是存在。如果已经过期了，那么会立即删除保存的数据。

 var date = new Date();
 date.setDate(date.getDate()+1);
 // 将生命周期设为明天
 document.cookie = "age = 33;express="+date.toGMTString()+";";

5.cookie注意点

5.1 cookie默认不会保存任何的数据

// 保存数据的方式
document.cookie = "age = 33;";

5.2 cookie不能一次性设置多条数据，想要保存多条数据，只能一条一条的设置

document.cookie="name=dxw,age=18;";
// 该设置方法是错误的
document.cookie="name = dxw;";
document.cookie="age = 18;";
// 只能分条设置

5.3 cookie保存数据有大小和个数的限制

个数限制：20~50 大小限制：4KB左右

6.cookie作用范围

6.1 路径问题

同一个浏览器的同一个路径下访问（同一个文件夹）

如何在上一级路径中也能访问？需要添加以下代码： path=/

document.cookie="name = dxw;path=/;";

6.2 域名问题

例：假设我们在www.123.com下面保存了一个cookie，那么我们在www.123.com中是无法访问的。

如果想在www.123.com中也能访问，那么我们需要再添加一句代码domain=123.com。

  document.cookie="name = dxw;path=/;doamin=123.com";
  // 这是保存cookie的完整形式

7.cookie封装

7.1 获取方法封装

//    这是没有封装cookie的情况：
    <script>
     window.onload=function (ev) {
         document.cookie = "age = 18;";
     }
 </script>
 // 无封装

这是没有封装的情况：

// Cookie封装函数：
    <script>
        window.onload=function (ev) {
            // document.cookie = "age = 18;";
            // 调用Cookie封装函数
            addCookie("name","dxw","1","/","127.0.1");
            function addCookie(key, value, day, path, domain){
                // 1.处理默认保存的路径
                var index = window.location.pathname.lastIndexOf("/")
                var currentPath = window.location.pathname.slice(0, index);
                path = path || currentPath;
                // 2.处理默认保存的domain
                domain = domain || document.domain;
                // 3.处理默认的过期时间
                if(!day){
                    document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
                }else{
                    var date = new Date();
                    date.setDate(date.getDate() + 1);
                    document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
                }
            }
        }
    </script>

封装cookie函数成功，我们可以看到这里的路径，过期时间，Domain已被修改！

8.封装进阶———Cookie获取和删除方法封装

首先获取cookie： console.log(document.cookie); 可以看到cookie被打印到控制台了。

2. 如何取出每一条cookie？

这里可以用";"分割 var res = document.cookie.split(";")然后打印到控制台console.log(res);我们看看效果。

得到一个数组，那么接下来只需要遍历这个数组拿到每一条cookie。

var res= document.cookie.split(";");
 for(var i = 0; i < res.length; i++){
       console.log(res[i]);
    }

3.如何拿到key？

var res= document.cookie.split(";");
 for(var i = 0; i < res.length; i++){
    var temp = res[i].split("=");
    if(temp[0] === "age") {
    console.log(temp[1]);
    }
    }

通过上面方法获取到了指定cookie的值。

接下来封装cookie获取方法

            function getCookie(key){
                // console.log(document.cookie);
                var res= document.cookie.split(";");
                // console.log(res);
                for(var i = 0; i < res.length; i++){
                    // console.log(res[i]);
                    var temp =res[i].split("=");
                    if(temp[0].trim() === key){
                        return temp[1];
                    }
                }
            }

7.2 删除方法封装

            function delCookie(key, path) {
                addCookie(key, getCookie(key), -1, path);
            }
            // 调用以下此方法就ok啦
             delCookie("name", "/");