偏前端--之小白学习本地存储与cookie

百度了很多都是讲的理论，什么小于4kb啊之类的，小白看了一脸懵逼复制到html中为什么没效果！！
哈哈。我来写一个方便小白学习。 贴图带文字描述，让小白也运行起来，然后自己再去理解。。。

1. cookie 是存储于访问者的计算机中的变量，用来存放一些数据。

      在我们浏览页面时，经常会填写自己的名字等，这些会被存放于cookie中。

　　大小限制4K，可以用来实现session跟踪，在服务器保存session状态。自动参与http通信。

　　生命周期：浏览器全局共享，域名隔离。

2.名称:cookie的名称,不区分大小写;

   值:存储在cookie中的字符串,必须被URL编码;

   域:cookie对于哪个域是有效的,如果没有明确确定,那么这个域会被认作来自设置cookie的那个域。

   路径:指定域中的那个路径应该向服务器发送cookie;例如:设置http://www.wrox.com/books才能访问,那么即使同一域名下的http://www.wrox.com的页面就不会发送cookie信息,即使请求都是来自同一域名下的。

   删除时间:用于删除cookie的准确时间,这个值是个GMT格式的日期(Wdy,DD-Mon-YYYY HH:MM:SS GMT)

   安全标志:指定后,cookie只有在使用SSL连接的时候菜发送到服务器。例如只能用https而不能用http发送。

        // 设置 cookie 字段
    document.cookie = 'name=Lucy';
            
    // 更好的设置方式：
    document.cookie = encodeURIComponent('age') + '=' + 
        encodeURIComponent(25);
            
    // 访问 cookie
    document.cookie
            
    // 删除 cookie（设置存储有效时长为过去时间）
    var date = new Date();
    date.setDate(date.getDate() + '设置时长');
    document.cookie = 'name=Lucy;expires=' + 
        date.toUTCString();

二、javascript处理cookie（小示列）

 

Cookie格式:

     Document.cookie=name=value;

　  expires=expiration_time;

     path=domain_path;

     domain=domain_name; 只有名字和值键值对是必须的

     例如:把name=sss,时间1天,域名为www.baidu.com, 路径为www.baidu.com/books;

     Document.cookie=”name=sss”;expires=(Date.getDate()+1*24*3600*1000).toGMTString();domain=www.baidu.com; path=”www.baidu.com/books;”;

---

这样的读写很不直观,一般会写些函数来简化cookie的功能;基本的三种操作:设置,读取,删除：

   var cookieUtil={
      /*设置cookie*/
    set:function(name,value,expires,path,domain,secure){
        var cookie=encodeURIComponent(name)+"="+encodeURIComponent(value);
        if(expires instanceof Date){
          cookie+="; expires="+expires.toGMTString();
        }else{
            var date=new Date();
            date.setTime(date.getTime()+expires*24*3600*1000);
            cookie+="; expires="+date.toGMTString();
        }
        if(path){
            cookie+="; path="+path;
        }
        if(domain){
            cookie+="; domain="+domain;
        }
        if (secure) {
            cookie+="; "+secure;
        }
        document.cookie=cookie;
    },
    /*获取cookie*/
    get:function(name){
        var cookieName=encodeURIComponent(name);
        /*正则表达式获取cookie*/
        var restr="(^| )"+cookieName+"=([^;]*)(;|$)";
        var reg=new RegExp(restr);
        var cookieValue=document.cookie.match(reg)[2];
        /*字符串截取cookie*/
        /*var cookieStart=document.cookie.indexOf(cookieName+“=”);
        var 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：

　　　　function setcookie(name,value,iday){

　　　　　　var odate=new Date();

　　　　　　odate.setDate(odate.getDate()+iday);

　　　　　　document.cookie=name+"="+value+";expires="+odate;

　　　　}

　　　　获取cookie：

　　　　function setcookie(name){

　　　　　　var cookies=document.cookie;

　　　　　　var arr1=cookies.split("; ");

　　　　　　for (i=0;i<arr1.length;i++){

　　　　　　　　var arr2=arr1[i].split("=")

　　　　　　　　if(name==arr2[0]){

　　　　　　　　　　return arr2[1];

　　　　　　　　}

　　　　　　}

　　　　　　return false;

　　　　}

　　　　删除cookie：

　　　　function removecookie(name){

　　　　　　setcookie(name,"","-1")  //通过建立cookie的时间设置，将时间设置为提前一天；

　　　　}

　　

 

---

 

三、前端开发中的cookie使用总结

cookie 是存储于用户的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。可以使用 JavaScript或者jQuery 来创建和读取cookie 的值。
cookie 应用举例：
  　　　　　　　　当用户首次访问页面时，页面或许会要求填写用户的用户名和密码。用户名和密码可以被存储于 cookie 中。

  　　　　　　　　当他们再次访问网站时，用户名和密码就会从 cookie 中取回，无需用户再去重新输入。

一、使用JavaScript操作cookie

　　1.创建和存储cookie。　　　

// 函数中的参数分别为 cookie 的名称、值以及过期天数
function setCookie(c_name,value,expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',1); // cookie过期时间为1天。

// 如果要设置过期时间以秒为单位
function setCookie(c_name,value,expireseconds){
    var exdate=new Date();
    exdate.setTime(exdate.getTime()+expireseconds * 1000);
    document.cookie=c_name+ "=" +escape(value)+
    ((expireseconds==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',3600);  //cookie过期时间为一个小时

       从下图中可以看出，cookie设置成功。 

       2.读取cookie值

// 函数中的参数为 要获取的cookie键的名称。
function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1){ 
                c_end=document.cookie.length;
            }

            return unescape(document.cookie.substring(c_start,c_end));
        }
     }

    return "";
}
var uname= getCookie('name');
console.log(uname);

          从下图中可以看出，获取到了名称为name的cookie值：zzyn。 

 

　　　　3.判断cookie是否存在

// 函数中的参数为，要判断的cookie名称
 function checkCookie(c_name){
    username=getCookie(c_name);
    if (username!=null && username!=""){
        // 如果cookie值存在，执行下面的操作。
        alert('Welcome again '+username+'!');
    }else{
        username=prompt('Please enter your name:',"");
        if (username!=null && username!=""){
            //如果cookie不存在，执行下面的操作。
            setCookie('username',username,365)
        }   
    }
}

---

---

---

---

二、jQuery操作cookie 

首先要引入jquery的库文件，之后再引入 jquery.cookie.js 的库文件，顺序不可颠倒。 
jquery.cookie.js 的库文件可以去jQuery插件库下载。附上地址： 
http://www.jq22.com/jquery-info254

<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

　　　　1.设置cookie

$.cookie('uid', '10001');  //存储 uid=10001 在cookie中

注：没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止。

$.cookie('uid', '10001',{ expires: 7,path:'/',secure:false,raw:false});  // 存储 uid=10001 在cookie中

注：设置cookie有效时间为7天，有效路径为根目录。
在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突） 。

var date = new Date();
date.setTime(date.getTime()+60*60*1000);
$.cookie('uid', '10001',{expires:date,path:'/',secure:false,raw:false}); 

注：设置 cookie有效时间为1个小时。

　　　　2.读取cookie

$.cookie('uid'); // cookie存在 => '10001' 
$.cookie('uname'); // cookie不存在 => null 

　　　　3.删除cookie

$.cookie('uid',null); // 删除名称为uid的cookie值 

　　　　参数的解释： 

　　　　1).expires: 365

　　　　定义cookie的有效时间，值可以是一个数字（从创建cookie时算起，以天为单位）或一个Date 对象。如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。

　　　　2).path: ‘/’

　　　　默认情况：只有设置cookie的网页才能读取该cookie。
　　　　定义cookie的有效路径。默认情况下， 该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为）。如果你想在整个网站中访问这个cookie需要这样设置有效路径：path: ‘/’。如果你想删除一个定义了有效路径的 cookie，你需要在调用函数时包含这个路径:$.cookie(‘the_cookie’, null,
　　　　{ path: ‘/’ });。 domain: ‘example.com’
　　　　默认值：创建 cookie的网页所拥有的域名。

　　　　3).secure: true

　　　　默认值：false。如果为true，cookie的传输需要使用安全协议（HTTPS）。

　　　　4).raw: true

　　　　默认值：false。
　　　　默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用encodeURIComponent 编码， decodeURIComponent 解码）。要关闭这个功能设置 raw: true 即可。