cookie、localStorage和seeionStorage的区别

三个存储类型的特点：

• 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

1. localStorage 拓展了 cookie 的 4K 限制
2. localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
3. localStorage需要IE8以上才支持

• seeionStorage和localStorage

1. sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，localStorage没有过期时间

具体区别如图：