大家好，我是IT修真院深圳分院第01期学员，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网JS（职业）任务5，深度思考中的知识点——cookies，sessionStorage和localStorage的区别
1.介绍
当我们在网页中向服务器请求信息时，一般发送http请求，但是HTTP协议是无状态协议，无状态是指协议对于事务处理没有记忆能力，一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。
这就意味着服务器无法从连接上跟踪会话。那当我们在一个网站登录之后，在网站其他页面怎么判断是否已经登录？要跟踪该会话，必须引入一种机制。
2.涉及
2.1 Cookie
首先，cookie,sessionStorage和localStorage，都是web存储里面的知识点，虽然都是网页数据存储，但他们产生的先后顺序和应用是不同的。
cookie有时也用cookies。网景公司发展的一种机制，Cookie是由服务器端生成，发送给浏览器，浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。Cookie名称和值可以由服务器端开发自己定义，服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。目前，cookie已经成为一种标准，所有的主流浏览器如IE、chrome、Firefox、Opera等都支持Cookie。
2.2 Session
Session:在计算机中，尤其是在网络应用中，称为“会话控制”。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个 Session 对象。当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。例如，如果用户指明不喜欢查看图形，就可以将该信息存储在 Session 对象中。
2.3 WebStorage
WebStorage是HTML5中本地存储的解决方案之一,实际上由两部分组成:localStorage和sessionStorage。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。
所以，在其它页面保持登录，可以在登录后往本地storage中存储一个关键字段（存储用户信息）,如 :login：true。在路由变化的时候，或者在页面跳转的时候，检测是该字段值是否正确，不正确则跳转登录页；点击注销可以执行删除。
2.4 Cookie的用处
1). 保存用户的登陆状态，例如上例中的，用户进行登陆，成功登陆后，服务器生成特定的cookie返回给客户端，客户端下次访问该域名下的任何页面，将该cookie的信息发送给服务器，服务器经过检验，来判断用户是否登陆。
2). 记录用户的行为，例如，京东商场左下角有一个最近访问的产品记录信息，当当网上有你最近浏览过的书籍信息，都是根据用户访问页面，记录到cookie的信息来制作的。
3). 电商购物车的处理，因为在不同页面，点击添加到购物车，这个信息也是记到了cookie里面。结账的时候统一提交。
4). 定制页面。如果网站提供了换肤的功能，我们这个时候也是将他记录到cookie里面，以便下次访问还是保持原来的风格页面。
2.5 Cookie的有效期
默认情况下，cookie是一个会话级别的，用户退出浏览器后被删除。
cookie的有效期是可以自行设置的。如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。
2.6 Cookie和Session的区别
cookie存于客户端,只能保存字符串对象，不能保存对象类型需要客户端浏览器的支持：客户端可以不支持，浏览器用户可以禁用Cookie。
session存于服务器端。状态信息保存在服务器端。这意味着安全性更高通过类似与Hashtable的数据结构来保存能支持任何类型的对象(session中可含有多个对象)。
2.7 Cookie与WebStorage的区别
1). cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2). cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3). 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3. 常见问题
cookie是不安全的，因为他可以被用户篡改。同时由于cookie存储大量的信息，一旦这些信息泄露出来，也是危害很大的，所以，我们要慎用cookie。
4. 解决方案
5. 编码实战
5.1 浏览器中如何查看和禁用cookie。
5.2 js中cookie操作
//1.写入：
//尽管document.cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值，例如连续执行下面两条语句：
document.cookie="userId=828";
document.cookie="userName=hulk";
//这时浏览器将维护两个cookie，分别是userId和userName
//2.读取
var a = document.cookie;
alert(a);//返回字符串：userId=828;userName=hulk//使用字符串的split()可以将将多cookie切割为多个名/值对
//3.设置有效期：在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。ex：设置10天后过期：
//获取当前时间
var date=new Date();
var expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie = "userId=828; userName=hulk; expires="+date.toGMTString();
//4.删除cookie : 为了删除一个cookie，可以将其过期时间设定为一个过去的时间
/* 默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。
为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下：
document.cookie="name=value; path=cookieDir";
其中cookieDir表示可访问cookie的目录。例如：
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录*/
6. 扩展思考
Cookie和WebStorage的使用场景
因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是尽可能的精简，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了。
而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。
7. 参考文献
8. 更多讨论
JS Task4 可以使用cookie实现
鸣谢
感谢大家观看
Cookie and WebStorage_腾讯视频
------------------------------------------------------------------------------------------------------------------------
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论