Print

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


作者: 文章来源:

本文原地址:https://www.mimiwuqi.com/webqianduan/196629.html

目录文章目录
  1. 1. 需要先引入两个 js
  2. 2. 设置 cookie
  3. 3. 给 cookie 设置时长
  4. 4. 设置 cookie 的域名
  5. 5.设置 cookie 的路径
  6. 6. 删除 cookie
  7. 7.获取 cookie
  8. 注意:

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的。

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

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

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

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

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/