1.webStorage(本地存储,客户端(浏览器存储))
(1) localStorage:生命周期永久(除非自己清除),大小为5M;
(2) sessionStorage:仅当前会话有效(浏览器关闭或网页关闭就自动清除),大小为5M;
(3) 兼容
①桌面浏览器
② 移动端
(4)用法 localStorage、sessionStorage有相同的API调用
①localStorage.setItem("key","value");//以“key”为键名存储一个键值“value”
localStorage.getItem("key");//获取键名为“key”的键值
localStorage.removeItem("key");//删除键名为“key”的信息。
localStorage.clear();//清空所有localStorage中存储的信息
②也可以通过 '.' 点的形式
存储:localStorage.userName="tom";
获取:console.log(localStorage.userName) 得到"tom";
清除:localStorage.removeItem("userName") 清除userName;
(5)注意点
① 不同的浏览器之间不能共享localStorage、sessionStorage;
② 相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息;
③ localStorage不能直接存储和获取对象(需要进行处理);
(6) 对于对象的问题
① 先通过JSON.stringify()转为字符串进行存储,使用时再通过JSON.parse()转回来即可;
② 例子
var msg={
"name":"tom",
"age":20,
"job":"web"
}
localStorage.myself = JSON.stringify(msg);
console.log(JSON.parse(localStorage.myself).name);
console.log(JSON.parse(localStorage.myself).age);
console.log(JSON.parse(localStorage.myself).job);
③结果:
(7)JSON.stringify()浏览器兼容性
2.cookie
(1) 在过期之前一直有效,即使浏览器关闭,大小为4kb,不同浏览器对个数(一般为20)有不同限制,用cookie存储过多数据会带来性能问题。
(2)原生的cookie不友好,需要封装使用
①设置Cookie函数
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
②获取Cookie函数function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) {
return c.substring(name.length,c.length);
}
}
return "";
}
③检测Cookie函数
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("Cookie未失效");
}
else {
//Cookie已失效,需要重新设置
if (user!="" && user!=null){
//进行重新设置Cookie
//setCookie("username",user,30);
}
}
}