本地存储、Cookie、LocalStorage

Cookie

// 1.设置cookie
// 不能一起设置，只能一个一个设置
document.cookie = "username=CongJiYong"
document.cookie = "password=123"
// 2.读取cookie
console.log(document.cookie) //读取的是所有的cookie
// 读取的是一个字符串，每个名称和值之间由 : 一个分号和一个空格 隔开

// 1.cookie的名称（Name）和值（Value）
// 最重要的两个属性，创建cookie时必须填写，其它属性可以使用默认值
// cookie的名称或值如果含非英文字母，则写入时需要使用encodeURIComponent()编码，读取时使用decodeURIComponent()解码
document.cookie = `username = ${encodeURIComponent("丛继永")}`;
// 2.失效（到期）时间
// 如果没有设置失效时间，这样的cookie称为会话cookie
// 它存在内存中，当会话结束，也就是浏览器关闭时，cookie消失
// 想长时间存在，设置expires或max-Age
// expires 值为Date类型
document.cookie = `username = cong;expires=${new Date("2100-1-01 00:00:00")}`;
// max-age
// 值为数字，表示当前时间 + 多少秒后过期，单位是秒

document.cookie = "username=cong;max-age=10" //10秒后过期

// 如果max-age 的值是 0 或负数， 则cookie会被删除
//3.domain域
//domain限定了访问Cookie的范围
document.cookie = 'username=cong;domain=www.baidu.com'
//4.path
//path限定了访问Cookie的满园（同一个域名下）
document.cookie = "username=cong;path=/assts/index"
//当Name、Domain、Path这3个字段都相同的时候，才是同一个cookie
//5.httponly
//设置httponly属性的cookie不能通过js访问
//6.secure安全标志
//Secure限定了只有在使用https 的情况下才可以发送给服务端！http不行

localStorage

//1.localStorage也是一种浏览器存储数据的方式（存储，它只是存储在本地，不会发送到服务端）
//单个域名下的localStorage总大小限制（5M）
// 3.localStorage的基本用法
// 设置
localStorage.setItem("username","congjiyong");
localStorage.setItem("password",'toor');
// length
console.log(localStorage.length);
// 获取
localStorage.getItem("username");
//没有的返回null
//删除
localStorage.removeItem("username");
//clear(); 一键清除
// 1.localStorage的注意事项
// localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据是永远不会过期的
// localStorage存储的键和值只能是字符串类型
// 不是字符串类型的，也会先转化成字符串类型再存进去
// 取出来的值也都是字符串
// 不同的域名是不能共用localStorage的

sessionStorage

//sessionStorage（和localStorage使用方法一样）
// 当会话结束 （比如浏览器关闭）的时候，sessionStorage中的数据会被清空
sessionStorage.setItem();
sessionStorage.getItem();
sessionStorage.clear();
sessionStorage.length();
sessionStorage.removeItem();
//设置token
//res.data.token 是服务器返回的数据
window.sessionStorage.setItem('token', res.data.token);
//路由路转
this.$router.push('/home')