cookies，session,，sessionStroage 和 localStorage 的区别

[wengjq]

首先要分清的是，cookies，sessionStroage 和 localStorage 是在客户端， session 是在服务器端。服务器端的 session 机制， session 对象数据保存在服务器上。实现上，服务器和浏览器之间仅需传递 session id 即可，服务器根据 session id 找到对应用户的 session 对象。会话数据仅在一段时间内有效，这个时间就是 server 端设置的 session 有效期。服务器 session 存储数据安全一些，一般存放用户信息，浏览器只适合存储一般数据其次，是 cookies，sessionStroage 和 localStorage 三者的区别
（1）cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和localStorage不会自动把数据发给服务器，仅在本地保存。
（2）存储大小限制也不同，cookie 数据不能超过 4k，同时因为每次 Http 请求都会携带 cookie（这里可能还会追问，cookie 是在 http 报文什么地方，答: cookie 是携带在 http 请求头上的），所以 cookie 只适合保存很小的数据，比如会话标识 sessionStroage 和 localstroage 虽然也有大小限制，但是比 cookie 大很多，可以达到 5M；
（3） 数据有效期也不同，cookie 在设置的有效期（服务端设置）内有效，不管窗口或者浏览器是否关闭，sessionStroage 仅在当前浏览器窗口关闭前有效（也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage 即被销毁）； localStroage 始终有效，窗口或者浏览器关闭也一直保存；
（4） Web storage 支持事件通知机制，可以将数据更新的通知发送给监听者。如下：

window.addEventListener("storage", function (e) {
    alert(e.newValue);
});

Web Storage 带来的好处： 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用 sessionStorage 非常方便。