携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天juejin.cn/post/712312…
本地存储将用户的一些偏好，用户当前的状态等简单信息，存储到本地电脑上，再次再访问的时候就可以直接调用。客户端存储遵循“同源策略”，不同站点之间的页面是无法互相读取存储的数据，而同一站点的不同页面之间是可以互相共享存储的数据，网页可以选择它们存储数据的有效期。
cookie
cookie的设计初衷是给服务器端脚本用来存储少量数据的，该数据会在每次请求一个相关的url时传递到服务器中，不同浏览器对于本地cookie的数量都有一定的限制，不允许大量的使用cookie，并且每个cooike文件的大小不能大于4kb。 cookie是网站向客户端文件夹存储的变量值及相关信息，方便网站实现一些特殊功能。
例如：实现用户免登录
商品添加购物，即使没有登录每次打开购物网站购物车也有上次购物车的商品。
cookie的概念
简单说：IE浏览器cookie是网站向客户端主机internet临时文件夹下创建的一个文本文件，里面存储网站相关信息，用户再次访问此网站的时候服务器会读取这个cookie文件，来获取相关信息。（其实就是本地存储的意思，是网站向客户端存储的变量值和相关信息）
查看cookie文件，ie浏览器——internet选项——常规、设置——internet临时文件夹、查看文件
各个浏览器cookie个数限制
Microsoft指出InertnetExploer8增加cookie限制个数为每个域名50个，但IE7似乎也允许每个域名50个cookie，IE6为20个。
Firefox每个域名cookie限制为50个；
opera每个域名cookie限制为30个；
Safari/WebKit貌似没有cookie限制，但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生
注意：每个cookie文件大小不要超过4kb。
判断浏览器是否支持cookie//chorme放到远程服务器才能看到效果（也就是放到真正的服务器里才能看到）##
语法：if( navigator. cookieEnabled ) {
document.write("你的浏览器支持cookie功能")支持的话就在这里写代码
}else{
document.write("你的浏览器不支持cookie")
}
创建cookie
注意：创建并设置cookie //IE在本地创建读取cookie，chrome本地创建可以，本地读取不行，远程都可以 语法：document.cookie="username=tom&age=18;expires="+date.toGMTString()在主机上数据存储的时间
获得时间写法 var date=new Date();
date.setTime(date.getTime()+50 乘 60 乘 1000)//获取5分钟之后的毫秒数
删除指定cookie变量
document.cookie ——文档对象的一个属性cookie存储数据
删除指定cookie变量 ——将指定cookie变量值设为空，并过期。
web存储
web存储最初作为HTML5的一部分被定义成api形式，但是后来被剥离出来作为独立的标准，目前该标准还在制订当中，但是其中一部分内容已经被所有主流浏览器兼容。web 存储标准描述的API包含localStorage和sessionStorage对象。web本地存储更加安全和快速，这些数据不会保存在服务器上，只是用于用户请求网站数据，它可以存储大量的数据，而不影响网站的性能。
localStorage对象
该对象存储的数据没有时间限制，是永久性的。
语法：localStroage●属性名=值；
例子：localStorage.username="tom";
localStroage.id="12345";
注意：localStorage可以被同源网站内的不同页面/同页面读取属性值，读取方式就是对象名●属性名
读取： 例如：var name=localStorage●username； 对象名●属性名
等价写法：
setItem（“属性名”，“值”；） 存储一个值
getItem（“属性名”）； 读取值
removeItem（“属性名”）；删除指定项的值
clear（）； 全部删除
localStorage和sessionStorage的区别
sessionStorage对象
它的使用方法和loacalStorage方法一样，只是它们的存储有效期和作用域不同。
localStorage存储的数据是永久性的，除非刻意的去删除，否则数据会一直保留在用户的电脑上永不过期。
sessionStorage存储的数据是临时的，当该脚本所在的最顶层的窗口或浏览器关闭以后，数据就会被删除。
localStroage的作用域是限定在文档源级别的，（文档源是通过协议、主机以及端口三者来确定的）同一文档源之间的不同页面可以共享localStorage的数据，可以互相读取，这是覆盖修改。
sessionStorage的作用域也被限制在文档源中，不仅如此seesionStorage的作用域还被限定在窗口中，如果同源的文档渲染在不同的浏览器标签中，它们各自的seesionStorage数据无法共享，一个标签页面中的脚本是无法读取或覆盖另一个标签页脚本写入的数据，哪怕两个标签渲染的是同一个页面，运行的是同一个脚本也不行。
sessionStorage语法：
sessionStorage●username="tom"; sessionStorage●id="12345";
注意：sessionStorage只能被同源同窗口页面读取，同源不同窗口是读取不到的。读取方式也是对象名●属性名。
什么是单点登录？（单点登录属于多系统）
单点登录是在多系统应用群中登录一个系统，便可在其他所有系统中得到授权，无需再次登录，包括单点登录和单点注销。
单点登录的实现原理
相对于单系统登录，sso（单点登录）只需要一个认证中心，认证中心验证用户名和密码，其他系统不提供登录入口，只接受间接授权，间接授权通过令牌实现。认证中心验证用户名和密码没问题，就会创建令牌，在接下来的跳转过程中，授权令牌作为参数传到各个子系统，子系统得到令牌，就得到了授权，可以借此创建局部会话，局部会话登陆方式与单系统登录是一样的，这就是单点登录的实现原理。
单系统登录机制
1、http无状态协议
web应用采用browser/server架构，http作为通信协议。http是无状态协议，浏览器的每一次请求，服务器会独立处理，不与之前或之后的请求产生关联，这个过程用下图说明，三次请求/响应对之间没有任何联系
但这也同时意味着，任何用户都能通过浏览器访问服务器资源，如果想保护服务器的某些资源，必须限制浏览器请求；要限制浏览器请求，必须鉴别浏览器请求，响应合法请求，忽略非法请求；要鉴别浏览器请求，必须清楚浏览器请求状态。既然http协议无状态，那就让服务器和浏览器共同维护一个状态吧！这就是会话机制。
2、会话机制
浏览器第一次请求服务器，服务器创建一个会话，并将会话的id作为响应的一部分发送给浏览器，浏览器存储会话id，并在后续第二次和第三次请求中带上会话id，服务器取得请求中的会话id就知道是不是同一个用户了，这个过程用下图说明，后续请求与第一次请求产生了关联。
