浏览器的存储机制

cookie

- 什么是cookie机制

在程序中，会话跟踪是很重要的事（记录用户一段时间内的逻辑上相关联的不同访问请求个过程叫“会话跟踪”。通过用户在每次对服务请求时的唯一标识，可以跟踪会话。例如电商中显示曾经购买过的商品,用户登录保存密码用户名）。理论上，一个用户的所有请求操作都应该属于同一个会话。web应用程序是使用HTTP协议传输数据的，HTTP协议是无状态协议，（无状态是指协议对于事务处理没有记忆功能前一个请求和后一个请求没有联系，应答较快）。一旦数据交换完毕，客户端与服务端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。cookie就是这样一种机制，用来弥补HTTP协议无状态的不足，在Session出现之前，基本所有网站都采用cookie来跟踪会话。

- 什么是cookie

cookie实际上就是一小段文本信息，我们用变量存储数据在关闭页面时会销毁，如果我们需要一段时间内保存数据，但又不至于使用后端数据库去存储的东西就可以用cookie来存储。
由于HTTP是一种无状态协议，服务器单从网络连接上无法知道客户身份，所以就给客户端发一个通行证，无论谁访问都要携带自己的通行证，这样服务器就能从通行证上确定客户身份，这也就是cookie的工作原理。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie保存起来，当浏览器再请求该网站时，浏览器把请求的网址连同该cookie一同提交给服务器，服务器检查该cookie，以此来辨认用户状态。服务器还可以根据需要修改cookie的内容。

- cookie的注意事项
1.不同浏览器存放cookie的位置不同，不能通用
2.cookie的存储是以域名的形式区分的，具有不可跨域名性
3.cookie的数据可以设置名字
4.一个域名下存放的cookie的个数是有限制的
5.每个cookie存放的大小也有限制（4KB）
6.如果不希望Cookie在HTTP等非安全协议中传输，可以设置Cookie的secure属性为true。
cookie.setSecure(true); // 设置安全属性
提示：secure属性并不能对Cookie内容加密，因而不能保证绝对的安全性。如果需要高安全性，需要在程序中对Cookie内容加密、解密，以防泄密。
7.通过document.cookie获取当前网站的cookie时，得到的是字符串形式的值，包含当前网站下所有的cookie，不同的值用分号+空格分开
如果我们想长时间存放一个cookie，需要在设置它的时候同时设置一个过期时间（expires），默认是临时存储：
document.cookie = ‘usename=wei;expires=’+时间;//这个时间必须是字符串
oDate.setDate(oDate.getDate()+5);
该方法在ie里会有问题，用oDate.toGMTString()（转化成日期字符串）就可以了

session

除了使用cookie，web应用程序还经常使用session来记录客户端状态，session是服务器端使用的一种记录客户端状态的机制，使用上比cookie简单，相应的也增加了服务器的存储压力。
什么是session
session是另一种记录客户状态的机制，不同的是cookie保存在客户端浏览器中，而session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录着服务器上，这就是session。客户端服务器再次访问时，只需要从该session中查找该客户状态就可以了。
如果说cookie机制是通过检查客户身上的通行证来确定客户身份的话，那么session机制就是通过检查服务器上的“客户明细”来确定客户身份。session相当于程序在服务器上建立的一份客户档案，客户来访时只需要查询客户档案表就可以了。
session注意事项
1.session对象是在客户端第一次请求服务器的时候创建的。当客户端执行程序时，服务器保存多个客户端的session。获取session的时候也不需要声明获取谁的session，session机制决定了当前客户只会获取到session，而不会获取到别人的session。各客户的session也批次独立，互不相见
2.session的使用比cookie方便，但是过多的session存储在服务器内存中，会对服务器在成压力
3.session保存在服务器端，为了获取更高的存取速度，服务器一般把session放在内存里。每个用户都会有一个独立的session，如果session内容过于复杂，当大量客户访问服务器时可能会导致内存溢出。因此，session里的信息应该尽量精简
4.session生命周期：session在用户第一次访问服务器的时候自动创建。session生成后，只要用户继续访问，服务器就会更新session的最后访问时间，并维护该session。
5.session的有效期：为了防止内存溢出，服务器就会把长时间内没有活跃的session从内存删除。这个时间就是session的超出时间，如果超过了时间没访问服务器，session就自动失效了。
6.session对浏览器的要求：因此同一机器的两个浏览器窗口访问服务器，会生成两个不同的session。但是由于浏览器窗口内的连接、脚本等打开的新窗口除外。这类子窗口会共享父窗口的cookie，因此会共享一个session。注意:新开的浏览器会生成新的session，但子窗口除外，子窗口共用父窗口的session。

webstorage

webstorage（包括：localStorage和sessionStorage）是在HTML5提出来的，纯粹为了保存数据，不会与服务器端通信。WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。
（2）提供一种存储大量可以跨会话存在的数据的机制。
HTML5提供了两种在客户端存储数据的新方法：
localStorage–没有时间限制的数据存储
sessionStorage–针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除
注意：如果想要存储对象类型的数据，需要先用JSON.stringify()将其转成字符串在存储（长期无加密存储在本地，容易造成隐私泄露）

cookie，localStorage，sessionStorage 的区别

cookie是在HTML4中使用的给客户端保存数据的，也可以和session配合实现跟踪浏览器用户身份；而webstorage是在HTML5提出了的，纯粹为了保护数据，不会和服务器端通信。
webstorage两个主要目标：
1.提供一种在cookie之外存储会话数据的路径
2.提供一种存储大量可以跨会话存在的数据的机制

相同点：
cookie，localstorage，sessionstorage都是在客户端保存数据的，存储数据的类型都是字符串

不同点：
1.生命周期：
cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了
localstorage的生命周期是永久的，关闭页面或者浏览器之后localstorage中的数据也不会消失，localstorage除非主动删除数据，否则数据永远不会消失
sessionstorage仅在当前会话下有效。sessionStorage引入了一个浏览器窗口的概念，sessionstorage是同源的窗口中始终存在的数据，只要这个浏览器没有关闭，即使刷新页面或者进去同源另一个页面，数据依然存在。但是sessionstorage在关闭了浏览器窗口后就会被销毁。同时独立地打开同一个窗口同一个页面，sessionstorage也是不一样地。
可以简单理解为，sessionstorage没有设置有效期的cookie；localstorage就是设置有效期为永远的cookie。
2.网络流量：
cookie的数据每次都会发送给服务器端，而localstorage和sessionstorage不会与服务器端通信，纯粹就是为了保存数据，所以webstorage更加节约网络流量
3.大小限制：cookie大小限制在4KB，非常小；localstorage和sessionstorage在5M
4.安全性：webstorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说较高，不会担心截获
5.使用方便性上:webstorage提供了一些方法，数据操作比cookie方便；
setItem（key，value）–保存数据，以键值对的方式存储信息
getItem（key）–获取数据，将键值传入，即可获取到对应的value值
remobeItem（key）–删除单个数据，根据键值移除对应的信息
clear（）–删除所有的数据
key（index）–获取某个索引的key