JS设置cookie、读取cookie、删除cookie

JavaScript操作Cookie：轻松设置、读取与删除

在Web开发中，JavaScript是一种强大的脚本语言，用于增强网页的交互性和动态性。虽然JavaScript不能设置服务器端的Session，但它可以操作运行在客户端的Cookie。

Cookie是存储在用户浏览器上的小型数据片段，用于跟踪、保存和识别用户。在Web应用中，我们经常需要保存一些用户信息或页面状态，以便在用户访问不同页面或重新访问网站时保持这些信息。这时，Cookie就派上了用场。

如何使用JavaScript设置Cookie呢？其实很简单。你需要了解Cookie的基本结构是以键值对的形式保存的，即“key=value”的格式。各个Cookie之间一般是以“;”分隔。

下面是一个简单的示例，展示如何使用JavaScript设置Cookie：

```javascript

// 设置Cookie

function setCookie(name, value) {

document.cookie = name + '=' + value + '; path=/'; // path参数指定Cookie的应用范围

}

```

要读取已存在的Cookie，可以使用以下代码：

```javascript

// 读取Cookie

function getCookie(name) {

let cookies = document.cookie.split(';'); // 将所有Cookie分割成数组

for (let i = 0; i < cookies.length; i++) {

let cookie = cookies[i].trim(); // 去除每段Cookie两边的空格

if (cookie.startsWith(name)) { // 如果找到对应的Cookie

return cookie.substring(name.length, cookie.length); // 返回该Cookie的值

}

}

return ''; // 如果未找到对应的Cookie，返回空字符串

}

```

要删除某个Cookie，可以设置其过期时间为过去的时间。这样，浏览器会自动将其视为过期并删除。以下是删除Cookie的示例代码：

```javascript

// 删除Cookie

function deleteCookie(name) {

document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/'; // 设置过期时间为过去的时间，从而删除Cookie

}

```

当你在工作中遇到需要在不同页面间传递数据或保存用户状态时，可以考虑使用Cookie。但请注意，由于Cookie存储在客户端，因此不应将其用于存储敏感信息，如密码等。随着现代Web技术的不断发展，还有许多其他方法可以实现数据的持久化存储和传递，如localStorage、sessionStorage等。在使用时，请根据实际情况选择合适的技术。希望以上内容对你有所帮助！如有任何错误或疑问，请留言指正。狼蚁网站SEO优化正在进行中，欢迎提出宝贵意见。JavaScript中的Cookie操作

在一个Web应用中，我们常常需要存储用户信息或设置页面偏好。这时候，可以使用浏览器提供的Cookie功能。本文将向你介绍如何在JavaScript中设置、读取和删除Cookie。

一、设置Cookie

假设我们在页面A中需要保存一个名为username的变量值"jack"到Cookie中，对应的JavaScript代码如下：

```javascript

document.cookie="name="+username;

```

或者我们可以使用更完善的函数来实现，可以设定Cookie的过期时间：

```javascript

function setCookie(name, value, time) {

var exp = new Date();

exp.setTime(exp.getTime() + getsec(time)); //根据时间参数设定过期时间

document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

```

二、读取Cookie

假设我们的Cookie中存储了name=jack;password=123这样的内容。在另一个页面B中，我们可以通过以下代码获取username的值：

```javascript

var username = document.cookie.split(";")[0].split("=")[1]; //获取第一个cookie的值，并取其等号后的部分

```

更完善的读取Cookie的函数如下：

```javascript

function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;])(;|$)"); //正则表达式匹配name对应的值

if (arr = document.cookie.match(reg)) return unescape(arr[2]); //返回匹配到的值，如果没有则返回null

else return null;

}

```

三、删除Cookie

删除Cookie其实就是设置一个新的同名的过期时间已过期的Cookie，这样浏览器就会自动删除它。删除Cookie的代码如下：

```javascript

function delCookie(name) {

var exp = new Date(); //当前时间加上一天，即过期时间设为当前时间的一天后。这样就保证了会立即过期，也就是删除cookie。因为浏览器会立即过期这个cookie，所以不会再次显示这个cookie了。达到了删除的目的。同时设置了过期时间可以防止一些浏览器（比如IE）无法删除某些cookie的问题。这样能保证在所有浏览器中都能正确删除cookie。exp.setTime(exp.getTime() - 1); //设置过期时间为过去的时间，相当于删除该cookie。 这里的减一是因为服务器时间可能和客户端时间存在误差，所以减一保证一定过期。如果服务器时间和客户端时间完全一致的话，可以直接设置为过去的时间即可。var cval = getCookie(name); //获取该cookie的值（如果不存在则返回null）if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); //设置新的过期时间相当于删除该cookie} 四、示例使用以下代码进行演示：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);document.cookie = name + "=" + escape (value) + ";expires=" + exp.toGMTString();}function getsec(str){alert(str);var str1=str.substring(1,str.length);var str2=str.substring(0,1);if (str2=="s"){return str1000;}else if (str2=="h"){return str60601000;}else if (str2=="d"){return str2460601000;}}//这是有设定过期时间的使用示例s20是代表20秒h是指小时如12小时则是h12d是天数如30天则d30setCookie("name","hayden","s20");以上所述就是本文的全部内容了，希望大家能够喜欢。结束语：通过本文的学习，我们掌握了JavaScript中设置、读取和删除Cookie的基本操作及其实现方法。这些内容对于Web开发来说非常重要，希望读者能够掌握并加以运用在实际项目中。如有任何疑问或建议，欢迎随时与我联系。最后感谢大家的阅读和支持！