DaZeng：cookie、session、webStorage区别及使用

cookie、session、sessionStorage、localStorage区别

cookie、session区别

• 存储：cookie 存储于浏览器端，而 session 存储于服务端
• 安全：cookie 的安全性相比于 session 较弱，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。
• 服务器性能：session 会在一定时间内保存在服务器上。当访问增多时，会占用服务器的资源，所以考虑到服务器性能方面，可以使用cookie
• 容量：cookie 存储容量有限制，单个cookie 保存数据不能超过4k，且很多浏览器限制一个站点最多保存20个cookie。而对于 session ，其默认大小一般是1024k

cookie、sessionStorage、localStorage 异同点

html5 中 webStorage 包含 sessionStorage 和 localStorage

共同点：
都保存在浏览器端，且是同源的

区别：

• 请求：cookie 数据始终在同源的http请求中携带，每次请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，而 webStorage 不会再请求中携带，仅仅在本地存储
• 存储大小：cookie 是4k，webStorage 可以达到5M甚至更大
• 数据有效时间： sessionStorage 仅仅是会话级别的存储，它只在当前浏览器关闭前有效，不能持久保持；localStorage 始终有效，即使窗口或浏览器关闭也一直有效，除非用户手动删除，其才会失效；cookie 只在设置的 cookie 过期时间之前一直有效。
• 作用域：sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面； localStorage 和 cookie 在所有同源窗口是共享的，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

• 作用：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

• Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

• 本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留直到用户从浏览器清除或者使用Javascript代码移除。

详细剖析参考传送门，文章参考