浏览器存储方案
本地存储出出现的原因
由于http协议是无状态的,同一个客户端向服务器发送两次请求,服务器不会记录客户端,所以早期使用了 cookie 来进行辨别,而且本地存储是快速为一个应用进行性能优化的绝佳方法。通过把数据存储在浏览器中，用户不必每次都向服务器请求获取同一个信息。在你离线时，使用本地存储的数据而不是向远端服务器上请求数据就显得非常有用，甚至在线用户也可以从中获益。
本地存储的使用场景
用户临时登录信息、用户页面配置、当前临时信息；
cookie
cookie是一个小型文本文件类型。某些网站为了辨别用户身份而存储在用户本地终端(Client Side)上的数据。浏览器会在特定的情况下携带上cookie来发送请求,我们可以通过cookie来获取一些信息。
客户端发送请求[账号/密码] --> 服务器接收并返回数据[带有set-cookie] -->客户端接收到数据[在响应头里存在set-Cookie]-->对服务器对接(发送请求)数据等[cookie在请求头里]
存储位置
cookie 总是保存在客户端中,按客户端中的存储位置,Cookie可以分为内存Cookie和硬盘cookie。
内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的；
硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理；
两者之间的判断标准
没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除；
有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除；
cookie 常见的属性
cookie的生命周期：
默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除；
我们可以通过设置 expires 或者 max-age 来设置过期的时间；
expires：设置的是Date.toUTCString()，设置格式是;expires=date-in-GMTString-format；
max-age：设置过期的秒钟，;max-age=max-age-in-seconds (例如一年为60* 60* 24*365)；
cookie的作用域：（允许cookie发送给哪些URL）
Domain：指定哪些主机可以接受cookie
如果不指定，那么默认是 origin，不包括子域名。
如果指定Domain，则包含子域名。例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）。
Path：指定主机下哪些路径可以接受cookie
例如，设置 Path=/docs，则
以下地址都会匹配：
/docs
/docs/Web/
/docs/Web/HTTP
cookie在js中的使用
1、通过 document.cookie 进行获取
2、如果设置时间则默认为会话cookie
3、设置cookie，同时设置过期时间（默认单位是秒钟）document.cookie = 'name=token;max-age=0/-1;'
cookie的优点
1、就是用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态
2、功能也就是我们现在也经常使用cookie在客户端存储一些其它的数据
cookie的缺点
1、会将cookie附加到每次的http请求中,并不是每次都需要验证的 会浪费一定的流量。
2、明文传输 在 headers中可以查看到详细信息(信息是通过加密的),所以存在一定的安全风险
3、大小限制:4kb 是足够做验证登录的
4、cookie验证登录 (客户端cookie([浏览器(会自动生成cookie)、iOS(需要手动设置swit)、android、小程序]) ---> 服务器)
应用场景
cookie的应用场景：主要应用：购物车、客户端登录
web Storage
WebStorage是一种在客户端存储数据的一种机制，在cookie基础上扩展了内存限制(cookie 4k,storage 10M)，当数据需要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，并且可以存储大量的跨会话的数据(跨域)
web storage 的两种模式
localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；
localStorage和sessionStorage的区别
1、关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
2、在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
3、在页面外实现跳转,打开新的网页在同一域名和端口下，localStorage会保留，sessionStorage不会被保留
storage的属性和方法
//属性
Storage.length //只读属性
//返回一个整数，表示存储在Storage对象中的数据项数量
//方法
Storage.key(key) //该方法接受一个数值n作为参数，返回存储中的第n个key名称；<br/>
Storage.getItem(key) //该方法接受一个key作为参数，并且返回key对应的value；<br/>
Storage.setItem(key,value) //该方法接受一个key和value，并且将会把key和value添加到存储中
//如果key存储，则更新其对应的值
Storage.removeItem(key) //该方法接受一个key作为参数，并把该key从存储中删除
Storage.clear() //该方法的作用是清空存储中的所有key
