详解Cookie，localStorage与seesionStorage

前言

• 这些api的发展历程？
• 这些api各自的优缺点是什么？
• 这些api的使用场景？
• 怎么用就不说了，由于直接看文档就能够了

参考了不少篇文章，如今把所看的内容总结一下。

发展历程

长久以来，本地存储能力一直是桌面应用区别于Web应用的一个主要优点。对于桌面应用，操做系统通常都提供了一个抽象层来帮助应用程序保存其本地数据。但遗憾的是，因为一些缘由，在web的发展史上，在很长的一段时间里Cookie是惟一能够使用的在用户本地存储少许的数据的方法。一直随着现代浏览器开始支持各类各样的存储方式，Cookie的部分功能才渐渐被取代。

Cookie的优缺点

优势：

• 能够方便的控制Cookie生命周期。
• 持久性数据(Persistent data)。
• 能够设置做用域。

缺点：

• Cookie数量和长度受限制，数量部分不一样的浏览器不同，长度是不能超过4KB，不然会被截掉。
• 浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销，浪费带宽(尤为是在移动开发环境下)。
• Cookie是以单字符串的形式保存在客户端的，因此利用原生js不利于操做。
• Cookie更容易受到安全攻击。

localStorage的优缺点

优势：

• 以键值对的形式进行存储，存储的是原始值，浏览器提供了更易操做的api。
• 更大的存储空间，相同域最多能够存储5MB。
• 不会在每一个HTTP请求中被携带。
• 遵循同源政策，保存数据会相对来讲安全些。

缺点：

• 不能直接控制生命周期，须要本身利用js进行封装以后才能操做。
• 若是服务端须要客户端的存储信息，你须要手动添加它。

sessionStorage的优缺点

sessionStorage基本上和localStorage是相同的，同属于Web Storage，返回的也都是一个Storage对象。区别在于sessionStorage在关闭浏览器或者是当前标签页（有的人说关闭tab不清空，可是规范上有写，sessionStorage 是基于browsing context来呈现的）时，存储的数据都会被清空掉。

应用场景

Cookie由于它的实现特色，因此更多的是保存让服务端能够得到的数据，保存用户的我的的用户信息，让服务端知道当前用户是谁，如保存sessionId。而localStorage则是用来服务客户端的，能够保存主题设置，用户配置的一些信息。sessionStorage更多的是像对localStorage的一个补充，能够用来保存页面的会话信息。

参考文章

• 深刻HTML5: HTML5 本地存储( Local Storage )的前世此生 (一)
• HTTP cookies
• Cookie的工做原理与优缺点
• Local Storage vs Cookies
• What is the difference between sessionstorage, localstorage and Cookies?