溫故js系列（3）-cookie優缺點&設置獲取刪除cookie

Vultr 發布于2019-08-19 18:43 / 2651人閱讀

摘要：優缺點優點只在中存放不敏感數據，即使被盜也不會有重大損失。控制的生命期，使之不會永遠有效。極高的擴展性和可用性，使用簡單，操作方法方便缺點數量和長度的限制。每個長度不能超過，否則會被截掉。設置一般主要設置名字和值有效期路徑域名是否安全傳輸。

前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：cookie

JavaScript--cookie

cookie可以像身份證一樣在客戶端請求服務器的時候確定信息。也可以在客戶端分擔服務端的壓力，做很多判斷和存儲信息。

cookie 優缺點

優點：
1.只在cookie中存放不敏感數據，即使被盜也不會有重大損失。
2.控制cookie的生命期，使之不會永遠有效。就算被盜了偷盜者很可能拿到的是一個過期的cookie。
3.cookie幫助服務端承擔了很大的壓力，可以利用cookie在和客戶端做很多判斷而不應經過服務端。
4.極高的擴展性和可用性，使用簡單，操作方法方便
缺點：
1.cookie數量和長度的限制。每個cookie長度不能超過4KB，否則會被截掉。IE下每個domain最多只能有50條cookie（IE6是20條），Firefox最多50個cookie，chrome和Safari沒有做硬性限制，IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。
2.安全性問題。這是cookie一個隱患，如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。所以還是有一定的局限性。

設置cookie

一般主要設置cookie名字和值、cookie有效期、路徑、域名、是否安全傳輸。
原生方法：

document.cookie="key="+value;

封裝方法：

function setCookie(key, value, expires, path, domain, secure) {     
    var cookieText = encodeURIComponent(key) + "=" + encodeURIComponent(value);     
    if (expires instanceof Date) {         
        cookieText += "; expires=" + expires;     
    }     
    if (path) {         
        cookieText += "; expires=" + expires;     
    }     
    if (domain) {         
        cookieText += "; domain=" + domain;     
    }     
    if (secure) {         
        cookieText += "; secure";     
    }     
    document.cookie = cookieText; 
}

JQuery方法（JQuery沒有封裝cookie方法，需要下載基于JQuery的插件jquery.cookie.js）：

$.cookie("key","value",{
    expires：7,
    path："/",
    domain: "xxx.com",
    secure: false
});

獲取cookie

原生方法：

var cookieStr = document.cookie;  //cookieStr=="username=Xzavier;password=123456;sex=man"

這樣獲得了所有的cookie，是一個字符串。根據需要選取，比如：

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

封裝方法：

function getCookie(key) {     
    var cookieName = encodeURIComponent(key) + "=";     
    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; 
}

JQuery方法：

$.cookie(‘key’); //value?value:null

刪除cookie

原生方法：

document.cookie = "key=value;expires=" + new Date(0); //時間可以是現在以及現在之前

封裝方法：

function unsetCookie(key) {     
    document.cookie = key + "= ; expires=" + new Date(0); 
}

JQuery方法：

$.cookie(‘key’,null);

其他參數設置：

$.cookie("key", value, {
    expires: new Date(0),
    path: "/",
    domain: "xxx.com"
});

cookie在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，雖然有局限性，但是不可替代的。使用的方法也非常簡單，但平時使用cookie的時候也需要多多注意安全性。

jquery.cookie.js下載：jquery.cookie.js
cookie弊端參考：cookie弊端

云服務器 GPU云服務器 JS刪除cookie js 獲取cookie的數據刪除cookie javascript刪除cookie

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79907.html

溫故js系列（6）-DOM

摘要：相同之處標準的與是同步的。公認的非自定義的特性會被以屬性的形式添加到對象中。不過傳遞給的特性名與實際的特性名相同。如，，，，等事件處理程序。最好控制在最合理的范圍內。返回了元素大小，默認單位是。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：DOM JavaScript-DOM DOM簡介 DOM（Do...

xiaochao 2019-08-20 10:19 評論0 收藏0
溫故js系列（12）-ajax&amp;&amp;優缺點&amp;&amp;node后端

摘要：接收響應當請求發送到服務器端，收到響應后，響應的數據會自動填充對象的屬性。一般而已狀態代碼為作為成功的標志。必要時，可以將查詢字符串參數追加到的末尾，以便提交給服務器。后端實現可以自學一點后端知識，便于學習。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：Ajax JavaScript-Ajax&&no...

LiangJ 2019-08-20 10:33 評論0 收藏0
溫故知新之JS基礎

摘要：訪問屬性是通過操作符完成的，但這要求屬性名必須是一個有效的變量名小紅的屬性名不是一個有效的變量，就需要用括起來。閉包應用封裝私有變量箭頭函數箭頭函數相當于匿名函數，并且簡化了函數定義。數據類型 NAN NaN === NaN; // false 唯一能判斷NaN的方法是通過isNaN()函數： isNaN(NaN); // true 浮點數的相等比較： 1 / 3 === (...

Dr_Noooo 2019-08-20 11:29 評論0 收藏0
溫故js系列（14）-閉包&amp;垃圾回收&amp;內存泄露&amp;閉包應用&amp;作用域鏈&

摘要：該對象包含了函數的所有局部變量命名參數參數集合以及，然后此對象會被推入作用域鏈的前端。如果整個作用域鏈上都無法找到，則返回。此時的作用域鏈包含了兩個對象的活動對象和對象。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：閉包 JavaScript-閉包閉包(closure)是一個讓人又愛又恨的somet...

Amio 2019-08-22 10:36 評論0 收藏0
html&amp;&amp;css

摘要：標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。控制表單控件的禁用狀態。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。 1.Doctype作用？標準模式與兼容模式各有什么區別聲明位于位于HTML文檔中的第一行，處于?標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 評論0 收藏0