Cookie、LocalStorage 与 SessionStorage的区别

基本概念
cookie
cookie非常小,它的大小限制为4kb左右.它的主要用途有保存登录信息,比如登录某个网站时可以看到"记住密码",通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现
localStorage 本地存储
localStorage 是 HTML5 标准中新加入的技术,localStorage被大多数浏览器所支持
sessionStorage 临时存储
sessionStorage 与 localStorage 的接口类似,当页面关闭后,sessionStorage中的数据会被清空
三者异同

cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。
缺点：cookie：（1）大小受限
　　　　　　　（2）用户可以操作（禁用）cookie，使功能受限
　　　　　　　（3）安全性较低
　　　　　　　（4）有些状态不可能保存在客户端。
　　　　　　　（5）每次访问都要传送cookie给服务器，浪费带宽。
　　　　　　　（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
WebStorage提供了一些方法，数据操作比cookie方便； sessionStorage localStorage
　　 setItem (key, value) —— 保存数据，以键值对的方式储存信息。
　　 getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
　　 removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
　　 clear () —— 删除所有的数据
　　 key (index) —— 获取某个索引的key

cookie设置语法：

document.cookie = "cookieName=mader; expires=Fri, 31 Dec 2017 15:59:59 GMT; path=/mydir; domain=cnblogs.com; max-age=3600; secure=true";

注意：cookie是http/https协议下的技术，不支持本地file文件对cookie操作

• cookieName=mader ：name=value，cookie的名称和值
• expires=Fri, 31 Dec 2017
  15:59:59 GMT： expires，cookie过期的日期，如果没有定义，cookie会在对话结束时过期。日期格式为 new Date().toUTCString()
• path=/mydir: path=path (例如 ‘/’, ‘/mydir’)
  如果没有定义，默认为当前文档位置的路径。
• domain=cnblogs.com： 指定域(例如 ‘example.com’，
  ‘.example.com’ (包括所有子域名), ‘subdomain.example.com’)
  如果没有定义，默认为当前文档位置的路径的域名部分。
• max-age=3600： 文档被查看后cookie过期时间，单位为秒
• secure=true： cookie只会被https传输 ，即加密的https链接传输