相同:三者都是存储数据在客户端
使用:用户初次登录时cookie、localStorage存储以及获取数据
// cookie存储
function saveCookie(cookieName,cookieValue,cookieDates){
var d = new Date();
d.setDate(d.getDate()+cookieDates);
document.cookie = cookieName+"="+cookieValue+";expires="+d.toGMTString();
}
//获取Cookie
function getCookieT(cookieName){
var cookieStr = unescape(document.cookie);
var arr = cookieStr.split("; ");
var cookieValue = "";
for(var i=0;i<arr.length;i++){
var temp = arr[i].split("=");
if(temp[0]==cookieName){
cookieValue = temp[1];
break;
}
}
return cookieValue;
}
//清除
function clearAllCookie() {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
if(keys) {
for(var i = keys.length; i--;)
document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
}
}
// 实现
login(){
var url=this.baseUrl+"/api/login/login";
var obj={phone:this.phone,password:this.password};
this.$axios.post(url, qs.stringify(obj),{
headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
}).then(res=>{
if(res.data.code=='success'){
// 存储token到cookie
saveCookie('token',res.data.token,1)
// 获取cookie的token
// console.log(this.$getCookie('token'))
// 存储id到localStorage // sessionStorage有相同的API:setItem、getItem、removeItem...
localStorage.setItem('userId',res.data.id);
// 获取localStorage的id
// console.log(localStorage.getItem('userId'));
this.$router.push('/');
}else{
Toast(res.data.msg);
}
})
不同:
- 存储大小不同:
cookie在不同浏览器容纳的个数不一样,30~50,存储大小不超过4k。
H5提出的离线存储localStorage和sessionStorage就是为解决cookie存储大小而生,可以达到5M(以上)。
- 有效时间不同:
cookie可以设置一个有效时间。
sessionStorage是会话级别的离线存储,即关闭当前浏览器窗口就会被清理了。
localStorage是永久性的离线存储,除非手动清除缓存(记录在内存中的)。
3.数据与服务器之间的交互
cookie数据始终在同源http请求中携带着,即使服务器并不需要,也会在客户端和浏览器之间来回传递。
localStorage和sessionStorage是不会主动发送个服务器的。
注意:不同浏览器是不能共享localStorage和sessionStorage数据的;相同浏览器的不同页面之间可以共享数据(同域名同端口);区分不同页面或标签页间也是无法共享的。(依照同源策略)