大话Cookie

据我对cookie诞生背景的了解，cookie是由网景公司创建的，目的就是将用户的数据储存在客户端上。伴随的HTML5的出现，现在又有另外一个解决数据离线储存的方案，就是HTML5中的Web storage，其中两个重要对象sessionStorage和localStorage可以解决浏览器sessions和长期储存数据的目的，并且兼容性还不错，IE8+以上浏览器都支持。

那我们直接学习Web storage不就可以了？个人认为，这不是一个很好的学习方法。Web Storage的出现主要还是因为cookie的一些小毛病不能够满足前端工程师日常开发而被加入到HTML5中作为新的API的。本质上说，localStorage和sessionStorage实现的本质与cookie是一样的。所以在接触之前，先熟悉并且掌握cookie对于Web storage的学习还有很大的帮助。

这篇文章会涉及的内容与技术：

• module bundler：webpack

• javascirpt如何实现读取，写入，删除Cookie

• js-cookie实现读取，写入，删除Cookie

cookie定义

cookie其实就是服务器保存在浏览器的一小段文本信息。怎么保存呢？浏览器在向服务器发送一个http请求时，会在发送请求的首部字段中添加Cookie字段，并且附上相应的key，value。服务器接收到请求并且正确返回响应的时候，会在响应的头部字段中添加Set-cookie字段。这时候就完成了一次数据储存的操作。当我们关闭浏览器并且再次打开的时候，相应需要存储的信息就会在expires指定的期限内存储下来。

简单的说，就是：

• 当用户访问web页面时，他的记录可以保存在cookie中。

• 在用户下一次访问同一页面时，可以在cookie中读取用户的访问记录。

cookie特点

• 每个cookie的大小不能超过4KB。

• 通过HTTP协议的方式来存储数据。

• cookie会影响同一域名下的根目录及其子目录。举例来说，如果当前URI是keithchou.github.io，如果设置path为'/'或者不设置（默认值为/），这个cookie对该域名的根路径和它的所有子路径都有效。如果path设置为/music，那么这个cookie只有在访问keithchou.github/music及其子路径才有效。

• 同源政策。浏览器的同源政策规定，两个网址只要域名和端口相同，就可以共享cookie。注意，这里不要求协议相同。也就是说，'http://keithchou.com'设置的cookie，可以被'https://keithchou.com'读取。

cookie属性

cookie常用的属性有：

• value

• domain

• path

• expires

• secure

• HttpOnly

属性的具体内容就不再赘述了，属性都比较简单。

cookie实现

接下来想说说两种方式来实现cookie。一是原生javascript实现cookie，二是通过js-cookie这个小框架来实现cookie。

javascript实现数据存储

基本的cookie操作有三种：读取、写入和删除。javascript操作cookie主要是通过document.cookie来实现的。document.cookie的一大特点是，可以读取所有的Cookie，但是每次写入cookie的时候只能一条一条写入。看一个从百度获取的cookie。

原生javascript实现cookie的方法如下。此代码摘自《javascript高级程序设计 第三版》。

javascript实现cookie的代码并不复杂，只要有javascript基础，基本上都可以看懂。给出原生javascript实现cookie的操作是因为要去实际的了解一下整个过程，不然使用前端大牛封装好的库来实现cookie总感觉有一些东西特别难以理解。

js-cookie

首先我想说的是，网上大量的资料都是对$.cookie进行介绍的。官网明确指出这个项目已经不再继续维护了。为什么还要使用阿？所以不再介绍。这里要介绍另外一个实现cookie的库。js-cookie。具体的api在官网上有详细的介绍。传送门：js-cookie

首先，进入本地项目，通过cnpm安装js-cookie。

然后，在使用webpack中的入口文件entry.js引入js-cookie。

当然，接下来就可以使用了。下面是一个登录界面的小demo。