客户端存储的探究

今天主要对客户端的存储进行探究，客户端存储的方法有两种：

• storage ：不会传到服务器
• cookie ：会传到服务器上

cookie是早期的客户端存储机制，期初是针对服务器脚本设计使用的。尽管在客户端提供了非常繁琐的JavaScript API来操作cookie，但是它们难用至极，而且只适合存储少量文本数据。任何以cookie形式存储的数据，不论服务器端是否需要，每一次HTTP请求都会把这些数据传输到服务器。cookie目前仍然被客户端程序员大量使用的一个重要原因是：所有新旧浏览器都支持它。但是，随着Web Storage 的普及，cookie将会回归到最初的形态：作为一种服务器脚本使用的客户端存储机制。
那为什么会出现storage？

1. cookie的存储量小
2. cookie会把信息发送到服务器端，但是有一些信息或者属性对后端是没有用的，还占用带宽影响性能

localStorage的用法：

存储有效期
localStorage：永久的，除非手动删除。
sessionStorage：临时的，窗口关闭就没有了。

存储作用域
localStorage：
1.受文档源的限制，文档源就是同一个域下的。文档源是通过协议、主机名以及端口三者来确定的，因此下面每个URL拥有不同文档源：

• http://www.example.com //协议：http；主机名:www.example.com
• https://www.example.com //不同协议
• http://static.example.com //不同主机名
• http://www.example.com：8080 //不同端口

2.也受浏览器供应商的限制。如果你使用Firefox访问站点，那么下一次用另一个浏览器（比如Chrome）再次访问的时候，那么本次无法获取上次存储的数据的

sessionStorage ：不仅受文档源的限制，而且还受窗口的限制。如果同源的文档渲染在不同的浏览器标签中，那么它们拥有各自的sessionStorage的数据，无法共享（需要注意的是，现代浏览器已经具备了重新打开最近关闭的标签页随后恢复上一次浏览的会话功能，因此，这些标签页以及与之相关的sessionStorage的有效期可能更加长一些）。

存储API

1. setItem() 设置属性和值 getItem() 获取属性的值
   
2. removeItem() 把名字传递进去可以删除对应的值
   
3. clear() 不需要参数，可以删除所有存储的数据
   

cookie
cookie是指web浏览器存储的少量数据，只有4k。cookie最早是设计为服务器端所用的，从底层看，作为HTTP协议的一种拓展实现它。cookie数据会自动在web浏览器和web服务器之间传输的，因此服务端脚本就可以读、写存储在客户端的cookie的值。

检测cookie是否启用,在绝大数浏览器中，可以用navigator.cookieEnabled这个属性来检测，要是true，则当前cooki是启用的；反之则是禁用的。

JS中的编码和解码
由于cookie的名/值中的值是不允许包含分号、逗号和空白符，因此，在存储前一般可以采用js核心的全局函数encodeURlComponent()对值进行编码。相应的，读取cookie的时候采用decodeURIComponent()解码

encodeURlComponent()编码和decodeURIComponent()解码

设置cookie的值
document.cookie="name=bobo"
(每一次只能设置一个值，因为浏览器会认为后面的键值对是这个cookie的属性)

获得cookie的值
document.cookie如果要获取指定的某个属性的话，要自己去分割，下面是cookie分割函数：

cookie 的存储周期
cookie的默认的有效期很短暂；它只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就会丢失。需要注意的是：这与sessionStorage的有效期还是有区别的：cookie的作用域并不是局限在浏览器的单个窗口中，它的有效期和整个浏览器进程而不是单个浏览器窗口的有效期一致。如果想延长cookie的有效期，可以通过max-age属性，但必须告诉浏览器cookie的有效期是多长（单位是秒）。一旦设置了有效期，浏览器就会将cookie数据存储在一个文件中，并且知道过了指定的有效期才会删除该文件。

1.设置cookie的存储有效期可以用max-age，单位 秒
document.cookie = "name=bobo;max-age=1000";
2.expires 当前时间加上保存时间
如果想删除cookie，可以通过封装一个函数，是用过期时间来删除的，把时间设置比当前时间小就可以了，浏览器会自动删除。

3. path
有时候你可能希望让整个网站都能使用cookie的值，而不管是哪个页面创建它的。比方说，当用户在一个页面表单中输入了他的邮件地址，你想将它保存下来，为了下次该用户回到这个页面填写表单，或者在网站的其它页面的任何地方要求输入账单地址的时候，将其作为默认的邮件地址。要满足这样的需求，可以设置cookie路径（设置cookie的path属性），这样一来，来自同一个web服务器的页面，只要URL是以指定的路径前缀开始的，都可以共享cookie。例如：http://www.exapple.com/catalo...，并且将路径设置成“/catlog”，那么该cookie对于http://www.example.com/catalo...，如果把路径设置成 “ / ”，那么该cookie对于任何http://www.example.com这台web...。
4.domain
cookie的作用域默认是文档源限制。但是，有的大型网站想要子域之间能够互相共享cookie。比如，order.example.com域下的服务器想要读取catalog.example.com域下设置的cookie值。这个时候可以通过设置cookie的domain属性达到目的。例如：catalog.example.com域下的页面创建了一个cookie，并将其path属性设置成“ / ”，其domain属性设置成“ .example.com ”，那么该cookie就对所以catalog.example.com、orders.example.com以及任何以example.com域下的任何其他服务器都可见。

cookie和storage区别