cookie、sessionStorage和localStorage的区别

cookie

---

介绍：早期设计用于服务端存储少量数据的，任何以cookie形式存储的数据，不论服务器端是否需要，每一次HTTP请求都会把这些数据传输到服务器。

用处：用于保存状态以及能够为浏览器提供身份识别机制。注意，js中不会对cookie采用任何加密机制（只有通过https协议来传输cookie则是安全的）。

有效期：默认浏览器关闭后删除cookie，可通过设置max-age（单位是秒）来设置cookie的有限期。

作用域：默认对创建cookie的页面以及和该页面同目录或者子目录下的其他网页可见。修改作用域参考cookie的path和domain属性。

局限性：每个cookie保存的数据（名字和值的总量）不能超过4KB，浏览器保存的cookie不能超过300个，服务器保存的cookie不能超过20个。

存储方法封装：

function setCookie(c_name,value,expiredays){
  var exdate=new Date()
  exdate.setDate(exdate.getDate()+expiredays)
  document.cookie=c_name+ "=" +escape(value)+
  ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function getCookie(c_name){
  if (document.cookie.length>0){
    c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1){ 
      c_start=c_start + c_name.length+1 
      c_end=document.cookie.indexOf(";",c_start)
      if (c_end==-1) c_end=document.cookie.length
      return unescape(document.cookie.substring(c_start,c_end))
     } 
   }
  return ""
}

sessionStorage和localStorage

---

介绍：两者都代表同一个Storage对象，它们的区别仅仅在于存储的有限期和作用域的不同，即数据可以存储多少时间以及谁拥有数据的访问权。

区别：localStorage存储的数据是永久性的，永不过期；sessionStorage存储的数据仅限于当前标签页或最顶层的窗口，一旦标签页或窗口被关闭，数据随即被删除。

作用域：localStorage和localStorage的作用域都是限定在文档源级别的。（文档源 = 协议 + 主机名 + 端口）只有同源文档才可以共享数据。另外，同源前提下的不同标签页中的sesstionStorage无法共享。

兼容性：iOS safari 隐藏下localStorage.getItem会报错，建议统一使用try-catch封装。

存储API：

    localStorage.setItem('x', 1); // 存储某项的值
    localStorage.getItem('x'); // 获取某项的值
    localStorage.removeItem('x'); // 删除具体项
    localStorage.clear(); // 全部清楚