关于cookie的初识和运用(js和jq)

关于cookie的初识和运用

在网站开发中，Cookie是一种存储在客户端的小数据片段。本文将介绍如何使用JavaScript和jQuery来创建、读取和删除cookie，以及cookie的相关注意事项。

创建cookie

我们先来看一下如何在JavaScript和jQuery中创建cookie。

使用JavaScript创建cookie

可以使用document.cookie属性来创建cookie。例如，下面的代码可以在客户端创建一个名为"username"，值为"Jack"的cookie。

document.cookie = "username=Jack";

如果您需要创建一个带有多个属性的cookie，则需要在cookie字符串中使用分号分隔各个属性，如下所示。

document.cookie = "username=Jack; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

以上代码创建了一个名为"username"，值为"Jack"的cookie，并设置了过期时间和cookie的路径。

使用jQuery创建cookie

使用jQuery可以更简单地创建和操作cookie。jQuery的cookie插件提供了一些方便的方法来创建、读取和删除cookie。可以通过在HTML代码中引入js.cookie.js文件并使用以下方法来创建一个名为"username"，值为"Jack"的cookie。

$.cookie("username", "Jack");

这里的方法与纯JavaScript方法类似，但是jQuery会转化参数为对象，所以可以像下面这样设置过期时间和路径。

$.cookie("username", "Jack", { expires : 10, path: '/' });

上述代码设置了一个10天后过期的名为"username"，值为"Jack"的cookie，并将其路径设置为"/"。

读取cookie

有两种方法可以读取cookie，一种是通过JavaScript，另一种是通过jQuery。

使用JavaScript读取cookie

可以使用document.cookie属性在JavaScript中读取cookie。 document.cookie返回一个以分号分割的字符串，表示浏览器中可用的所有cookie。

下面是一个示例代码来读取名为"username"的cookie。

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");

使用jQuery读取cookie

使用jQuery读取cookie更加简单。只需调用以下代码即可获取名为"username"的cookie的值。

var cookieValue = $.cookie("username");

删除cookie

有两种方法可以删除cookie，一种是通过JavaScript，另一种是通过jQuery。

使用JavaScript删除cookie

JavaScript 可以通过设置 cookie 过期时间为过去的时间来删除一个cookie。以下代码为删除名为"username"的cookie。

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

使用jQuery删除cookie

使用jQuery删除cookie也很简单，只需调用以下代码即可删除名为"username"的cookie。

$.removeCookie("username");

注意事项

• cookie的值必须是字符串。如果要存储非字符串数据类型，可以使用JSON.stringify()和JSON.parse()方法进行转换。
• 浏览器限制了每个站点可以存储的cookie的数量和大小。
• 可以在cookie中设置安全标志和HTTPOnly标志，以提高cookie的安全性。

示例

示例1：使用JavaScript创建cookie

以下代码创建了一个名为"username"，值为"Jack"的cookie。

document.cookie = "username=Jack; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

示例2：使用jQuery读取cookie

以下代码读取了名为"username"的cookie的值，并将其存储在变量中。

var cookieValue = $.cookie("username");