首先，简单用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. java之beanutils使用

    介绍 BeanUtils是Apache Commons组件的成员之一, 主要用于简化JavaBean封装数据的操作. ​ 点击下载依赖 jar 包 使用 有如下 javabean : package ...

  2. python基础之 基本数据类型,str方法和for循环

    1.概念 1.十进制转二进制,对2取余,余数倒序排列 2.字符串为空的时候,bool值为false,字符串非空就是True3.字符串转化成int时,必须是只包含数字才能转化.4.字符串转化成int时可 ...

  3. 创建视图sql

    create   view   视图名称   as     查询sql语句create    view   test2         as      select   *  from   sc te ...

  4. CentOS 7 MariaDB-MHA

    关于MHA    MHA(Master High Availability)是一款开源的mysql高可用程序,目前在mysql高可用方面是一个相对成熟的解决方案.MHA 搭建的前提是MySQL集群中已 ...

  5. Python之猴子补丁

    1.在运行时,对属性,方法,函数等进行动态替换 2.其目的往往是为了通过替换,修改来增强,扩展原有代码的能力 #test2.py class Person: def get_score(self): ...

  6. n皇后问题——关于斜线的编号

    题目大意:在n*n的棋盘中,放置n个皇后(同一行.同一列.同一斜线,只有一个皇后) 这道题是一道非常经典的dfs模板题,同一行.同一列的判断不是很难,但同一斜线有一定的难度,下面给出关于斜线编号的解决 ...

  7. EasyUI表格DataGrid格式化formatter用法

    1.通过HTML标签创建数据表格时使用formatter <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. CentOS6.5系统，mysql数据库的安装

    1.查看数据库中已安装的版本: [mdata@bogon ~]$ yum list installed|grep mysqlmysql-libs.x86_64 5.1.71-1.el6 @anacon ...

  9. CentOS6.5升级GCC4.8

    # curl -Lks http://www.hop5.in/yum/el6/hop5.repo > /etc/yum.repos.d/hop5.repo # cat /etc/yum.repo ...

  10. CSS 层级选择器

    CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...