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。

//读取cookie，一次性获取全部cookie。 console.log(document.cookie); //每一个cookie都是以键值对的形式存在，而且经过；分隔。 "BAIDUID=9BD404162B2978E266B82B0D052A12D7:FG=1; BIDUPSID=605A0EB7E85170299BCFFF6C2B042840; PSTM=1474937533; BD_UPN=13314752; ispeed_lsm=6; BDRCVFR[Fc9oatPmwxn]=G01CoNuskzfuh-zuyuEXAPCpy49QhP8; BD_HOME=0; H_PS_PSSID=1440_21421_18240_21116_21454_21377_21526_21191_21399; BD_CK_SAM=1; PSINO=7; H_PS_645EC=9c44kg7jUnDfYs5vfqg9n3QbElgAvuf8phS5ZsmD2FIE2KxSARX534GRQw1z7f0cZ6wu; locale=zh; pgv_pvi=4703388672; pgv_si=s5301332992" //写入cookie，只能一条一条写入。 document.cookie = 'unclekeith=21'; document.cookie = 'sex=boy'; ...

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

var CookieUtil = { //读取cookie，判断某个cookie是否存在。 //读取操做配合 unclekeith=21; sex=boy 这个cookie会更好理解读取cookie的操做。 get: function (name){ var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if (cookieStart > -1){ var cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1){ cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); } return cookieValue; }, //写入cookie。 set: function (name, value, expires, path, domain, secure) { var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString(); } if (path) { cookieText += "; path=" + path; } if (domain) { cookieText += "; domain=" + domain; } if (secure) { cookieText += "; secure"; } document.cookie = cookieText; }, //删除cookie unset: function (name, path, domain, secure){ this.set(name, "", new Date(0), path, domain, secure); } }; 

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

js-cookie

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

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

cnpm install js-cookie --save

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

import Cookies from 'js-cookie';

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

html部分
<p>
    <label for="username">用户名：</label> <input type="text" id='username' name='username' placeholder="请输入用户名"> </p> <p> <label for="password">密码：</label> <input type="password" id='password' name='password' placeholder="请输入密码"> </p> <p> <label for="confirm_password">再次输入密码：</label> <input type="password" id='confirm_password' name='confirm_password' placeholder="再次输入密码"> <input type="checkbox" id='rememberUser'> <label for="rememberUser">记住用户名</label> </p> //js部分 //先判断浏览器是否储存有对应的cookie。 if (Cookies.get('username')) { $("#username").val(Cookies.get('username')); $('#rememberUser').attr('checked',true); }; if (Cookies.get('password')) { $('#password').val(Cookies.get('password')); $('#confirm_password').val(Cookies.get('password')); } //设置cookie。当点击 记住用户名 操做时储存相应的数据。 $('#rememberUser').click(function(){ if (this.checked) { if ($('#username').val() ==='') { alert('请输入用户名'); this.checked = false; } else { Cookies.set('username',$('#username').val(),{ path:'/', expires: 1 }); Cookies.set('password',$('#password').val(),{ path:'/', expires: 1 }) } } });

运用JS设置cookie、读取cookie、删除cookie

JavaScript是运行在客户端的脚本，所以通常是不可以设置Session的，由于Session是运行在服务器端的。

而cookie是运行在客户端的，因此能够用JS来设置cookie. 

假设有这样一种状况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，一样须要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会从新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？ 

首先须要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间通常是以“;”分隔。 

JS设置cookie:
 
假设在A页面中要保存变量username的值("jack")到cookie中,key值为name，则相应的JS代码为： 

document.cookie="name="+username;  

JS读取cookie:
 
假设cookie中存储的内容为：name=jack;password=123
 
则在B页面中获取变量username的值的JS代码以下：

var username=document.cookie.split(";")[0].split("=")[1];  

//JS操做cookies方法! 

//写cookies 

function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 

//读取cookies 

function getCookie(name) 
{ 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
    if(arr=document.cookie.match(reg))
 
        return unescape(arr[2]); 
    else 
        return null; 
} 

　　或

    function getCookie(name){
            if(name){
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                if(arr=document.cookie.match(reg))
                    return (decodeURIComponent(arr[2]));
                else
                    return null;
            }
            return null;
        };

　　

//删除cookies 

function delCookie(name) 
{ 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) 
        document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
} 

 

//使用示例 setCookie("name","hayden"); alert(getCookie("name")); //若是须要设定自定义过时时间 //那么把上面的setCookie　函数换成下面两个函数就ok; //程序代码 function setCookie(name,value,time){     var strsec = getsec(time);     var exp = new Date();     exp.setTime(exp.getTime() + strsec*1);     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getsec(str){    alert(str);    var str1=str.substring(1,str.length)*1;    var str2=str.substring(0,1);    if (str2=="s")   {         return str1*1000;    }   else if (str2=="h")   {        return str1*60*60*1000;    }   else if (str2=="d")   {        return str1*24*60*60*1000;    } } //这是有设定过时时间的使用示例： //s20是表明20秒 //h是指小时，如12小时则是：h12 //d是天数，30天则：d30 setCookie("name","hayden","s20");