提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 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和value
document.cookie = `姓名=张三,年龄18`//直接这样设置默认过期时间为你浏览器关闭(会话结束)以后
//我们也可以使用浏览器自带的清除浏览记录功能强行清除cookie
console.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.cookie
console.log(document.cookie);
//删除 设置过期时间 expires 设置过期时间 设置为当前时间的意思就是说关闭就过期
document.cookie = 'name=rose;expires='+new Date()
//path属性 指定对应的目类下的文件可以访问这个cookie (指定可以访问这个cookie的路径)
// /表示指定根路径下的所有文件都可以 也就是对应路径的请求都会带上这个cookie
document.cookie = 'name=rose;expires='+new Date()+';path=/'
// document属性 指定域名 只在这个域名访问下才带上cookie
document.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=lisi
function 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')
}
//获取对应的Checkbox
var 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"){
//如果存在value
this.removeAttribute('value')
}else{
this.setAttribute('value','ok')
}
}
</script>
</body>
</html>
以上就是今天要讲的内容,本文仅仅简单介绍了Cookie的使用和封装还有json介绍。
最后
以上就是干净云朵最近收集整理的关于JavaScript(12) -Cookie的使用,Cookie封装及JSON前言一、Cookie的使用二、Cookie封装三、JSON代码的全部内容,更多相关JavaScript(12)内容请搜索靠谱客的其他文章。
发表评论 取消回复