cookie入门理解--自动填写用户登录信息的实现原理

cookie是什么

cookie就是服务器放在用户机器上的一小块信息。cookie以前用来保存登录信息，这样用户就不用每次从同一台机器访问页面都要再次输入登录信息。cookie是第一个js可以利用的客户端-服务端的通信手段，每次客户端向服务器发送请求时，为这个服务器存储的cookie会与其他信息一起放入http包中发送到服务器。

cookie的成分

名称、值（必需）；域（网站不能访问其他域生成的cookie）、路径（将cookie的访问权限控制在服务器中的特定目录）、失效日期（规定cookie何时应该删除，默认下关闭浏览器时就会删除cookie，也可以自己设置删除时间）、安全标志（true还是false）

cookie限制

每个域在一台用户机器上最多只能存储20个cookie；
每个cookie总尺寸不超过4KB即4096Byte；
一台用户机器上的cookie总数最多为300个。

用JS设置和获取cookie

使用document.cookie可以获取给定页面可以访问的所有cookie组成的字符串；每个cookie之间用分号间隔
创建一个cookie就是创建一个符合格式的字符串：
cookie_name=cookie_value; expires = expiration_time; path = domain_path; domain = domain_name; secure
其中名称和值时必须的。将这个字符串赋值给document.cookie就创建了一个cookie。

自动填写用户登录信息的实现原理

示例：填写表单，选择”记住我“复选框

实现原理：
浏览器将表单数据封装在HTTP请求发送给服务器，服务器接收到请求后先检查”记住我“复选框有没有勾选，若勾选，则设置cookie其实就是创建字符串，往字符串添加用户的名字和邮件地址等信息。服务器在返回响应时，会将设置的cookie封装在HTTP响应中发送给浏览器。浏览器在接收到响应后，先查看是否有cookie信息，若有，则将服务器返回的cookie信息存储起来。

当用户再一次从同一台机器上访问同一个页面时，服务器会将请求页面HTML文件发送给浏览器，浏览器渲染此HTML页面时会执行页面中的JS代码。页面中的JS代码会先检查用户名和邮件地址是否已经存储在cookie中，若是，则执行从本地存储读取cookie的操作（利用document.cookie获取），然后从cookie字符串中提取需要的字符串即用户名和邮件地址等，最后将提取上来的字符串填入表单对应的字段中。这样，用户就不用再输入登录信息了。