发表于: 2017-06-05 20:18:56

0 1160


2017-06-05 Day076 x

今天完成的事情

上午解决了日期插件的数据绑定问题和格式化问题。显示问题还没看。

明天计划的事情

先把这个表单模块写了,先用写死的,后面看能优化就优化一下。

遇到的问题

  1. 引入datepiker的时候还有两个模块要引入,昨天忘记了,今天补了一下:
imports: [
   AccordionModule.forRoot(),
   ButtonsModule.forRoot(),
   AlertModule.forRoot(),
   DatepickerModule.forRoot(),//datepicker
   ]

这四个模块都是需要从ngx-bootstrap里面引入的。
然后是数据绑定的问题:研究了一圈发现,如果在一个模块中存在表单双向绑定和其他数据双向绑定,那么其中一种双向绑定必须设置成独立的,Angular不允许数据混乱,所以会报错。只需要在其中一个数据绑定中添加[ngModelOptions]="{standalone: true}"那么这两种双向数据绑定就会分离开:

<div>
 <label for="dateTo"></label>
 <input type="text" name="dateTo" id="dateTo"
        (focus)="toShown=true"
        ngModel>
 <div *ngIf="toShown" style="min-height:290px; display: inline-block;">
   <datepicker [(ngModel)]="dtt" [ngModelOptions]="{standalone: true}" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>
   <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
   <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
   <button type="button" class="btn btn-sm btn-info" (click)="setTo()"></button>
 </div>
</div>

这样就解决了昨天两个双向绑定同时绑定一个date报错的情况。
2. 看上去解决了一个问题,实际上当对date进行格式化的时候又会报错,比如刚开始对date进行格式化:

[(ngModel)]="dtf | date: 'yy-MM-dd'" //使

解决方式:将上面的双向绑定改成属性绑定:

[value]="dtf | date: 'yy-MM-dd'"

这样做的原因其实我也不是很清楚,自己私下是这么想的:输入框输入的可能是任意字符串,而dateDate格式,那么怎么可能把任意字符串转换成日期呢,这样显然是不合理的。

收获

上午的收获就这么多,下午做了小课堂的PPT。总结如下。

什么是cookie

大家好,我是IT修真院成都分院第5期的学员,一枚正直纯洁善良的web程序员
今天给大家分享一下,修真院官网js任务6,深度思考中的知识点——什么是cookie?


1. 背景介绍

什么是COOKIE

Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端 上的数据(通常经过加密)。定义于 RFC2109 和 2965 中的都已废弃,最新取代的规范是 RFC6265 。 ---- 百度百科

在现代浏览器中其它类型的cookie有重要的作用。可能最重要的就是权限认证cookie,通过这种最常用的方法web服务器可以知道用户登录登出,以及正在登录的账号。

2. 知识剖析

cookie有哪几种?
一般来说cookie分为以下7种:

  1. 1. Session Cookie
    这个类型的cookie只在会话期间内有效,即当关闭浏览器的时候,它会被浏览器删除。设置session cookie的办法是:在创建cookie不设置Expires即可。
  2. 2. Persistent Cookie
    持久型cookie顾名思义就是会长期在用户会话中生效。当你设置cookie的属性Max-Age为1个月的话,那么在这个月里每个相关URL的http请求中都会带有这个cookie。所以它可以记录很多用户初始化或自定义化的信息,比如什么时候第一次登录及弱登录态等。
  3. 3. Secure cookie
    安全cookie是在https访问下的cookie形态,以确保cookie在从客户端传递到Server的过程中始终加密的。这样做大大的降低的cookie内容直接暴露在黑客面前及被盗取的概率。
  4. 4. HttpOnly Cookie
    ttpOnly属性指示浏览器除了HTTP/HTTPS请求之外不要显示cookie。这意味着这种cookie不能在客户端通过脚本获取,因此也不会轻易的被跨站脚本窃取。目前主流的浏览器已经都支持了httponly cookie。1.IE5+ 2.Firefox 1.0+ 3.Opera 8.0+。
  5. 5. 3rd-party cookie
    第一方cookie是cookie种植在浏览器地址栏的域名或子域名下的。第三方cookie则是种植在不同于浏览器地址栏的域名下。例如:用户访问a.com时,在ad.google.com设置了个cookie,在访问b.com的时候,也在ad.google.com设置了一个cookie。这种场景经常出现在google adsense之类的广告服务商。广告商就可以采集用户的一些习惯和访问历史。
  6. 6. Super Cookie
    超级cookie是设置公共域名前缀上的cookie。通常a.b.com的cookie可以设置在a.b.comb.com,而不允许设置在.com上,但是很不幸的是历史上一些老版本的浏览器因为对新增后缀过滤不足导致过超级cookie的产生。
  7. 7. Zombie Cookie
    僵尸cookie是指那些删不掉的,删掉会自动重建的cookie。僵尸cookie是依赖于其他的本地存储方法,例如flash的share object,html5的local storages等,当用户删除cookie后,自动从其他本地存储里读取出cookie的备份,并重新种植。

3. 常见问题

COOKIE的用处

  1. 1. 保存用户的登陆状态,用户进行登陆,成功登陆后,服务器生成特定的cookie返回给客户端,客户端下次访问该域名下的任何页面,将该cookie的信息发送给服务器,服务器经过检验,来判断用户是否登陆。
  2. 2. 记录用户的行为,例如,我们在某宝上搜索商品之后,下次再进入某宝的时候就会发现一堆推荐的商品。
  3. 3. 电商购物车的处理,因为在不同页面,点击添加到购物车,这个信息也是记到了cookie里面。结账的时候统一提交。现在不易都记录在服务器的session,不会存储在本地cookie。
  4. 4. 定制页面。如果网站提供了换肤的功能,我们这个时候也是将他记录到cookie里面,以便下次访问还是保持原来的风格页面。

COOKIE和SESSION的的区别

  1. 1. 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案。同时我们也看到,由于才服务器端保持状态的方案在客户端也需要保存一个标识,所以session机制可能需要借助于cookie机制来达到保存标识的目的,但实际上还有其他选择。
  2. 2. HTML5标准(绝大多数现代浏览器在某种程度上都支持)包含了一个Javascript API叫做Web storage:local storage和session storage。local storage的行为和持久化cookie类似,而session storage的行为和session cookie的行为类似,也就是session storage是绑定在一个单独的tab或者窗口的生命周期中的(也就是页面session),而session cookie是针对整个浏览器的。

如何利用实现自动登录

  • 当用户在某个网站注册后,就会收到一个惟一用户ID的cookie。客户后来重新连接时,这个用户ID会自动返回,服务器对它进行检查,确定它是否为注册用户且选择了自动登录,从而使用户务需给出明确的用户名和密码,就可以访问服务器上的资源。

5. 编码实战

js中cookie的操作
(这里偷懒引用一下任昊师兄的代码)

unction saveCookie(){
       var userName = document.getElementById("username").value;
       var password = document.getElementById("password").value;
       console.log(userName+password);
       var date = new Date();
       //  date.setDate(date.getDate()+1);
       date.setTime(date.getTime()+5000);
       //cookie5
       setCookie("userName",userName,date.toGMTString(),"","","");
       setCookie("password",password,date.toGMTString(),"","","");
       showCookie()
   }
//Cookie
   /*
    cookie使;,=cookie
   
    encodeURI()使
    “20%”cookie使
    cookiedecodeURI()cookie
    Cookie"name=value; expires=evalue; path=pvalue;"
    '+'(; );
    :
    name:使user@domain
    userdomain访value
    expires;
    path:Cookie()
    domain:webCookie(test*.com)test*.com
    Cookie
    secureCookieSSH
    */

好,注释很详细,我们下面来进行cookie 的读写:

function setCookie(name,value,expires,path,domain,secure){
       document.cookie=name+"="+encodeURI(value)+
           ((expires) ? "; expires=" + expires : "")+
           ((path) ? "; path=" + path : "")+
           ((domain) ? "; domain=" + domain : "")+
           ((secure) ? "; secure=" + secure : "");
   }//
   /**
    Cookiecookiecookie
    cookie
    cookie
    **/
   //Cookie
   function getCookie(cName){
       var cookieString = decodeURI(document.cookie);
       var cookieArray = cookieString.split("; ");
       console.log(cookieArray.length);
       for(var i = 0; i < cookieArray.length; i++){
           var cookieNum = cookieArray[i].split("=");
           console.log(cookieNum.toString());
           var cookieName = cookieNum[0];
           var cookieValue = cookieNum[1];
           if(cookieName == cName){
               return cookieValue;
           }
       }
       return false;
   }
   function showCookie(){
       var txt =  document.getElementById("txt_showCookie");
       txt.value = ""+getCookie("userName")+"\n"+getCookie("password");
   }
   //Cookiecookieexpires
   function deleteCookie(){
       var date = new Date();
       date.setTime(date.getTime()-1000);
       setCookie("userName",password,date.toGMTString(),"","","");
       setCookie("password",password,date.toGMTString(),"","","");
       showCookie();
   }

6. 扩展思考

COOKIES的缺点有哪些
除了隐私问题,cookie还有其他的技术缺陷。特别是它不能总是精确的标识用户,它可以被用来进行安全攻击,而且还与REST软件设计风格相悖。

  1. 1. 错误识别:
    如果一台电脑上使用多了浏览器,那么每个浏览器都会给cookie一个单独的存储空间。因此cookie不是标识一个人,而是作为一个用户账号,一台电脑,一个浏览器之间的连接。因此任何使用多个账号多台电脑以及多个浏览器的用户都会有多个cookie。同样的,cookie不能区分共享一个账号一台电脑一个浏览器的多个用户。
  2. 2. 客户端和服务端不一致的状态
    使用cookie可能在客户端状态和存储在cookie中的状态之间产生不一致性。如果用户取得了一个cookie,然后点击了浏览器的返回按钮,然后浏览器的状态通常不会和之前获取的状态一样了。例如,如果一个网上商城的购物车用cookie来实现的,在用户回退浏览器历史时,购物车里面的内容可能不会改变,如果用户按了一个按钮往购物车里面添加了一个物品,然后点击了浏览器的返回按钮,这个新增的物品还会保留在购物车中。这可能不是用户的意图,用户可能只想撤销之前选择新物品的操作。这可能导致不可靠、混乱和错误。所以web开发者应该注意这个问题,想到方法处理类似的问题。
    (详细和如何处理可以查看参考三,讲的相当好。)

7. 参考文献

a. 什么是跨域
b. 全面解读HTTP Cookie
c. Ajax常见问题

8. 相关链接

PPT:https://ptteng.github.io/PPT/PPT/js-06_cd_what_is_cookie.html

腾讯视频https://v.qq.com/x/page/z0510xkbdm5.html

日报链接http://www.jnshu.com/daily/25069?dailyType=others&total=85&page=1&uid=9948&sort=0&orderBy=3


技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请码:99483716,或者你可以直接点击此链接:IT修真院



返回列表 返回列表
评论

    分享到