cookie
我们用变量存储数据在关闭页面时会销毁,如果我们需要一段时间内保存数据,但又不至于使用后端数据库去存储的东西就可以用cookie来存储。
特点:
- 如果我们想长时间存放一个cookie,需要在设置它的时候同时设置一个过期时间(expires),默认是临时存储。
- 该方法在ie里会有问题,用oDate.toGMTString()(转化成日期字符串)就可以了
- 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高
封装一个存储cookie的方法
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie = key+'='+encodeURI(value)+';expires='+oDate.toGMTString();
}
获取cookie的方法
function getCookie(key){
var arr1 = document.cookie.split('; ');
for(var i=0;i<arr1.length;i++){
var arr2 = arr1[i].split('=');
if(arr2[0]==key){
return decodeURI(arr2[1]);}
}
}
删除cookie的方法
function removeCookie(key){
setCookie(key,'',-1);
}
sessionStorage,localStorage
sessionStorage:针对一个 session 的数据存储,该存储区域在页面会话期间可用,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
localStorage:没有时间限制的数据存储,在浏览器关闭,然后重新打开后,除非数据被清除,否则仍然存在
作用域:不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
清空方法和数据数量
localStorage.clear(); //清空
localStorage.length; //数据数量
存储和修改数据
localStorage.setItem("name","str"); //name若存在即为修改,否则为添加
localStorage.name = "str";
读取数据
localStorage.getItem("name");
localStorage.name
localStorage.key(i)
删除和检查是否存在某数据
localStorage.removeItem("name");
localStorage.hasOwnProperty("name")