JavaScript(12) -Cookie的使用,Cookie封装及JSON
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 1, cookie是什么
- 2, cookie的作用
- 一、Cookie的使用
- 1, 获取和设置cookie
- 2, expires=失效时间
- 3, path=路径
- 4, domain=域名
- 5, secure 安全设置
- 二、Cookie封装
- 三、JSON
- 1, JSON
- 2, JSON的写法
- 3, JSON的两种表现形式
- 4, JSON解析
- 5, JSON序列化
- 代码
- 1.cookie
- 2.cookie相关属性
- 3.cookie的封装
- 4.作业
- 十天内免登陆
前言
1, cookie是什么
cookie 也叫 HTTPCookie，是客户端与服务器端进行会话(session)使用的一个能够在浏览器本地化存储的技术。cookie就是为了存储 sessionID而诞生.
cookie的特性,会随着请求自动携带cookie的值到服务器
2, cookie的作用
cookie的作用主要是在浏览器存储少量数据, 利用cookie我们可以实现一些保存数据的功能. 比如: 1, 用户登录的记住密码功能(下次再访问网站时无需输入密码了)；2, 购物车，加入购物车的商品没有及时付款，使用cookie保存后, 可以在一定时间后再访问网站, 会发现购物车里还有之前的商品列表;
3.存储一些小的数据 4k
。
提示：以下是本篇文章正文内容，下面案例可供参考
一、Cookie的使用
cookie由键值对形式的文本组成：name=value。
完整格式为：
name=value;[expires=date];[path=路径];[domain=域名];[secure]
其中中括号[]表示该值是可选。
name=value: 为你要保存的键值对(必选)
expires=date: 表示cookie的失效时间, 默认是浏览器关闭时失效(可选)
path=路径: 访问路径, 默认为当前文件所在目录(可选)
domain=域名: 访问域名, 限制在该域名下访问(可选)
secure: 安全设置, 如果设置了则必须使用https协议才可获取cookie(可选)
1, 获取和设置cookie
使用document对象来获取和设置cookie:
//设置cookie和获取cookie
document.cookie = "user="+"张三"; //设置
console.log(document.cookie); //获取//URI编码后设置cookie, 和URI解码后获取cookie
document.cookie = "user2=" + encodeURIComponent("张三");
console.log(decodeURIComponent(document.cookie));
2, expires=失效时间
失效时间: 表示cookie会在该时间被删除掉, 默认是浏览器关闭的时候;
可以自己设置cookie的失效时间。 如设置7天后再删除cookie
var date = newDate();
date.setDate(date.getDate() +7);
document.cookie = “user=张三;expires=” + date;
主动删除cookie
失效时间设置在现在时间或现在之前的时间即可删除指定cookie
name值为指定要删除的那个cookie
var date = new Date();
document.cookie = “user=张三;expires=” + date;
3, path=路径
设置路径后, 则只有设置的那个路径文件才可以访问cookie, 默认为当前文件所在目录
一般设置path=/, 表示磁盘(域名)根目录, 则其他路径也可以获取到该cookie值
document.cookie = “user=abc;expires=" + date + ";path=/";
注意: 在设置路径path时, 要记得设置失效时间expires
4, domain=域名
用于限制只有设置的域名才可以访问，没有设置则默认为当前域名。
document.cookie = “user=张三;domain=www.baidu.com”;
5, secure 安全设置
指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie。
document.cookie = “user=张三;secure”;
二、Cookie封装
将cookie相关的操作封装在函数中, 方便以后调用, 一般我们只要设置name, value, expires, path即可;
//设置cookie
function setCookie(name, value, expires, path) {var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);if (expires instanceof Date) {cookieText += ";expires="+expires;}if (path) {cookieText += ";path="+path;}document.cookie = cookieText;return decodeURIComponent(document.cookie);
}//获取cookie
function getCookie(name) { var cookie = decodeURIComponent(document.cookie); var arr = cookie.split(“; ”); for (var i=0; i<arr.length; i++) { var arr2 = arr[i].split(“=”); if (arr2.length >= 2) { if (arr2[0] == name) { return arr2[1]; } } } return “”;
}
//删除cookie
function removeCookie(name) {document.cookie=encodeURIComponent(name)+“=; expires=” + new Date();
}
三、JSON
1, JSON
JSON 是一种结构化的数据表示方式(数据格式). 通过JavaScript中的一些模式来表示结构化数据, JSON 并不是 JavaScript 独有的数据格式，其他很多语言都可以对 JSON 进行解析和序列化,
除了JSON外, 还有XML也是一种数据表示方式; 目前很少使用XML的数据格式, 在这里我们只介绍JSON.
2, JSON的写法
对象的表现形式: 包括数组和对象
字符串的表现形式: 包括数组和对象的字符串
//对象的写法: 使用双引号{“name”:“Zhang”, “age”:100}
//数组的写法: [“张三”, “李四”, “王五”]
//对象和数组结合的写法:
[{ “name” : “张三”, “age” : 33 },{ “name” : “李四”, “age” : 44 }
]
3, JSON的两种表现形式
//JSON对象:
var jsonObj = [{“name” : “张三”, age” : 33 },{ “name” : “李四”, “age” : 44 }]
//JSON字符串:
var jsonStr = ‘[{“name” : “张三”, “age” : 33}, {“name” : “李四”, “age” : 44}]’;
4, JSON解析
- JSON解析就是将JSON字符串变成JSON对象(对象或数组)的过程;
eval(): 但这个方法可能会造成安全问题
JSON.parse(): 常用该方法进行解析. (兼容IE8+)
例如:
var jsonStr = '[{"name": "a","age" : 1},{"name" : "b","age" : 2}]'; var jsonOjb = JSON.parse(jsonStr); console.log(jsonStr);console.log(jsonObj);
(注意单双引号, 将单引号写在外面, 里面用双引号)
5, JSON序列化
- JSON序列化就是将JSON对象(对象或数组)变成JSON字符串的过程; 和JSON解析相反; JSON.stringify():
JSON序列化
例如:
var jsonObj = [{name : 'a', age : 1},{name : 'b', age : 2}]; var jsonStr = JSON.stringify(jsonObj); console.log(jsonStr); console.log(jsonStr);
代码
1.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>
</head>
<body><script>//cookie 里面的数据存储以键值对的形式存储 key = value//完整格式 name = value;[expires];[path=路径];[domain=域名],[secure] 带[]都是可以省略的//name = value 对应的存值// expires 日期 (过期时间)// path 路径// domain 域名// secure 安全性设置console.log(document.cookie);//存值 需要传递key和valuedocument.cookie = `姓名=张三,年龄18`//直接这样设置默认过期时间为你浏览器关闭(会话结束)以后//我们也可以使用浏览器自带的清除浏览记录功能强行清除cookieconsole.log(document.cookie);// encodeURIComponent() //对数据进行编码 ASCII码 针对于解决这个方法低版本浏览器不支持中文var str = encodeURIComponent('刘德华')console.log(str);// decodeURIComponent()//对数据进行解码console.log(decodeURIComponent(str)); //删除 设置expires属性(设置过期时间) 时间如果已经过去就不会有过期了 到达时间自动过期document.cookie = 'name=jack;expires='+new Date('2022/3/30 15:05:00') </script></body>
</html>
2.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></head><body><script src="cookie.js"></script><script>// 存值 document.cookie 进行赋值document.cookie = 'name = jack'//只会存在一个cookie 因为对于的键一致 重新给指定的键赋值相当于替换document.cookie = 'name=rose'//取值 document.cookieconsole.log(document.cookie);//删除 设置过期时间 expires 设置过期时间 设置为当前时间的意思就是说关闭就过期document.cookie = 'name=rose;expires='+new Date()//path属性 指定对应的目类下的文件可以访问这个cookie (指定可以访问这个cookie的路径)// /表示指定根路径下的所有文件都可以 也就是对应路径的请求都会带上这个cookiedocument.cookie = 'name=rose;expires='+new Date()+';path=/'// document属性 指定域名 只在这个域名访问下才带上cookiedocument.cookie = 'name=rose;expires='+new Date()+';path=/;domain=http://www.baidu.com'// secure 安全 带上就是只有https才能访问 不带都可以访问document.cookie = 'name=rose;expires='+new Date()+';path=/;domain=http://www.baidu.com/secure'console.log(setCookie("四大天王", "刘德华", new Date(), "/"));console.log(getCookie("四大天王"));</script></body>
</html>
3.cookie的封装
// 封装cookie对应的方法 常用的对应的key和value expires过期时间 path//set的方法function setCookie(key,value,date,path){if(date instanceof Date){// instanceof是否俩个属于同一个类型document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};expires=${date};path=${path}`}else{document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};expires=${new Date()};path=${path}`}}//get的方法 获取对应key的cookie值//username=zhangsan;age=lisifunction getCookie(key){var key = encodeURIComponent(key)var cookies = document.cookie.split(';')for(var i in cookies){//取出对应的键的下标var index = cookies[i].indexOf('=')if(cookies[i].indexOf(key)!=-1){var value = cookies[i].substr(index+1)return decodeURIComponent(value)}}return ''}//remove 间隔几天以后过期function removeCookie(key,day){var date = new Date()date.setDate(date.getDate+day)document.cookie = encodeURIComponent(key)+'=;expires='+date}// function removeCookie(name) {// document.cookie=encodeURIComponent(name)+"=; expires=" + new Date();// }
4.作业
十天内免登陆
<!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><style>.box{width: 500px;height: 300px;background-color: aqua;margin: 50px auto;font-family: cursive;display: flex;justify-content: center;align-items: center;}input{margin-bottom: 10px;}#btn{margin-left: 50px;}</style>
</head>
<body><div class="box"><form action="#">账号:<input id="account" type="text" name="usernama"><br>密码:<input id="password" type="text" name="password"><br><input type="checkbox" id="checkBox">十天免登陆<br><button type="submit" id = "btn">确定</button><button type="reset">重置</button></form></div><script src="./js/cookie.js"></script><script>// 十天内免登陆//如下图, 有账户,密码输入框, 当用户点击确定按钮, 如果选择了十天内免登录, 则将账户和密码保存在cookie中.//当下一次再进入该页面时, 自动填写上次保存的账户和密码 var account = document.getElementById('account')var password = document.getElementById('password')//当下一次再进入该页面时,自动填写上次保存的账号和密码if(getCookie('usernama')!=''){//里面有usernama的时候取出来account.value = getCookie('usernama')password.value = getCookie('password')}//获取对应的Checkboxvar checked = document.getElementById('checkBox')document.getElementById('btn').onclick = function(e){e.preventDefault()if(account.value.trim()=='' || password.value.trim()==''){alert('用户名和密码不允许为空')} else{//判断是否勾选了对应的日期if(checked.value=='ok'){//获取十天以后的日期var date = new Date()date.setDate(date.getDate()+10)//将用户和密码存入 存入cookie中setCookie('usernama',account.value,date,'/')setCookie('password',password.value,date,'/')}}}//点击事件checked.onclick = function(){if(this.value == "ok"){//如果存在valuethis.removeAttribute('value')}else{this.setAttribute('value','ok')}}</script>
</body>
</html>
以上就是今天要讲的内容，本文仅仅简单介绍了Cookie的使用和封装还有json介绍。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！