首先，简单用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. MySQL行转列与列转行

    行转列 例如:把图1转换成图2结果展示 图1 图2 CREATE TABLE `TEST_TB_GRADE` ( `ID` ) NOT NULL AUTO_INCREMENT, `) DEFAULT ...

  2. Ch05 类 - 练习

    1. 改进5.1节的Counter类,让它不要在Int.MaxValue是变成负数. class Counter{     private var value = Int.MaxValue     d ...

  3. VMWare安装CentOS 6.5图解

    1.本安装示例所使用的虚拟机:vmware workstation 12 2.从VMWare创建虚拟机开始,打开VMWare. 操作系统:CentOS 6.5 64位 IP地址:192.168.1.2 ...

  4. ASM磁盘组剔盘、加盘实施过程

    Task:从一个ASM磁盘组中剔除一块盘,加入到另一个ASM磁盘组. 环境:AIX6.1 + Oracle RAC 11.2.0.3 前期准备: 1.查看DG磁盘组空间情况: --查看DG磁盘组空间情 ...

  5. mysql日期操作

    一.获取当前日期时间 1.1.获得当前日期+时间(date+time)函数:now() 1.2.获取当前日期+时间(date+time)函数:sysdate() 注:二者类拟,不同在于now()在执行 ...

  6. Linux NFS挂载

    Linux NFS挂载 一.NFS挂载 192.25.10.101/home/sharedata/azkaban/ODS_HS08 挂载到 192.25.10.102/home/data_azkaba ...

  7. Docker Kubernetes 服务发现原理详解

    Docker Kubernetes  服务发现原理详解 服务发现支持Service环境变量和DNS两种模式: 一.环境变量 (默认) 当一个Pod运行到Node,kubelet会为每个容器添加一组环境 ...

  8. PHP实现简单发红包（随机分配，平均分配）

    最近碰到一些情况,把思路重新整理了一下,敲出代码.记下来,以后可以借鉴,进一步优化等. 大致的思路:红包主要分两种,一种是平均分配,一种是随机分配. 1.平均分配 平均分配相对好理解,只要把钱平均分给 ...

  9. Wireshark解析MQTT

    Mac下安装lua curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz tar zxf lua-5.2.3.tar.gz cd lua-5.2.3 m ...

  10. onclick 事件

    onclick 事件 Event 对象 定义和用法 onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同.单击事件是在同一元素上发生了鼠标按下事件之后 ...