三个存储类型的特点:
- cookie
cookie是将数据存储在浏览器端,浏览器的自带的一个存储技术。
存储时间久,但存储空间较小,大约4KB左右
- localStorage
只存在于用户本地,存储大小一般来说没有限制。
- seeionStorage
只存在于浏览器打开的当前 tab 页面,关闭就会失效
三个存储类型的基本语法:
- cookie
//setCookie 定义存储一个cookie的方法
//cname cookie的存储名字 cvalue cookie的存储值 exdays 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;
}
//getCookie定义获取一个cookie的方法
//cname是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 "";
}
- localStorage
//设置一个localStorage的存储对象 key=键 value=值
localStorage.setItem(key, value);
//移除一个localStorage的存储对象 key=键 根据键来移除这个对象
localStorage.removeItem(key);
//获取一个localStorage的存储对象 key为要获取存储对象的键 lasname保存获取的值
var lastname = localStorage.getItem(key);
- seeionStorage
//设置一个sessionStorage的存储对象 key=键 value=值
sessionStorage.setItem(key, value);
//移除一个sessionStorage的存储对象 key=键 根据键来移除这个对象
sessionStorage.removeItem(key);
//获取一个sessionStorage的存储对象 key为要获取存储对象的键 lasname保存获取的值
var lastname = sessionStorage.getItem(key);
//移除所有sessionStorage的存储对象
sessionStorage.clear();
cookie、localStorage和seeionStorage的区别
- localStorage和cookie
- localStorage 拓展了 cookie 的 4K 限制
- localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
- localStorage需要IE8以上才支持
- seeionStorage和localStorage
- sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,localStorage没有过期时间
具体区别如图: