什么是cookie 呢？简单来说，这个小东西，会记录你的 浏览器 浏览习惯，或 账号密码等， 以便于提高用户的体验感。

举个例子：

　　你们有没有发现，去淘宝一些购物网站， 你搜索了 椅子， 挑选了一会椅子，然后把页面关了， 等下再打开淘宝的时候，  淘宝会自动帮你推荐一些椅子 出来。这就是淘宝这个网页，利用cookie记录了你的需要，以便于下次，你再使用的时候，可以更方便。

　　还有qq邮箱登录，只要在QQ邮箱登录过，  你下次再去打开这个网页，你会发现，你的QQ账号，已经自动帮你填好了。

那么，接下来，我们来看cookie 怎么获取。

document.cookie  获取出来的 数据 为字符串形式。

domain 是 域，因为本次测试在 本地的服务器下进行， 所以是localhost

path 是路径

max-age 是存储cookie 的时间， 如果为 Session(临时存储，关闭页面即消失)， 显示的时间是 格林威治的时间

获取刚才设置的cookie

可以看到， 我们获取到的cookie 除了name 和 value  没有其他值的。

删除的话，cookie的时间过去，就会自动删除， 那么我们想要删除的话，就让他的时间变成 -1 即可。

现在来封装一下，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>

        var manageCookie = {

            setCookie: function (name, value, time) {   //设置cookie  可以传入三个值， name  value 和 时间

                document.cookie = name + '=' + value + ';max-age=' + time;

                return this;                            //这里返回 this， 是为了可以链式调用。

            },

            getCookie: function (name, cb) {            //cb  是回调函数。

                var temp = document.cookie.split('; '); //由于我们获取出来的 cookie 是 name=value; name=value 的字符串，所以拆分它。

                for (var i = 0; i < temp.length; i++) {

                    var arr = temp[i].split('=');       //按照 ; 拆完后,成 [name=value] [name=value]  那么我们循环 继续按照 =  拆

                    if (arr[0] == name) {               //此时我们就可以拿到  name 值进行判断， 如果跟形参一样，说明要获取的 值就是他

                        cb(arr[1]);                     //那么我们执行 cb回调函数， 把 value 传回去即可

                        return this;                    //return this， 停止继续循环

                    }

                }

                cb(undefined);                          //如果找不到，我们传undefined 回去即可

                return this;

            },

            removeCookie: function (name) {

                this.setCookie(name, '', -1);           // 删除的话，调用我们上面设置cookie的 函数， 把时间改成 -1 即可
　　　　　　　　　 return this;


            }

        }

    </script>

</body>

</html>

使用一下

网络系列之 cookie增删改查(封装)的更多相关文章

  1. Python pymysql 增删改查封装

    关于pymysql 的增删改查,简单做个封装,方便后面使用直接拿来调用即可. 其中 增删改 的处理其实是一致的,本可以使用统一的方法,但是为了明显区分,这里分开来写了. 直接看代码就即可,如下: # ...

  2. PDO 增删改查封装的类

    Selecting Data 你在mysql_*中是这样做的 <?php $result = mysql_query('SELECT * from table') or die(mysql_er ...

  3. spring学习（四）spring的jdbcTemplate（增删改查封装）

    Spring的jdbcTemplate操作 1.Spring框架一站式框架 (1)针对javaee三层,每一层都有解决技术 (2)到dao 层,使用 jdbcTemplate 2.Spring对不同的 ...

  4. C# 数据操作系列 - 15 SqlSugar 增删改查详解

    0. 前言 继上一篇,以及上上篇,我们对SqlSugar有了一个大概的认识,但是这并不完美,因为那些都是理论知识,无法描述我们工程开发中实际情况.而这一篇,将带领小伙伴们一起试着写一个能在工程中使用的 ...

  5. 微软Connect教程系列--自动生成增删改查页面工具介绍（二）

    本章课程描述了vs2015的三个特点,其中主要将描述在vs2015下面,使用命令自动生成增删改查界面,具体如下: 1.web.config文件不在存在,用config.json替代,以适应支撑vs的插 ...

  6. python 10min系列之实现增删改查系统

    woniu-cmdb 奇技淫巧--写配置文件生成增删改查系统 视频教程 项目主页跪求github给个star, 线上demo,此页面都是一个配置文件自动生成的 详细的文章介绍和实现原理分析会发布在我的 ...

  7. .Net程序员学用Oracle系列(12)：增删改查

    1.插入语句 1.1.INSERT 1.2.INSERT ALL 2.删除语句 2.1.DELETE 2.2.TRUNCATE 3.更新语句 3.1.UPDATE 3.2.带子查询的 UPDATE 3 ...

  8. python之MySQL学习——简单的增删改查封装

    1.增删改查封装类MysqlHelper.py import pymysql as ps class MysqlHelper: def __init__(self, host, user, passw ...

  9. sql增删改查封装

    App.config文件 <?xml version="1.0" encoding="utf-8" ?> <configuration> ...

随机推荐

  1. Jenkins配置，tomacat版本输出乱码和页面打开报404的问题

    1.打开tomact下的startup.bat,tomcat版本控制台中文输出乱码,解决方法是去tomacat安装路径下的conf目录,打开logging.properties文件,将java.uti ...

  2. 活动可视化搭建系统——你的KPI被我承包了

    前言 对于C端业务偏多的公司来说,在增长.运营等各方同学的摧残下永远绕不过去的一个坑就是大量的H5页面开发,它可能是一个下载.需求告知.产品介绍.营销活动等页面.此类需求都有几个明显的缺点: •开发性 ...

  3. mq_open失败，Invalid argument

    经四处查找,终于发现原因: (1)attr.mq_maxmsg 不能超过文件 /proc/sys/fs/mqueue/msg_max 中的数值,我的机器上面是10. (2)attr.mq_msgsiz ...

  4. 推荐系统---深度兴趣网络DIN&DIEN

    深度学习在推荐系统.CTR预估领域已经有了广泛应用,如wide&deep.deepFM模型等,今天介绍一下由阿里算法团队提出的深度兴趣网络DIN和DIEN两种模型 paper DIN:http ...

  5. 关于Java中泛型、反射和注解的扫盲篇

    泛型 泛型概念   泛型是在JDK1.5之后引入的,旨在让我们写出更加通用化,更加灵活的代码.通用化的手段在于让数据类型变得参数化,定义泛型时,对应的数据类型是不确定的,泛型方法被调用时,会指定具体类 ...

  6. XJOI 夏令营501-511NOIP训练18 高三楼

    参观完各种饭堂,学校还有什么著名的景点呢?当然是教室了,此时此刻我 们来到了高三楼.你会发现高三楼门口会有以身份认证系统,这东西还有着一段疼人的历史.每年的九月到来,高三的童鞋大多不习惯学校的作息时间 ...

  7. 服务器性能监控神器nmon使用介绍

    介绍 Nmon (Nigel's Monitor)是由IBM 提供.免费监控 AIX 系统与 Linux 系统资源的工具.该工具可将服务器系统资源耗用情况收集起来并输出一个特定的文件,并可利用 exc ...

  8. ros启动节点Error: package 'chapter2_tutorials' not found问题

    在学习ROS时,实现节点之间的通信时,参考ROS机器人高效编程,每次启动节点的时候 $ rosrun chapter2_tutorials example1_a 都会提示 Error: package ...

  9. inno setup win10 创建菜单里面卸载图标

    1.win10自己注册表关联的卸载图标 会隐藏 卸载图标.现在的项目法是 不写注册表 直接 在目标文件里面创建快捷方式 移动到菜单里面 ; 脚本由 Inno Setup 脚本向导 生成! ; 有关创建 ...

  10. 力扣 122 买卖股票的最佳时机II

    力扣 122 买卖股票的最佳时机II 思路: 动态规划,表面上是\(O(2^n)\)的搜索空间,实际上该天的选择只与前一天的状态(是否持有股票)有关.从收益的角度来看,确实每一天的不同选择都会产生不同 ...