网页刷新的时候数据会被清空,这时候就需要用到存储技术。前端本地存储的方式有三种,分别是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))
}
//设置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()转换回去使用。