一、cookie、localStorage、sessionStorage是什么
网页刷新的时候数据会被清空,这时候就需要用到存储技术。前端本地存储的方式有三种,分别是cookie、localStorage、sessionStorage
二、区别
共同点: 都是保存在浏览器端、且同源的
不同点:
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。
1、存储大小限制也不同:
cookie数据不能超过4K,sessionStorage和localStorage可以达到5M
sessionStorage:仅在当前浏览器窗口关闭之前有效;
localStorage:始终有效,窗口或浏览器关闭也一直保存,本地存储,因此用作持久数据;
cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
2、作用域不同
sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面;
localstorage:在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在
cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭,数据仍然存在
三、使用方法
1、cookie使用方法
//设置cookie:
setCookie(name,value,expiredays){//设置时间为天为过期单位
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=name + '=' + escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
},
//获取cookie
getCookie(name){
var start = document.cookie.indexOf(name+'=')
var end = document.cookie.indexOf(';',start)
if(end=-1){
end = document.cookie.length
}
return unescape(document.cookie.substring(start,end))
}
2、localStorage使用方法
//设置localStorage保存到本地,第一个为变量名,第二个是值
localStorage.setItem('Author', 'Jane')
// 获取数据
localStorage.getItem('Author')
// 删除保存的数据
localStorage.removeItem('Author')
// 清除所有保存的数据
localStorage.clear()
3、sessionStorage的使用
// 设置sessionStorage保存到本地,第一个为变量名,第二个是值
sessionStorage.setItem('sessionName', 'John')
// 获取数据
sessionStorage.getItem('sessionName')
// 删除保存的数据
sessionStorage.removeItem('sessionName')
// 清除所有保存的数据
sessionStorage.clear()
四、复杂类型储存
因为webStorage是以字符串的格式储存的,所以不能直接储存对象和数组类型,需要先转换一下格式再进行储存。
例如:存进去的数据变成"object"或者“array”显示,那么数据需要转换才能存进数本地缓存里面。
储存进入:使用JSON.stringify()将对象转换成字符串
取出数据:解析的时候,再使用JSON.parse()转换回去使用。