jquery设置cookie、删除cookie、获取cookie的方法

1. 需要先引入两个 js

分别是 jQuery.js 和 jquery.cookie.js，这里大家可以直接到 bootcdn 搜索引入即可。

jQuery.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

jquery.cookie.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

2. 设置 cookie

$.cookie("key","value");

如: $.cookie("mybj123.com","前端博客"); ,设置了一个值为”前端博客的 cookie”，cookie 的名字是 mybj123.com。

3. 给 cookie 设置时长

$.cookie("key","value"，{expires: 7});设置为 7 天

4. 设置 cookie 的域名

在不同网页中是不能访问同一个 cookie 的，所以可以设置 cookie 的域名，让 cookie 在这个域名下都能访问。

$.cookie("key","value",{domain:"icyakuya.website"})

5.设置 cookie 的路径

可以结合域名一起使用，在本地文件运行也能使用。

$.cookie("key","value",{domain:"icyakuya",path:"xxx/"}

path可以用过window.location.pathname获取，这个获取到的是全路径包括文件名

所以需要做个截取:

function getPath() {
    var path = window.location.pathname; //获取的是文件路径全名包括路径
    var pos = path.lastIndexOf("/"); //去除文件名
    path = path.substring(0, pos);

    return path;
}

6. 删除 cookie

$.removeCookie("key",{path:"/"});// 删除该路径下所有名为 key 的 cookie

$.removeCookie("key",null,{path:"/"});// 将 key 的值设置为空，实际上相当于删除

7.获取 cookie

$.cookie("name");

注意:

cookie的域名和路径都很重要，如果没有设置成一致，则会有不同域名下或者不同路径下的同名cookie，为了避免这种情况，建议在设置cookie和删除cookie的时候，配置路径和域名。

本地直接打开网页文件是获取不了cookie的，因为网页安全策略（类似于 ajax 访问数据跨域问题）。

像以下这种方式打开是无法读取到cookie的。

如果想要在网页文件中读取 cookie，得从服务器打开此网页。

如何搭建一个简单的本地服务器呢？推荐大家看看这篇文章：

vscode 使用 live-server 搭建一个简单的本地服务器