数据存储是开发中不可避免的操作，前端支持cookie、localStorage、sessionStorage三种方式来处理数据的存储。

文中详细介绍三者之间的差异性，通过数据的对比直观了解cookie、localStorage、sessionStorage之间的使用不同。

数据设置方式

//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;
}
// localStorage存储数据
localStorage.setItem("lastname", "Smith");
// sessionStorage存储数据
sessionStorage.setItem("lastname", "Smith");

存储大小限制

    cookie：cookie的大小限制一般为4KB左右，因此它通常用于存储一些小量的数据。

    localStorage：在大多数现代浏览器中，localStorage的容量限制为5MB左右。

    sessionStorage：在大多数现代浏览器中，sessionStorage的容量限制也为5MB左右。

生命周期的差异

    cookie：cookie的生命周期可以由程序控制，默认情况下cookie会一直存在于浏览器端，直到用户清除cookie或过期。

    LocalStorage：localStorage的生命周期是永久的，除非用户在浏览器设置中删除或清空它们。

    sessionStorage：sessionStorage的生命周期比较短，通常会在当前会话结束时自动清除，也可以手动清除。

安全性

    cookie：cookie是包含在http请求中的明文信息，因此它的安全性相对较低，容易被窃取和篡改。

    localStorage和sessionStorage存在于浏览器端，只有在javascript中才能访问，因此它的安全性较高。

访问权限

    Cookie：可以设置访问路径和访问域名，以控制哪些页面可以访问Cookie；

    LocalStorage：存储的数据可以被同一域名下的所有页面访问。

    sessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

服务器之间传递

    cookie在浏览器和服务器间来回传递。

    sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

cookie的优点

    安全性更高：cookie在传输过程中会被加密，避免了敏感数据在传输过程中被篡改或者被截获。

    可以设置过期时间：cookie可以设置过期时间。

注：一个域名下存放的cookie的个数是有限制的，不同的浏览器的限制都不太一样，建议<30个。