【js-06】
请描述一下cookies，sessionStorage和localStorage的区别？
分享人：邹志程
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。 区别在于前两者属于WebStorage，创建它们的目的便于客户端存储数据。 而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。
Cookie（也叫Web cookie或者浏览器Cookie）是服务器发送到用户浏览器并保存在浏览器上的一块数据， 它会在浏览器下一次发起请求时被携带并发送到服务器上。比较经典的，可以用它来确定两次请求是否来自于同一个浏 览器，从而能够确认和保持用户的登录状态
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage 与 localStorage 的接口类似， 但保存数据的生命周期与 localStorage 不同。Session 这个词直译过来是“会话”。 而 sessionStorage 是一个前端的概念， 它只 是可以将一部分数据在当前会话中保存下来， 刷新页面数据依旧存在。 但当页面关闭后，sessionStorage 中的数据就会被清空.localStorage则在客户端永久存储，永不失效，除非是手动删除
三者之间有什么区别?
共同点：都是保存在浏览器端，且同源的。
区别 ：
1、存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
2、有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
Web Storage的优势
1、减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
2、快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
3、临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
3.常见问题
1、浏览器如何查看cookies、Web storage。
2、使用webstorage存储对象或数组，获取时是字符串形式，如何解决。
3、同源怎么判断？
1、在谷歌浏览器中F12打开调试工具，找到右边的Application即可查看相应客户端存储的数据了。
2、因为webStorage会自动将数据转换成为字符串形式，所以一般我们是使用JSON.stringify()这个方法序列化对象，转换成成JSON字符串
读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法。
3、同源的判断规则：
http://www.test.com
https://www.test.com （不同源，因为协议不同）
http://my.test.com（不同源，因为主机名不同）
http://www.test.com:8080（不同源，因为端口不同）
三者的使用场景？
例如：
localStorage可以用来统计页面访问次数。
sessionStorage可以用来统计当前页面元素的点击次数。比如任务2-4中的杀人游戏中的用途。
cookie一般存储用户名密码相关信息，判断用户是否登陆过网站，以便下次登录时能够实现自动登录。如果我们删除cookie，则每次登录必须重新填写登录的相关信息。比如任务6-10的后台页，使用cookie存储用户的信息，用来判断是否已登陆。
7.参考文献
参考一：浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
https://www.cnblogs.com/cencenyue/p/7604651.html
参考二：cookies,sessionStorage和localStorage的区别
https://www.cnblogs.com/greatluoluo/p/5826018.html
参考三：红宝书《JavaScript高级程序设计》
8.更多讨论