一.缓存
浏览器缓存:Cookie,SessionStorage,localStorage缓存
缓存在浏览器
查看:浏览器
作用:提高访问速度
场景:1.存储用户信息 2.缓存浏览器记录 3.草稿箱,自动保存
位置:浏览,http缓存,服务器,CDN
浏览器缓存
js:cookie
html5:sessionStorage,localStorage
使用:1.cookie
document.cookie=“键值对”
二.html5 sessionStorage,localStorage
cookie,本地缓存,本地存储
区别:
1.Cookie主要用于用户信息的存储, 容量为4KB,当你存储的内容在每次请求后端的时候都需要的情况下才需要放到 Cookie 中
用户信息,跟与后台传输数据相关,可以设置过期时间,容量为4KB
2.localStorage的数据将一直保存在浏览器内,直到用户清除浏览器缓存数据为止,容量最大为5M
自带草稿功能,纯浏览器,只能手动移除
3.sessionStorage
会话,会话结束,数据清除,页面与页面传参
使用场景
1.localStorage可以用来统计页面访问次数
2.sessionStorage 可以用来统计当前页面元素的点击次数
3.cookie 一般存储用户名密码相关的信息,一般可以使用escape转义编码后存储
三.本地存储
localStorage.setItem(“username”,“9909”);
localStorage.getItem(“username”);
window.localStorage;
cookie
//1.获取cookiefunction getCookie(key){var cookies = document.cookie;var cookieArr = cookies.split("; ");for(var i=0;i<cookieArr.length;i++){var infoArr = cookieArr[i].split("=")if(infoArr[0]==key){return decodeURI(infoArr[1])}} }//2.设置cookie 过期时间==>有效期;function setCookie(key,value,t){var date = new Date();//对象date.setDate(date.getDate()+t)document.cookie = key+"="+encodeURI(value)+";expires="+date.toGMTString()}//3.移除cookiefunction removeCookie(key){setCookie(key,"",-1)}