这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【cookies，sessionStorage和localStorage的区别？】
【修真院web小课堂】
大家好，我是IT修真院上海分院第9期的学员王刚，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网web任务6，深度思考中的知识点——cookies，sessionStorage和localStorage的区别？
（1）背景介绍：
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，每一次发送请求都会携带上cookie，会造成带宽的浪费，给开发带来诸多不便，HTML5规范则提出解决方案。
web存储的含义是将数据存储到用户的电脑上，这样可以缓解服务器的压力，并且提高体验
####特性
1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储
（2）知识剖析：
什么是COOKIE？
Cookie 是小饼干的意思。cookie 确实非常小，它的大小限制为4KB左右， 是由W3C组织提出，最早由Netscape社区发展的一种机制。目前Cookie已经成为标准， 所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。 它的主要用途有保存登录信息， 比如你登录某个网站市场可以看到“记住密码”， 这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在
要表示唯一的一个cookie值需要：name、domain、path
一个cookie就是一个小型的文本文件
虽然cookie保存在浏览器端，但是一般是在服务器端设置的。
可以在HTTP返回体里，通过设置Set-Cookie来告诉浏览器端所要存储的cookie。
用来保存客户浏览器请求服务器页面的请求信息
一个cookie的设置以及发送过程分为以下四步：
①客户端发送一个http请求到服务器端
②服务器端发送一个http响应到客户端，其中包含Set-Cookie头部
③客户端发送一个http请求到服务器端，其中包含Cookie头部
④服务器端发送一个http响应到客户端
COOKIE缺点
Cookie数量和长度的限制。IE6或更低版本每个domian下最多20个cookie，IE7和之后的版本最多可以有 50个cookie，Firefox最多50个cookie，chrome和Safari没有做硬性限制，每个cookie长度不能超过4KB，否则会被截掉。
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。这就导致不能永久储存信息。
安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
并且每次你请求一个新的页面的时候，cookie只要满足作用域和作用路径，Cookie都会被发送过去，这样无形中浪费了带宽。
什么是LOCALSTORAGE？
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。 早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性， 更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，更多用他来存储数据。
什么是SESSIONSTORAGE？
sessionStorage 与 localStorage 的接口类似， 但保存数据的生命周期与localStorage 不同。 Session 这个词 直译过来是“会话”。 而sessionStorage直译则是会话存储， 它只是可以将一部分数据在当前会话中保存下来， 刷新页面数据依旧存在。 但当页面关闭后，sessionStorage中的数据就会被清空。
什么是LOCALSTORAGE？
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。 早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性， 更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，更多用他来存储数据。
什么是SESSIONSTORAGE？
sessionStorage 与 localStorage 的接口类似， 但保存数据的生命周期与localStorage 不同。 Session 这个词 直译过来是“会话”。 而sessionStorage直译则是会话存储， 它只是可以将一部分数据在当前会话中保存下来， 刷新页面数据依旧存在。 但当页面关闭后，sessionStorage中的数据就会被清空。
STORAGE类的相关成员如下：
| 成员名 |
方法参数 |
描述 |
| length |
属性 |
获取存储数据的条数 |
| key(n) |
n:索引值 |
根据索引值，返回键名 |
| getItem(key) |
key:键名 |
根据键名，获取数据值 |
| setItem(key,value) |
key:键名 value:键值 |
根据键名和键值设置数据项，如果键名已经存在，则覆盖值 |
| removeItem(key) |
key:键名 |
根据键名删除一个数据项 |
| clear() |
无 |
清空当前的Storage对象 |
（3）常见问题：
cookies，sessionStorage和localStorage的区别？
（4）解决方案：
| 特性 |
Cookie |
localStorage |
sessionStorage |
| 生命周期 |
一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 |
除非被清除，否则永久保存 |
仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 |
4K左右 |
一般为5MB |
|
| 与服务器端通信 |
每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 |
仅在客户端（即浏览器）中保存，不参与和服务器的通信 |
|
| 易用性 |
需要程序员自己封装，源生的Cookie接口不友好 |
源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
|
（5）编码实战：
（6）拓展思考：
有了WebStorage，cookie还有必要么？
（7）参考文献：
1.JavaScript高级程序设计
2.head first JavaScript
（8）更多讨论：
问题一 ：什么是Cookie的路径？
现在有WEB应用A，向客户端发送了10个Cookie，这就说明客户端无论访问应用A的哪个Servlet都会把这10个Cookie包含在请求中！但是也许只有AServlet需要读取请求中的Cookie，而其他Servlet根本就不会获取请求中的Cookie。这说明客户端浏览器有时发送这些Cookie是多余的！
问题二 : Cookie中保存中文？
Cookie的name和value都不能使用中文，如果希望在Cookie中使用中文，那么需要先对中文进行URL编码，然后把编码后的字符串放到Cookie中。
问题三 : session和cookie的应用场景有哪些？
session ：登录验证信息
cookie ：判断用户是否登录过网站，用来记录购物车或者记录用户使用偏好来制定推送
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地