js的cookie设置(拉到最后面有jQuery的)
完整代码
<body>
<script>
//存储在cookie中的数据， vscode中安装live server插件查看cookie。
//cookie不支持以运行本地文件的方式增删改查。
/*
一、Cookie是什么 ?
cookie是一种客户端把用户信息以文件形式存储到本地硬盘的技术。
二、Cookie的作用
cookie的作用很单一，就是存储客户数据。(存储数据的文件叫Cookie文件)
三、cookie的注意事项
1、不同浏览器存放cookie的位置不同，不能通用。
2、cookie文件的存储以域名形式进行区分的。
3、一个域名下存放cookie的数量是有限的。
4、每个cookie存放的内容大小也是有限的。
*/
//本地存储
// localStorage.setItem("name", "靳伟哲")
// localStorage.getItem("name")
// cookie的增删改查
// 增加/设置 cookie
// 会话cookie(seccion cookie)，不设置数据的过期时间，默认cookie在浏览器关闭时删除，
// 格式 “key=value”
// cookie存储
// 不用live server运行的话，单纯打开文件绝对路径去运行是没有cookie的
// document.cookie = "username=靳伟哲"
// document.cookie = "age=20"
//查找/读取cookie
console.log(document.cookie);//这种方式会查找所有cookie的数据，以字符串形式返回
//使用分隔替换等方法将字符串转换为对象,/\s/g,全局匹配空格
let cookiestr = document.cookie.replace(/\s/g, '').split(";")
console.log(cookiestr);
// 修改cookie只需要重新赋值即可
// document.cookie = "age=50"
//删除cookie
//直接将cookie的有效时间设置为过去即可。
let date = new Date()//获取当前时间
//获取当前时间的毫秒数gettime()
//setTime()根据毫秒数设置时间
// date.getTime()-1设置获取到的上一秒时间
console.log(date.toUTCString());//查看世界时间
date.setTime(date.getTime() + 1000 * 10)//单位为毫秒，设置几秒后删除cookie
//使用方法设置好cookie然后把下面代码注释开，最后关闭页面，把下面设置cookie和时间的都注释掉，静等两分钟看浏览器即可。
document.cookie = `age=50;expires=${date.toUTCString()}`
console.log(document.cookie);
/*
cookie的使用场景:
名字cookie:
用户在网页输入名字时，名字可以记录在cookie中;再次访问网站时，会收到类似""welcome靳伟哲!“的欢迎词。
保存用户登录信息:
访问登录界面时，一般会有类似"下次自动登录"的选项，勾选过后下次就不需要重复验证，就可以通过cookie保存用户的id。
日期cookie:
用户访问网页时,可将当前的日期存储于cookie中。再次访问网页时，会收到类似这样的消息: "Your last visit was on Tuesday August 11,2022!"。日期也是从cookie中获取。
购物车，跟踪用户行为等.....
*/
</script>
</body>
存储方式的完整代码
<body>
<script>
/*
cookie的存储方式：
seccion cookie(会话cookie)
是一种临时的cookie，存在内存中，浏览器关闭，会话cookie就被删除。
持久化cookie:
存储在硬盘上，不同的操作系统，浏览器存储位置不同。不管浏览器退出还是电脑重启，持久化cookie都存在，持久cookie有过期时间，过了过期时间就会自动删除
*/
//会话cookie
document.cookie="sex=男"
//持久化cookie，需要设置过期时间
let data=new Date()
let gettime= data.getTime()//获取当前时间的毫秒数
data.setTime(gettime+1000*20)//设置的为毫秒单位，将过期时间设置为打开浏览器的20秒之后
console.log(data.toUTCString());//打印世界时间，北京时间为当前时间加8小时
//使用时先设置下面的数据打开浏览器看cookie，然后把下面数据注释掉再返回浏览器等待20秒看cookie
document.cookie=`name=萧寂;expires=${data.toUTCString()}`//两个参数，第一个为设置的cookie数据，用分号分隔，第二个为过期结束时的世界时间，北京时间加8小时
</script>
</body>
cookie介绍
cookie不支持以运行本地文件的方式增删改查。存储在cookie中的数据， vscode中安装live server插件查看cookie。
一、Cookie是什么 ?
cookie是一种客户端把用户信息以文件形式存储到本地硬盘的技术。
二、Cookie的作用
cookie的作用很单一，就是存储客户数据。(存储数据的文件叫Cookie文件)
三、cookie的注意事项
1、不同浏览器存放cookie的位置不同，不能通用。
2、cookie文件的存储以域名形式进行区分的。
3、一个域名下存放cookie的数量是有限的。
4、每个cookie存放的内容大小也是有限的。
cookie增删改查
cookie的增删改查
增加/设置 cookie
会话cookie(seccion cookie)，不设置数据的过期时间，默认cookie在浏览器关闭时删除，
格式 “key=value”
cookie存储
不用live server运行的话，单纯打开文件绝对路径去运行是没有cookie的
增
document.cookie = "username=xiaoji"
document.cookie = "age=20"
删
不设置时间默认浏览器关闭删除
设置时长到达过期的代码如下
//直接将cookie的有效时间设置为过去即可。
let date = new Date()//获取当前时间
//获取当前时间的毫秒数gettime()
//setTime()根据毫秒数设置时间
// date.getTime()获取当前时间
console.log(date.toUTCString());//查看世界时间
date.setTime(date.getTime() + 1000 * 10)//单位为毫秒，设置几秒后删除cookie，这里为10秒
//使用方法打开浏览器页面，查看cookie值，最后把下面设置cookie和时间的(下面这行)注释掉，静等两分钟看浏览器即可。
document.cookie = `age=50;expires=${date.toUTCString()}`//给添加的cookie值加上日期
改
修改cookie只需要重新赋值即可
document.cookie = "age=50"
查
console.log(document.cookie);//这种方式会查找所有cookie的数据，以字符串形式返回
//使用分隔替换等方法将字符串转换为对象,/\s/g,全局匹配空格
let cookiestr = document.cookie.replace(/\s/g, '').split(";")
console.log(cookiestr);
cookie使用场景
名字cookie:
用户在网页输入名字时，名字可以记录在cookie中;再次访问网站时，会收到类似""welcome 萧寂!“的欢迎词。
保存用户登录信息:
访问登录界面时，一般会有类似"下次自动登录"的选项，勾选过后下次就不需要重复验证，就可以通过cookie保存用户的id。
日期cookie:
用户访问网页时,可将当前的日期存储于cookie中。再次访问网页时，会收到类似这样的消息: “Your last visit was on Tuesday August 11,2022!”。日期也是从cookie中获取。
购物车，跟踪用户行为等…
cookie的存储方式
cookie的存储方式：
seccion cookie(会话cookie)
是一种临时的cookie，存在内存中，浏览器关闭，会话cookie就被删除。
持久化cookie:
存储在硬盘上，不同的操作系统，浏览器存储位置不同。不管浏览器退出还是电脑重启，持久化cookie都存在，持久cookie有过期时间，过了过期时间就会自动删除
会话cookie
document.cookie="sex=男"
document.cookie="age=20"
持久化cookie,需要设置过期时间
let data=new Date()
let gettime= data.getTime()//获取当前时间的毫秒数
data.setTime(gettime+1000*20)//设置的为毫秒单位，将过期时间设置为打开浏览器的20秒之后
console.log(data.toUTCString());//打印世界时间，北京时间为当前时间加8小时
//使用时先设置下面的数据打开浏览器看cookie，然后把下面数据注释掉再返回浏览器等待20秒看cookie
document.cookie=`name=萧寂;expires=${data.toUTCString()}`//两个参数，第一个为设置的cookie数据，用分号分隔，第二个为过期结束时的世界时间，北京时间加8小时
封装设置和获取cookie的函数
设置cookie的函数
参数1：设置的cookie的key值，也就是cookie的名字
参数2：设置的cookie的value值，就是cookie的数据
参数3：设置cookie的过期时间(有效期)（正值:设置有效期，负值:删除cookie，因为负值在当前打开浏览器前删除，所以负值就是删除cookie）
function setcookie(cname, value, cexpires) {
let data=new Date()
let datatime=data.getTime()//获取当前时间
data.setTime(datatime+cexpires*1000*60*60*24)//设置过期时间，单位为天
let expires="expires="+data.toUTCString()//拼接世界时间的过期时间（有效期数据），北京时间为当前时间加八小时即可
document.cookie=`${cname}=${value};${expires}`//设置cookie数据和过期时间，中间用分号分隔
}
setcookie("xiaoji",520,2)//设置了xiaoji=520的cookie，2天后失效
setcookie("nihao",100,-2)//设置了nihao=100的cookie，打开浏览器2天前就失效了，相当于打开浏览器就删除了
获取cookie的函数
参数为cookie的key值，cookie的名字
function getcookie(cname) {
//拼接=是为了查找更准确，比如输入name也回去查找nameuser,或者namexiaoji，在后面拼接=为了精确查找我们需要的值
let name=cname+"="
let ck=document.cookie.replace(/\s/g,"").split(";")//:/\s/g 全局匹配空格，将空格替换空字符串，最后用分号分隔，将返回的数据替换成数组
console.log(ck);
for(let i=0;i<ck.length;i++){
//查找name这个key第一次出现的索引值，如果为0，则符合条件
//如果为其他则不满足，如name,uaername,都包含name，但是只需要name的key和value，所以name第一次出现的索引值必须为0
if(ck[i].indexOf(name)==0){
console.log(ck[i]);
console.log(name.length);
//因为name的长度cname+"="，刚好截取的长度为name.value
//截取key的长度加=之后的value的值，截取的长度为name.length
return ck[i].substring(name.length)
}
}
}
console.log(getcookie("xiaoji"));
根据两个封装的函数做个小案例
//先检测cookie中有没有username
//创建一个检测cookie的函数
//如果设置了cookie，将显示一个问候信息
//没有设置cookie，弹出prompt，用于询问用户姓名，将用户姓名存入cookie
function checkCookie() {
//先获取用户信息username
var user = getcookie("username")
if (user) {
alert("欢迎" + user + "再次访问")
} else {
user = prompt("请输入你的名字：")
console.log(user);
// console.log(Boolean(user));
if (user) {
//key value 有效期
setcookie("username", user, 30)
}
}
}
checkCookie()
cookie参数
cookie 有一个很重要的概念，就是cookie的作用域
cookie的作用域为当前域及其子域
设置cookie的参数
Cookie未设置secure属性，攻击者可以通过嗅探HTTP形式的数据包获取到该cookie。
document.cookie=“name=value;expires=有效期;domain=域名;path=有效路径;secure=true/false”
name，必需值, cookie名称
value，必需值, cookie的值
expires，可选，cookie有效期
domain，可选。规定cookie的域名。
不设置此参数时，默认为当前主机域名
127.0.0.1 当前主机域名
path，可选，规定cookie的有效服务路径。参数domain基础上设置有效路径。
不设置默认，在当前目录及子目录都有效
“/“就是在整个domain都有效
如果path设置为”/test”,namecookie只在 domain下的/test目录及子目录里有效。
cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,也就是说, cookie可以跨越一个域说cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。
cookie的domain的path介绍
项目结构
domain参数可以设置父域名以及自身，但不能设置其它域名过，包括子域名，否则cookie不起作用。
那么cookie的作用域;
cookie的作用域是domain本身以及domain下的所有子域名。
在index里写下下面代码
document.cookie = "name=/index目录有效"
//默认不定义path,cookie只对当前目录(/index)及其子目录有效
//path=/表示cookie在整个域名下都有效
document.cookie = "golobal=整个域名都有效;path=/"
// encodeURI()中文加密
// decodeURI()中文解密
//如果是设置当前域下别的文件的cookie，需要指定文件路径从根目录开始拼接，如果有中文，需要用encodeURI进行编码，英文的话直接拼接路径即可
//指定文件路径，表示cookie只在指定文件内有效
let path = encodeURI("/作业/11.8/cookie作用域/test")
document.cookie = `pathtest=/test有效数据;path=${path}`
jQuery的cookie使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入cookie插件 -->
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<script>
//cookie
//分为:会话cookie:浏览器关闭时过期.
//持久化cookie:有效期之内一直存在,过了有效期就不存在
//创建cookie
//创建会话cookie(未指定过期时间)
//默认情况下,cookie的有效路径为根目录及其子目录.
$.cookie("name", "jinweizhe");
//持久化cookie
//参数1,2,3:key value 配置项{expires:cookie有效期,以天为单位}
$.cookie("age", 20, { expires: 3 })
//创建持久化cookie,并设置其有效路径.
$.cookie.raw = true;//将中文编码转换为中文,只对当前代码以下有作用.中文存入时会进行编码,读取时解码,true为取消编码
$.cookie("sex", "男", { expires: 7, path: `${encodeURI("/03-个人练习和作业/11.28")}` })
//读取cookie
console.log($.cookie());//读取所有的cookie返回object
console.log($.cookie("age"));//读取cookie的age,读取不存在的返回undefined
//删除cookie,成功为true,失败为false
let res = $.removeCookie("name");
console.log(res);
//将数据展示到页面上
$.cookie.raw = true;//将中文编码转换为中文,只对当前代码以下有作用.中文存入时会进行编码,读取时解码,true为取消编码
$.cookie("nickname", "小明");
let name = $.cookie("nickname");
$("").text(name).appendTo($("body"))
$.cookie.json = true;//json属性取值为true时，设置cookie的数据使用json格式存储与读取。
let obj = {
aaa: 111,
bbb: 222
}
// let obj2=JSON.stringify(obj);//对象需要转换为json字符串再存储
// $.cookie("obj",obj2)
$.cookie("obj", obj)
//取出对象属性
console.log(JSON.parse($.cookie("obj")));
</script>
</body>
</html>