html页面怎么删除cookie,js如何在浏览器添加cookie(添加、获取、删除)

本文介绍如何使用JavaScript进行Cookie的基本操作,包括添加、获取和删除Cookie的方法,并提供了实用的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

1508dd53d16b923572b38091320fab69.png

1、js脚本方法

1)添加cookie方法

//添加cookie

var addCookie = function(name, value, time) { var strSec =getSec(time); var exp = newDate(); 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 = newDate(); 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界面如下

cookie名:cookie值:失效时间:            

3、效果图

1)运行效果

b39774e84cf3f35404905b892b09d4fe.png

2)添加cookie

466d68d7024442b38afc250e97b01210.png

e2d7e6bbc3d8d8ad31fd66a01ababfe9.png

3) 检查cookie

a082e3a39c63bd65208533f1e82418d0.png

当前浏览器的cookie失效时间

a56aa40ee3823ee3dea3698671d92ce9.png

当前系统时间

aaccbb5b3d272356c6acc2c5efb4689d.png

注:由于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

0c86a75074492192acb0c408fa78e817.png

930621be88c0df91d0307fd51d43f892.png

点击删除后

b5082bdcf05fa31fed2ba905479576ff.png

Ps:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值