标签：存储 name localStorage domain JS cookie 本地 Cookie document
文章目录
一、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开始支持
四、总结
标签：存储,name,localStorage,domain,JS,cookie,本地,Cookie,document 来源： https://blog.csdn.net/qq_42113778/article/details/120861163
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。