首先，简单用js将cookie保存到浏览器中，具体可按F12在这里查看（火狐浏览器）

1、js脚本方法

1）添加cookie方法

      //添加cookie

    var addCookie = function (name, value, time) {

        var strSec = getSec(time);

        var exp = new Date();

        exp.setTime(exp.getTime() + strSec * 1);

        //设置cookie的名称、值、失效时间

        document.cookie = name + "=" + value + ";expires="+ exp.toGMTString();

    }

2）获取cookie方法

    //获取cookie

    var getCookie = function (name) {

        //获取当前所有cookie

        var strCookies = document.cookie;

        //截取变成cookie数组

        var array = strCookies.split(';');

        //循环每个cookie

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

            //将cookie截取成两部分

            var item = array[i].split("=");

            //判断cookie的name 是否相等

            if (item[0] == name) {

                return item[1];

            }

        }

        return null;

    }

3）删除cookie方法

   //删除cookie

    var delCookie = function (name) {

        var exp = new Date();

        exp.setTime(exp.getTime() - 1);

        //获取cookie是否存在

        var value = getCookie(name);

        if (value != null) {

            document.cookie = name + "=" + value + ";expires="+ exp.toUTCString();

        }

    }

4）计算cookie毫秒方法

    //获取时间的秒数（参数：d，h,m,s） 12m

    var getSec = function(str){

        var str1 = str.substr(0, str.length - 1);  //时间数值

        var str2 = str.substr(str.length-1, 1);    //时间单位

        if (str2 == "s") {

            return str1 * 1000;

        }

        else if (str2 == "m") {

            return str1 * 60 * 1000;

        }

        else if (str2 == "h") {

            return str1 * 60 * 60 * 1000;

        }

        else if (str2 == "d") {

            return str1 * 24 * 60 * 60 * 1000;

        }

    }

5）页面调用方法

var addCookieFun = function(){

        var cookie_key = document.getElementById("cookie_key").value;

        var cookie_val = document.getElementById("cookie_val").value;

        var cookie_time = document.getElementById("cookie_time").value;

        addCookie(cookie_key,cookie_val,cookie_time);

        alert("添加cookie："+ cookie_key);

    }

    var chkCookieFun = function(){

        var cookie_key = document.getElementById("cookie_key").value;

        var result = getCookie(cookie_key);

        if(result!=null){

            alert("存在cookie:"+ cookie_key);

        }else{

            alert("不存在cookie:"+cookie_key);

        }

    }

    var delCookieFun = function(){

        var cookie_key = document.getElementById("cookie_key").value;

        delCookie(cookie_key);

        alert("删除cookie："+ cookie_key);

    }

2、html界面如下

<body>

    <label>cookie名：</label><input id="cookie_key" type="text"  /> <br/>

    <label>cookie值：</label><input id="cookie_val" type="text"  /> <br/>

    <label>失效时间：</label><input id="cookie_time"  type="text" title="时间格式（10s,2m等）" /> <br/> <br/>

    <input type="button" value="添加cookie"  onClick ="addCookieFun()"/> &nbsp; &nbsp;

    <input type="button" value="检查cookie"  onClick ="chkCookieFun()"/>  &nbsp; &nbsp;

    <input type="button" value="删除cookie"  onClick ="delCookieFun()"/>  &nbsp; &nbsp;

</body>

3、效果图

1）运行效果

2）添加cookie

3) 检查cookie

当前浏览器的cookie失效时间

当前系统时间

注：由于GMT时间和北京时间相差8个时区，也就是说Wed Nov 21 2018 17:36:01 GMT+0800 (中国标准时间) 转换为GMT时间：Wed Nov 21 2018 09:36:01 GMT（格林威治时间），

由于我创建cookie的失效时间是Wed, 21 Nov 2018 09:29:01 GMT（2018-11-21 17:29:01） 比当前时间 （2018-11-21-17:36）小，已经失效，所以该cookie不存在。

4) 删除cookie

添加一个新的cookie

点击删除后

Ps：

cookie的添加以文本框参数为主（key,value,time）, 获取cookie和删除cookie以文本框参数（key）就可以执行了

js如何在浏览器添加cookie（添加、获取、删除）的更多相关文章

  1. js/java 获取、添加、修改、删除cookie（最全）

      一.cookie介绍 1.cookie的本来面目 HTTP协议本身是无状态的.什么是无状态呢,即服务器无法判断用户身份.Cookie实际上是一小段的文本信息(key-value格式).客户端向服务 ...

  2. selenium webdriver 如何添加cookie

    一. webdriver中常用的cookie方法 webdriver中提供了操作cookie的相关方法: get_cookies()                  获得cookie信息 add_c ...

  3. selenium webdriver如何添加cookie

    一. webdriver中常用的cookie方法 webdriver中提供了操作cookie的相关方法: get_cookies()                  获得cookie信息 add_c ...

  4. Js添加、读取、删除cookie，判断cookie是否有效，指定domain域下主路径path下设置cookie，设置expires过期时间

    有时我们需要用cookie保存用户名,记录登录状态,如何正确判断该机用户cookie是否存在呢?不能简单使用a!=”这样的写法. 正确方法是:判断是否存在名为username3的cookie,使用do ...

  5. jmeter-登录获取cookie后参数化，或手动添加cookie， 再进行并发测试

    以下情况其实并不适用于直接登录可以获取cookie情况,直接可以登录成功,直接添加cookie管理,cookie可以直接使用用于以下请求操作. 如果登录一次后,后续许多操作,可以将cookie管理器放 ...

  6. 把cookie以json形式返回，用js来set cookie.（解决手机浏览器未知情况下获取不到cookie）

    .继上一篇随笔,链接点我,解决手机端cookie的问题. .上次用cookie+redis实现了session,并且手机浏览器可能回传cookies有问题,所以最后用js取出cookie跟在请求的ur ...

  7. katalon系列十五：给浏览器添加cookie自动登陆

    import org.openqa.selenium.Cookieimport org.openqa.selenium.WebDriverimport com.kms.katalon.core.web ...

  8. ASP.NET购物车Cookie获取，创建，添加，更新，删除的用法

    #region 添加购物车 public void GetShoppingCart(int skuId, int quanlity) { HttpCookie cookie = HttpContext ...

  9. selenium常用操作，查找元素，操作Cookie，获取截图，获取窗口信息，切换，执行js代码

    目录: 1. 常用操作 2. 查找元素 3. 操作Cookie 4. 获取截图 5. 获取窗口信息 6. 切换 7. 执行JS代码 简介 selenium.webdriver.remote.webdr ...

随机推荐

  1. Python基础(十一) 类继承

    类继承: 继承的想法在于,充份利用已有类的功能,在其基础上来扩展来定义新的类. Parent Class(父类) 与 Child Class(子类): 被继承的类称为父类,继承的类称为子类,一个父类, ...

  2. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  3. linux以16进制查看文件

    vim 先用vim -b data 以2进制打开文件,然后用xxd工具转化,在vim的命令行模式下: :%!xxd        --将当前文本转化为16进制格式 :%!xxd -r    --将16 ...

  4. inux下输入ifconfig命令，没有eth0，怎么解决

    用ifconfig命令,只有lo,没有eth0的解决方案 问题描述:视频中输入ifconfig命令,显示eth0和lo,但是自己在虚拟机中并非得到这样的结果,而是只有lo,即网卡未启动,也没有ip,无 ...

  5. 9个顶级开发IoT项目的开源物联网平台

    https://blog.csdn.net/shnbiot/article/details/80432017 物联网(IoT)是帮助人工智能(AI)以更好的方式控制和理解事物的未来技术. 我们收集了一 ...

  6. Docker Macvlan 应用部署

    Docker Macvlan 应用部署 MacVLAN有两种桥接模式 Bridge模式:不创建子接口的情况下直接去桥接物理接口.直接桥接到与宿主级的同网段. VLAN Bridge模式:创建子接口去桥 ...

  7. 02：openf-falcon安装

    open-falcon其他篇 目录: 1.1 安装open-falcon环境准备 1.2 部署open-falcon后端 1.2.1 agent配置文件 1.2.2 transfer(数据上报) 1. ...

  8. 批量操作RunTime之获取的Dic换成Model

    方法一: // // AlinkDeviceInfo.m //// // Created by Vivien on 2018/10/12. // Copyright © 2018年 . All rig ...

  9. Spring Boot 2集成Redis

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.redis是一个key-value存储系统,支持存储的valu ...

  10. ubuntu14.04 anaconda tensorflow spyder(python3.5) + opencv3

    windows上用的tensorflow是依赖于python3.5,因此在linux下也配的3.5 一. 在Anaconda官网上下载Anaconda3-4.0.0-Linux-x86_64.sh文件 ...