码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-12-29 11:54:30      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:函数   string   正则表达式   ons   tco   .com   个数   键值   字符串   

百度了很多都是讲的理论,什么小于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的功能;基本的三种操作:设置,读取,删除

 1    var cookieUtil={
 2       /*设置cookie*/
 3     set:function(name,value,expires,path,domain,secure){
 4         var cookie=encodeURIComponent(name)+"="+encodeURIComponent(value);
 5         if(expires instanceof Date){
 6           cookie+="; expires="+expires.toGMTString();
 7         }else{
 8             var date=new Date();
 9             date.setTime(date.getTime()+expires*24*3600*1000);
10             cookie+="; expires="+date.toGMTString();
11         }
12         if(path){
13             cookie+="; path="+path;
14         }
15         if(domain){
16             cookie+="; domain="+domain;
17         }
18         if (secure) {
19             cookie+="; "+secure;
20         }
21         document.cookie=cookie;
22     },
23     /*获取cookie*/
24     get:function(name){
25         var cookieName=encodeURIComponent(name);
26         /*正则表达式获取cookie*/
27         var restr="(^| )"+cookieName+"=([^;]*)(;|$)";
28         var reg=new RegExp(restr);
29         var cookieValue=document.cookie.match(reg)[2];
30         /*字符串截取cookie*/
31         /*var cookieStart=document.cookie.indexOf(cookieName+“=”);
32         var cookieValue=null;
33         if(cookieStart>-1){
34             var cookieEnd=document.cookie.indexOf(";",cookieStart);
35             if(cookieEnd==-1){
36                 cookieEnd=document.cookie.length;
37             }
38             cookieValue=decodeURIComponent(document.cookie.substring(cookieStart
39             +cookieName.length,cookieEnd));
40         }*/
41         return cookieValue;
42     }
43 }

 


 

    创建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。   

 1 // 函数中的参数分别为 cookie 的名称、值以及过期天数
 2 function setCookie(c_name,value,expiredays){
 3     var exdate=new Date();
 4     exdate.setDate(exdate.getDate()+expiredays);
 5     document.cookie=c_name+ "=" +escape(value)+
 6     ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
 7 }
 8 setCookie(‘name‘,‘zzyn‘,1); // cookie过期时间为1天。
 9 
10 // 如果要设置过期时间以秒为单位
11 function setCookie(c_name,value,expireseconds){
12     var exdate=new Date();
13     exdate.setTime(exdate.getTime()+expireseconds * 1000);
14     document.cookie=c_name+ "=" +escape(value)+
15     ((expireseconds==null) ? "" : ";expires="+exdate.toGMTString())
16 }
17 setCookie(‘name‘,‘zzyn‘,3600);  //cookie过期时间为一个小时

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

技术分享图片

 

       2.读取cookie值

 1 // 函数中的参数为 要获取的cookie键的名称。
 2 function getCookie(c_name){
 3     if (document.cookie.length>0){
 4         c_start=document.cookie.indexOf(c_name + "=");
 5         if (c_start!=-1){
 6             c_start=c_start + c_name.length+1;
 7             c_end=document.cookie.indexOf(";",c_start);
 8             if (c_end==-1){ 
 9                 c_end=document.cookie.length;
10             }
11 
12             return unescape(document.cookie.substring(c_start,c_end));
13         }
14      }
15 
16     return "";
17 }
18 var uname= getCookie(‘name‘);
19 console.log(uname);

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

 技术分享图片

 

    3.判断cookie是否存在

 1 // 函数中的参数为,要判断的cookie名称
 2  function checkCookie(c_name){
 3     username=getCookie(c_name);
 4     if (username!=null && username!=""){
 5         // 如果cookie值存在,执行下面的操作。
 6         alert(‘Welcome again ‘+username+‘!‘);
 7     }else{
 8         username=prompt(‘Please enter your name:‘,"");
 9         if (username!=null && username!=""){
10             //如果cookie不存在,执行下面的操作。
11             setCookie(‘username‘,username,365)
12         }   
13     }
14 }

 





 

二、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 即可。

 

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

标签:函数   string   正则表达式   ons   tco   .com   个数   键值   字符串   

原文地址:https://www.cnblogs.com/Lrn14616/p/10194856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!