cookie的认识使用以及封装

花落若№相随

已于 2023-03-14 20:56:25 修改

阅读量422

点赞数 4

文章标签：前端服务器 servlet javascript ecmascript

于 2023-03-14 20:48:35 首次发布

本文链接：https://blog.csdn.net/weixin_52544526/article/details/129537880

版权

1.什么是cookie？

2.使用 JavaScript 创建与读取Cookie

3. cookie的封装

1.什么是cookie？

Cookie 用于存储 web 页面的用户信息。

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

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

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

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

浏览器中百度所存储的cookie信息

2.使用 JavaScript 创建与读取Cookie

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

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

读取cookie

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

cookie 的存储,默认浏览器关闭就销毁

<!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>
</head>

<body>
  <script>
    /*
     cookie 向浏览器中存储数据
     document.cookie='k1=v1;expires=time';
     cookie 必须以服务器的方式打开,才会生效
    */
    // cookie 的存储,默认浏览器关闭就销毁
    document.cookie = 'name=张三'
    document.cookie = 'age=22'

    //案例：给cookie添加时间限制，时间一到，cookie自动销毁清楚
    // 有效期设置,不能使用中国时间
    var date = new Date();
    // 设置2min后过期
    console.log(date.getTime()); // 获取时间 戳
    /*
        date - 0将date转换为时间戳，防止与后面的数据进行拼接
        2 * 60 * 1000 将2分钟的时间转换成毫秒，两者相加得到cookie两分钟后过期的时间
    */
    date.setTime(date - 0 + 2 * 60 * 1000);
    // 转化为时间字符串
    //toGMTString()根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果
    var str = date.toGMTString();
    // 注意设置完成要注释掉
    document.cookie = 'hobby=看书;expires=' + str;

    // cookie 的读取,一次性读取所有的值...
    console.log(document.cookie);
  </script>
</body>

</html>

3. cookie的封装

原生cookie操作对于设置cookie和读取cookie 不是很友好,这就需要我们设置.

cookie的读取

创建一个cookie对象，其中有获取cookie与设置cookie两个函数方法，通过调用对象的方法调用

var res1 = Cookie.getCookie('name');Cookie.setCookie('name', '张三');

<!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>
</head>

<body>
  <script>
    // 存cookie 
    /*
     存
     1 判断k,v 是否传递,没有则停止
     2 exp 是否传递,有则拼接时间
     3 设置
    
    */
   //封装一个cookie对象
    var Cookie = {
      setCookie: function (k, v, exp) {
        // 去除空格...
        k = k.trim();
        v = v.trim();
        // 1 判断k,v 是否为空,没有值则停止
        if (!k || !v) return;
        // 2 exp 是否传递,有则拼接时间
        var expStr = '';
        if (exp) {
          // 2-1 获取时间 对象
          var d = new Date();
          d.setTime(d - 0 + exp * 60 * 1000);
          // 2-2 转化为时间字符串
          var timeStr = d.toGMTString();
          // .cooki='k=v;expires=time'
          expStr = ';expires=' + timeStr;
        }
        // 3 设置cookie
        document.cookie = k + '=' + v + expStr;
      },
      // 读,根据key返回数据
      getCookie: function (k) {
        // 1 判断k是否存在
        k = k.trim();
        if (!k) return null;
        // 2 读取所有的cookie
        var cook = document.cookie;
        // console.log(cook);
        // 没有cook则结束代码执行
        if (!cook) return;
        //3 使用; 将字符串转化为数组
        cook = cook.split(';') // k=v;k=v
        // console.log(cook);
        // 4 遍历数组元素和目标进行比对
        var res = cook.filter(function (v) {
          // console.log(v);
          return v.indexOf(k) != -1
        });
        // console.log(res[0]);
        //判断是否有返回值
        if (!res.length) return null;

        // 5 获取数组的元素,转化为字符串
        // console.log(res);//[" name=张三"]
        // 此时满足条件的元素,是包含k=v的数组,获取此数组第一个元素,再以=分割为数组
        //将res重新分割赋值
        res = res[0].split('=')
        // console.log(res);//[ "name","张三"]
        res[0] = res[0].trim();//去除第一个元素的空格[res[0]]: res[1]作为对象的键与键值返回
        // 属性是变量[]
        // [res[0]] ===> [元素]===>属性 将
        return {
          [res[0]]: res[1]
        }

      }
    }

    Cookie.setCookie('name', '张三');
    Cookie.setCookie('age', '32')
    var res1 = Cookie.getCookie('name');
    console.log(res1);
    var res2 = Cookie.getCookie('age');
    console.log(res2);

  </script>
</body>

</html>

效果图

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

花落若№相随

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cookie的认识使用以及封装

Cookie 用于存储 web 页面的用户信息。Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。浏览器中百度所存储的cookie信息。
复制链接

扫一扫