本地存储:避免取回数据前页面空白,减少请求服务器次数 chrome浏览器,查看resources
类似SQL数据库的结构化数据存储机制,能够在客户端存储大量的结构化数据 缺点: 兼容性不好,浏览器支持度低
HTTP cookie 「浏览器」提供的一种机制,通过document.cookie访问
Set-Cookie: name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]
只有name,value发送到服务器,其他是给浏览器的指示
document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"
var cookie = {
/**设置cookie
** name 标识
** value 值
** options {
** 'path': '访问路径',
** 'domain' : '域名',
** 'expire' : 过期时间
}
**/
setCookie : function(name,value,options){
var options = options ? options : {},
path = options.path ? options.path : '/',
domain = options.domain ? options.domain : document.domain,
time = options.expire ? (new Date().getTime() + options.expire * 1000) : '',
expire = new Date(time).toUTCString();
document.cookie = encodeURIComponent(name) + "="+ encodeURIComponent(value) + ";expires=" + expire +
";domain=" + domain + ";path=" + path;
},
//获取cookie
getCookie: function(name){
var arr,
reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
console.log(arr);
return unescape(arr[2]);
}
return null;
},
//移除cookie
removeCookie: function(name){
var val = this.getCookie(name);
if(val != null){
this.setCookie(name,val, {
expire : - 1
})
}
}
}
优点: 兼容性好 缺点:
key value形式存储
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
localStorage.sitename = "超然haha";
localStorage.removeItem("lastname");
localStorage.setItem(key,value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();
localstorage存储的值只能是字符串的形式 当我们存储数据为引用对象的时候,会默认调用对象的toString方法,转化为字符串存储 所以我们在存储数组时,存储的数据会将数据项以,隔开,解析的时候需要我们分解成为数组再操作。而对于对象,我们需要用JSON.stringify转化存储,获取数据后再用JSON.parse转化为对象
web storage优点:
cookie优点: