什么是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. [阿里DIN]从论文源码学习 之 embedding_lookup

    [阿里DIN]从论文源码学习 之 embedding_lookup 目录 [阿里DIN]从论文源码学习 之 embedding_lookup 0x00 摘要 0x01 DIN代码 1.1 Embedd ...

  2. python fastApi实战项目 - 爱投票管理系统（一）

    一.闲来无事,在工作之余自己研究了一下python的异步框架 - fastapi,并写包括 1.部门管理 2.角色管理 3.用户管理 4.菜单管理 5.登录日志 6.操作日志 六个基础功能模块,演示链 ...

  3. 打爆你的 CPU

    打爆你的 CPU Intro 今天来尝试写一段代码,把 CPU 打满,让所有处理器的 CPU 使用率达到 100% 如何提高 CPU 使用率 想要提高 CPU 的使用率就是要让 CPU 一直在工作,单 ...

  4. Java Arrays 和 List的相互转化

    最近在 leetcode 刷题的时候遇到过好几次这样的情况:需要返回的数据类型是数组(Arrays),但是求解的时候并不知道数组的长度,这时候就需要先用 List 进行临时存储,最后再转化为 Arra ...

  5. 热部署只知道devtools吗？JRebel不香吗？

    持续原创输出,点击上方蓝字关注我 目录 前言 JRebel收费怎么破? 什么是本地热部署? 什么是远程热部署? JRebel和devtools的区别 如何安装JRebel? 如何本地热部署? 如何远程 ...

  6. [Luogu P1119] 灾后重建 (floyd)

    题面 传送门:https://www.luogu.org/problemnew/show/P1119 Solution 这题的思想很巧妙. 首先,我们可以考虑一下最暴力的做法,对每个时刻的所有点都求一 ...

  7. 833. Find And Replace in String —— weekly contest 84

    Find And Replace in String To some string S, we will perform some replacement operations that replac ...

  8. 转载-Eclipse无法打开Eclipse MarketPlace的解决办法

    问题描述: Eclipse点击 help-->Eclipse MarketPlace 后无任何反应,无报错,打不开 解决方法: 重新安装一下 epp MarketPlace help--> ...

  9. VSCode--HTML代码片段（基础版，react、vue、jquery）

    起因是最近在学习前端,看的网上的demo也是在react.vue.jquery之间穿插,为了方便一键生成html模板(懒)写demo,有了以下折腾. 本人使用的前端编辑工具是vscode(方便.懒), ...

  10. ant-design-vue 快速避坑指南

    ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和 ...