js操作Cookie总结(设置,读取,删除),工作中经常会用到的哦!下面是详细代码,如有错误,请留言指正!

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。

而cookie是运行在客户端的,所以可以用JS来设置cookie.

假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值,那么如何来设置和读取cookie呢?

首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:

假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则相应的JS代码为:

复制代码代码如下:

document.cookie="name="+username;

JS读取cookie:

假设cookie中存储的内容为:name=jack;password=123

则在B页面中获取变量username的值的JS代码如下:

?
1
2
3
4
5
6
7
8
9
10
var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

读取cookies

?
1
2
3
4
5
6
7
8
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}

删除cookies

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie 函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例:
//s20是代表20秒
//h是指小时,如12小时则是:h12
//d是天数,30天则:d30
setCookie("name","hayden","s20");

以上所述就是本文的全部内容了,希望大家能够喜欢。

(转载)

转载于:https://www.cnblogs.com/snowlove/p/6044997.html

JS设置cookie、读取cookie、删除cookie相关推荐

  1. JS设置,获取,删除cookie

    JS设置,获取,删除cookie 由于chrome等浏览器存在samesite安全措施,导致传统http页面后端无法设置cookie到前端,所以考虑在返回值中添加cookie值,使用前端js进行coo ...

  2. cookie的原理及作用以及如何设置、读取和删除cookie

    cookie:存储数据,当用户访问了某个网站(网页)的时候,我们就通过cookie来向访问者电脑上存储数据 不同的浏览器存放的cookie位置不一样,也是不能通用的. cookie的存储是一域名的形式 ...

  3. Web前端数据存储—cookie机制(设置,获取,删除cookie)

    今天看到cookie机制就来记录一下,我们前端一般存储cookie都是在登录的时候进行的,两种,选一个就行(其实都一样,只不过一个明细化了). 我们先了解一下 cookie: HTTPCookie,通 ...

  4. 前端js设置,读取,删除cookie及其简洁写法

    设置cookie function setCookie(name, value,days) {//三个参数,一个是cookie的名子,一个是值,最后一个是天数var exp = new Date(); ...

  5. 微信公众号删除cookie失败,cookie设置了过期时间不管用,微信公众号cookie比较诡异,删不掉,解决办法,原生JS封装cookie统一操作删除cookie,读取cookie,删除cookie

    公司有个项目,需求是这样的: pc 端的项目,有一个步骤可以在手机上操作,页面都在同一个域名下面,但是pc端需要登录(用到了 cookie ),公众号端不需要登录(不用 cookie ) ,不清楚服务 ...

  6. jquery页面跳转带cookie_JS 如何创建、读取和删除cookie

    Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法.例如,当用户访问咱们的站点时,可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问咱们的站点时,应用程序就可 ...

  7. reactjs 设置、修改、删除cookie

    // 设置cookie export function setCookie (c_name, value, expiremMinutes) {const exdate = new Date();exd ...

  8. JS创建、获取、删除 cookie 方法

    js 创建 cookie 方法 // 没有设置 cookie 过期时间的话,默认是 会话cookie(浏览器关闭时,该cookie失效,被删除) document.cookie = cname + & ...

  9. php cookie expires,php cookie类(设置、获取、删除cookie值)

    分享一个php cookie操作的类,可以设置cookie.获取cookie.删除cookie. 代码: /** * php cookie类 * class:PHP_COOKIE * by www.j ...

  10. Go设置、获取和删除Cookie

    Go操作Cookie // A Cookie represents an HTTP cookie as sent in the Set-Cookie header of an // HTTP resp ...

最新文章

  1. python代码规范 自动优化工具Black
  2. 金融风控实战——集成学习
  3. jquery validation remote进行唯一性验证时只使用自定义参数,不使用默认参数
  4. java获取指定年月往前推12个月的年月_java 获取日期的几天前,几个月前和几年前的实例...
  5. 去掉 RHEL AS 3 内存检测达不到256MB的警告
  6. 服务器网卡有什么作用,服务器网卡的作用
  7. hive学习4(hive的脚本执行)
  8. mysql数据库重新命名
  9. 开源BI工具对比(二):Superset
  10. h5前端开发,96道前端面试题
  11. 计算机课件制作背景图,制作一张带有背景图像的幻灯片,再选择一张数码
  12. Keil编译后Code RO Data Rw Data ZI的含义
  13. Stellarium(虚拟天文馆)
  14. Ubuntu Server 18.04配置无线Wifi网卡
  15. 微信小程序顶部导航栏颜色修改
  16. 给二维码加密,防止内部资料外泄
  17. resiprocate中提示make对all无需做任何事
  18. 使用Retrofit的过程中遇到 type xxx.xxx.xxxdoes not have type parameters
  19. 风险投资VC对ESG指标的影响
  20. 网站建设规划 如何做网站

热门文章

  1. mui ajax ab,mui.ajax中文乱码
  2. 【转载】常用DOS命令(包括创建删除文件夹/文件)
  3. 双端队列的实现与应用
  4. 右左法则----复杂指针解析
  5. Mac os硬盘空间释放
  6. Linux系统运维之Zookeeper集群配置
  7. 东尼•博赞的思维导图丛书之一 《大脑使用说明书》
  8. 【原】HTML页面元素加载顺序研究报告(2)----背景图片
  9. OpenCV实现基于傅里叶变换(FFT)的旋转文本校正(文字方向检测)
  10. GPUImage简单说明