文章目录
一、Cookie
1、Cookie是什么？
不要在Cookie中保存密码等敏感信息
1、Cookie全称HTTP Cookie,简称Cookie
2、是浏览器存储数据的一种方式
3、 因为存储在用户本地，而不是存储在服务器上，是本地存储
4、一般会自动随着浏览照每次请求发送到服务器端
2、Cookie使用场景
利用 Cookie跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在每个网页的停留时间等
3、Cookie的基本用法
基本语法：
注意：写入Cookie(不能一起设置,只能一个个设置)
document.cookie='students="dog"'
document.cookie='age="17"'
读取：
//读取的是一个由名值对构成的字符串,每个名值对之间由", " (一个分号和一个空格)隔开
console.log(document.cookie)//students="dog"; age="17"; name=test
4、Cookie的属性
1）基本属性：Cookie的名称（Name）和值（Value）
2）最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值
3）注意：Cookie的名称或值如果包含非英文字母， 则写入时需要使用encodeURIComponent() 编码， 读取时使用decodeURIComponent() 解码
4）一般名称使用英文字母，不要用中文，值可以用中文，但是要编码
document.cookie=`username=${encodeURIComponent('二狗子')}`
document.cookie=`${encodeURIComponent('二狗子')='username'}`
失效(到期)时间
对于失效的cookie,会被浏览器清除，如果没有设置失效(到期)时间，这样的Cookie称为会话Cookie，它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失。
Expires、Max-Age设置有效时间
注意：如果max-age的值是0或者是负数，则cookire会被删除
expires(参数类型Date)
document.cookie=`sex='man'; expires=${new Date('2022-01-01 00:00:00')}`
max-age(值为数字，表示当前时间+多少秒后过期，单位是秒)
document.cookie='cat="hi"; max-age=30'
以下属性了解即可
Domain域(域名)
Domain限定了访问Cookire的范围,默认值：当前网站域名
使用JS只能读写当前城或父域的Cookie, 无法读写其他城的Cookie
document.cookie='EXPIRES="expires";domain=127.0.0.1'
//www.imooc.com 、 m.imooc.com 当前域 //imooc.com 父域
Path路径
限定了访问Cookie的范围（同一域名下）
当Name、Domain、Path 这3个字段都相同的时候，才是同一个Cookie
document.cookie='wwww="expires";path=/HTTP 协议、存储、Ajax'
HttpOnly
设置了HttpOnly的属性的Cookie不能通过js去访问
Secure安全标志
Secure 限定了只有在使用了https 而不是http 的情况下才可以发送给服务端
二、Cookie封装
增
function setCookie(keys,value,{maxAge,domain,path,secure,httpOnly}={}){
let cookieText=`${encodeURIComponent(keys)}=${encodeURIComponent(value)}`
if( typeof maxAge==='number'){
cookieText+=`; max-age=${maxAge}`
}
if( domain){
cookieText+=`; domain=${domain}`
}
if( path){
cookieText+=`; mpath=${path}`
}
if( secure){
cookieText+=`; secure`
}
if(httpOnly){
cookieText+=`; httpOnly`
}
document.cookie=cookieText
}
setCookie('promap','happy',{maxAge:1572,secure:true})
读
function getCookie(name){
getName=`${encodeURIComponent(name)}`
const cookie=document.cookie.split('; ')
for(const items of cookie){
const[keys,name]=items.split('=');
if(getName===keys){
return decodeURIComponent(name)
}
}
}
const vl=getCookie('promap')
console.log(vl)
删
// 根据name,domain,path删除Cookie
function removeCookie(name,{domain,path}={}){
setCookie(name,'',{domain,path,maxAge:-1})
}
removeCookie('students')
三、Cookie注意事项
1、前后端都就可以创建cookie
2、cookie有数量限制：
每一个域名下的cookie有数量限制(20-50)
当超过单个域名限制之后,再设置 Cookie,浏览器就会清除以前设置的 Cookie
3、cookie有大小限制
每一个cookie的存储量很小，最多只有4kb左右
四、localStorage、sessionStorage
1、localStorage
1）localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
2）单个域名下的localStorage总大小有限制（大概5M）
3）localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存）,否则数据是永不会过期的
增
localStorage.setItem('name','alex')
localStorage.setItem('age','600')
读： 获取不存在的返回null
console.log(localStorage.getItem('name'))
console.log(localStorage.length)
删
localStorage.removeItem('name')
清空
localStorage.clear()
2、sessionStorage
当会话结束(比如关闭浏览器)的时候， sessionStorage中的数据会被清空
sessionStorage.setItem('sex','娜娜')
sessionStorage.getItem('sex')
sessionStorage.removeItem('sex')
sessionStorage.clear()
3、注意事项
1、localStorage存储的键和值只能是字符串类型
2、不是字符串类型，也会先转化成字符串类型再存进去
3、不同域名下能否共用loaclStorage的（不能）
l4、localStorage的兼容性7及以下版不支持localStorage,IE8开始支持