隨筆記錄零碎javascript知識點

標籤：cookie   get   ice   splay   turn   .com   介面   機制   操作   

1、字串的截取
 var str="www.baidu.com/?page";
 // 1、substring() indexOf() str.lastIndexOf()字串剪裁
 str.substring(0, str.indexOf("?page"));
 str.substring(0, str.lastIndexOf("?page"));
 // 2、Regex
 str.replace(/?page/, "");
 // 3、split()  join() 字串分拆、合并
 str.split("?page").join("");
 //4、splice() indexOf() str.lastIndexOf()字元截取
 str.splice(str.indexOf("?page"),"?page".length,‘‘)
 str.splicestr.lastIndexOf("?page"),"?page".length,‘‘)
 //5、substr(start,length)字串截取  length代表截取的長度
 str.substr(0,str.indexOf("?page"))
 str.substr(0,str.lastIndexOf("?page"))
 使用方式：
 1、4、5在Goolge運行最快，
 2、除了在goolge最快
 3、最慢，因為它執行了字元專數組，數組轉字元
 建議：沒有要求只在goolge環境下使，使用正則表達是截取

2、擷取當前星期
 1、if判斷
  var str = "";
  var week = new Date().getDay();
  if (week == 0) {
          str = "今天是星期日";
  } else if (week == 1) {
          str = "今天是星期一";
  } else if (week == 2) {
          str = "今天是星期二";
  } else if (week == 3) {
          str = "今天是星期三";
  } else if (week == 4) {
          str = "今天是星期四";
   } else if (week == 5) {
          str = "今天是星期五";
   } else if (week == 6) {
          str = "今天是星期六";
   }else{
   console.log(‘bug‘)
  }
 2、switch判斷
  var str1 = "今天是星期";
  var week = new Date().getDay();
  switch (week) {
          case 0 :
                  str1 += "日";
                  break;
          case 1 :
                  str1 += "一";
                  break;
          case 2 :
                  str1 += "二";
                  break;
          case 3 :
                  str1 += "三";
                  break;
          case 4 :
                  str1 += "四";
                  break;
          case 5 :
                  str1 += "五";
                  break;
          case 6 :
                  str1 += "六";
    break;
   default:
    console.log(‘bug‘)
    break;
  }
 
 3、數組截取
   var a = new Array("日", "一", "二", "三", "四", "五", "六");
      var week = new Date().getDay();
       var str = "今天是星期"+ a[week];
 4、字元截取
 var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
 str.charAt()擷取標識的字元；當然也可以使用別的字串截取方法（substring,substr,splice）但沒有charAt好因為它在執行上最省事

 使用方式：
  字元截取》數組截取》switch判斷》if判斷
 建議使用：4、字元截取

3、cookie sessionStorage localStorage 儲存
 共同點：都是儲存在瀏覽器端，且同源的。區別：cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。資料有效期間不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；cookie只在設定的cookie到期時間之前一直有效，即使視窗或瀏覽器關閉。範圍不同，sessionStorage不在不同的瀏覽器視窗中共用，即使是同一個頁面；localStorage 在所有同源視窗中都是共用的；cookie也是在所有同源視窗中都是共用的。Web Storage 支援事件通知機制，可以將資料更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。
 cookie儲存大小4k;sessionStorage localStorage 儲存大小5M，IE8下每個獨立的儲存空間為10M，
 與Cookie相比，Web Storage存在不少的優勢，概括為以下幾點：

 1. 儲存空間更大：IE8下每個獨立的儲存空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。

 2. 儲存內容不會發送到伺服器：當設定了Cookie後，Cookie的內容會隨著請求一併發送的伺服器，這對於本機存放區的資料是一種頻寬浪費。而Web Storage中的資料則僅僅是存在本地，不會與伺服器發生任何互動。

 3. 更多豐富易用的介面：Web Storage提供了一套更為豐富的介面，使得資料操作更為簡便。

 4. 獨立的儲存空間：每個域（包括子域）有獨立的儲存空間，各個儲存空間是完全獨立的，因此不會造成資料混亂。
 
 Cookie安全性好，並且可以用到期時間來做一些必要的判斷；當然sessionStorage localStorag也是可以設定到期時間的，當必須自訂，需要在儲存資訊是儲存目前時間，以及存在時間長度，擷取在儲存時間和目前時間進行減法就好，當操作比較多不建議使用。
 
4、怎麼實現置中布局
 1、magrin:auto;適合pc 置中,但是必須設定width、height
 2、彈性盒   display:flex;
      justify-content: center;
                    align-items: center;
 3、定位實現置中
  A、 position: absolute;
                    top: 50%;
                    left: 50%;
      width:100%;height:100%;
                    transform: translate(-50%,-50%);
  B、 position: absolute;
                    top:0;
                    left: 0;
      right:0;
      bottom;0;
      width:100px;height:100px;
                    magin:auto;
  C、 position: absolute;
                    top:50%;
                    left: 50%;
      width:200px;height:200px;
                    magin-left:-100px;
      magin-top;-100px;

 建議：使用彈性盒置中；但是要注意兼用（存在相容問題）；

5、 禁止a標籤跳轉連結
 <a href ="javascript:return false;">這個連結不能點擊 </a>   也可以寫成
 <a href ="javascript:volid(0);">這個連結不能點擊 </a>   都一樣會阻止a 標籤的跳轉行為!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

隨筆記錄零碎javascript知識點