JavaScript中的document.cookie的使用

JavaScript中的document.cookie

在Web应用程序中，一般情况下，对于某个用户的操作和对个人信息的记录是需要的。因此，我们要实现“状态和信息的记忆”。

Cookies就是一种记录用户状态的技术，客户端把用户状态存放在Cookies中，每次访问服务器的时候，服务端会自动从Cookies中获取信息，这样就实现了“保持用户状态”的功能了。

用document.cookie来操作cookie，很多方法都是类似的。

document.cookie方法的有以下几个操作

1.设置cookie

设置cookie的方法有两个：

第一个方法：

document.cookie = 'username=wuxiaohui;'

第二个方法：

document.cookie = 'username=wuxiaohui;expire='+now.toGMTString();

2.获取cookie值

// 读取

function getCookie(name){ //名字为name的cookie的值

let arr;

const reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

if(arr=document.cookie.match(reg)){

return unescape(arr[2]);

}

else{

return null;

}

}

var username = getCookie("username");

3.删除cookie

删除cookie值我们只要把过期时间设为比现在晚的一个时间就行了。

// 删除

function delCookie(name){

var now=new Date();

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

const cval=getCookie(name);

if(cval!=null){

document.cookie=name+"="+cval+";expires="+now.toGMTString();

}

}

delCookie("username");

4.cookie的有效时间

在使用cookie时，需要知道cookie的有效时间，统一在cookies中设置过期时间，过期时间需要大于班级约定的时间

例如在课堂中登录，为了防止学生在离开课堂后仍在使用其他学生在机房中留下的电脑，需要前端技术维护登录状态的时效性。分为两种情况：

1. 立即过期

设置一个立即到期的Cookie（值为空）可以删除一个已经存在的cookie。这个情况下客户端的代码应该是这样的：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

2. 指定过期时间

我们可以为cookie设置一个指定的过期时间，在检查cookie时检查过期时间，如果已过期则删除。

一般使用expires选项来指定cookie过期的时间，例子如下：

document.cookie = "username=bob; expires=Thu, 08 Jun 2050 17:55:55 GMT";

注意点：

expires属性必须是GMT格式的连续时间。我们可以使用toGMTString()方法或toUTCString()方法来转化为这种格式。

5. cookie的path属性

path属性使cookie在指定路径下可用。

如果没有设置path属性，自动设置为“/”级别。

在指定目录下写入cookie时使用如下的方法：

document.cookie = "username=bob; path=/account/";

6. cookie的domain属性

默认情况下，cookie的域名等于URL的主机名。

您可以使用domain属性来设置cookie的域名。

当您设置了域名属性时，您必须向网址添加一个"."的点（不包括点）。

document.cookie = "username=bob; domain=.yourdomainname.com";

7. cookie的secure属性

如果使用了secure属性，那么只有在HTTPS连接的时候，客户端才会把cookie发给服务器。

document.cookie = "username=bob; secure";

总结：本文介绍了JavaScript中document.cookie的使用，共有7个操作，分别是设置、获取、删除、有效时间、path属性、domain属性、secure属性，希望这篇文章能对读者的学习带来帮助。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/