温故jsシリーズ(3)-cookieの長所と短所&設定取得削除クッキー

フロントエンド学習:チュートリアル&開発モジュール化/正規化/エンジニアリング/最適化&ツール/デバッグ&注目すべきブログ/Git&面接-フロントエンドリソース要約
ようこそissues斧正:cookie
JavaScript--cookie
クッキーは、クライアントがサーバを要求したときに、身分証明書のように情報を特定することができる.クライアントでサービス側の圧力を分担し、多くの判断や情報の格納を行うこともできます.
クッキーの長所と短所
利点:1.クッキーに機密データを保存するだけで、盗まれても大きな損失はありません.2.クッキーの寿命を永遠に有効にしないように制御します.盗まれたとしても、盗まれた人は期限切れのクッキーを手に入れた可能性が高い.3.cookieはサービス側が大きな圧力を負うのを助け、cookieを利用してクライアントと多くの判断をすることができ、サービス側を通過すべきではない.4.極めて高い拡張性と可用性、使用が簡単で、操作方法の便利さと欠点:1.クッキーの数と長さの制限.各クッキーの長さは4 KBを超えてはいけません.そうしないと切断されます.IEの下でdomainごとに最大50個のクッキー(IE 6は20個)しかありません.Firefoxは最大50個のクッキーがあります.chromeとSafariは硬い制限をしていません.IEとOperaは最近最も少ないクッキーを整理し、Firefoxはランダムにクッキーを整理します.2.セキュリティの問題.これはクッキーの隠れた危険です.クッキーがブロックされたら、すべてのセッション情報を取得することができます.暗号化しても何の役にも立たない.遮断者はクッキーの意味を知る必要がないからだ.彼はそのままクッキーを転送すれば目的を達成できる.3.クライアントに保存できない状態があります.たとえば、フォームの重複コミットを防止するには、サーバ側にカウンタを保存する必要があります.このカウンタをクライアントに保存すると、何の役にも立たない.だからまだ一定の限界がある.
クッキーの設定
一般に、クッキーの名前と値、クッキーの有効期間、パス、ドメイン名、安全な転送の有無を主に設定します.オリジナルメソッド:

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にはパッケージクッキーメソッドがなく、JQueryベースのプラグインjquery.cookie.jsをダウンロードする必要があります):

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

クッキーの取得
オリジナルメソッド:

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

これによりすべてのクッキーが得られ、文字列です.必要に応じて次のように選択します.

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

クッキーの削除
オリジナルメソッド:

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'
});

クッキーはクライアントデータを永続的に保存するのに便利で、サーバストレージの負担を分担しています.限界はありますが、かけがえのないものです.使い方も簡単ですが、普段はクッキーを使うときも安全性に注意が必要です.
jquery.cookie.jsダウンロード:jquery.cookie.jscookie弊害参考:cookie弊害