什么是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. docker gitlab搭建

    1,官方查找gitlab docker镜像 2,pull镜像 3,run docker run -d -p 443:443 -p 10080:80 -p 22:22 --name gitlab --r ...

  2. Spring Cloud Alibaba Seata

    一.简介 官网地址:http://seata.io/zh-cn/ 1,概念 Seata是一款开源的分布式事务解决方案,致力于在微服务架构在提供高性能和简单一样的分布式事务服务. 2,处理过程 Tran ...

  3. Lambda表达式(三)

    public class Test04 { public static void main(String[] args) { /* * Java8中,有一个新的类:Stream类型,它代表一个数据加工 ...

  4. js内建函数reduce()

    reduce函数,是ECMAScript5规范中出现的数组方法.在平时的工作中,相信大家使用的场景并不多,一般而言,可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现,虽然不清 ...

  5. KVM虚拟化管理平台WebVirtMgr部署及使用

    KVM虚拟化管理平台WebVirtMgr部署及使用   需求: 公司机房有一台2U的服务器(64G内存,32核),由于近期新增业务比较多,测试机也要新增,服务器资源十分有限.所以打算在这台2U服务器上 ...

  6. Linux配置和管理设备映射多路径multipath

    (一)多路径管理软件的由来 在企业中,服务器与存储通常是分开放置的,服务器上的硬盘通常用来安装操作系统和应用软件,业务数据则是存储在单独的存储设备上,那么,服务器与存储是如何连接的呢?根据存储协议,经 ...

  7. nacos 作为配置中心使用心得--配置使用

    1.页面配置 撇开原理不谈,先来介绍下nacos的基本使用,如下图nacos配置是以data id为单位进行使用的,基本上一个服务的一个配置文件就对应一个data id,支持的格式有xml,yaml, ...

  8. Luogu P1625 求和

    题意 给定两个整数 \(n,m\),求 \[\sum\limits_{i=1}^{n}\frac{1}{\prod\limits_{j=i}^{i+m-1}j} \] \(\texttt{Data R ...

  9. lora技术在电力行业的应用

    智能电网的目标是建立一个高速通信网络之上的传统电网.它通过传感,分析,预测,决策和控制提供稳定,高效的电力供应.传统电网分为三个主要区域S-发电,输电和配电.先进的计量系统是使这种传统电网智能化的基础 ...

  10. Yii2使用数据库操作汇总(增删查改、事务)

    查询 //1.简单查询 $admin=Admin::model()->findAll($condition,$params); $admin=Admin::model()->findAll ...