javascript_javascript スキルによって作成された Cookie のカプセル化と使用ガイド

1. はじめに

以前はCookieを使用する場合、全てdocument.cookieという形で運用していましたが、互換性は良かったのですが面倒でした。私は個人的に車輪を作るのが好きなので、Cookie 用のツール クラスをカプセル化しました。私は昔からコードを書くのが好きでしたが、テキストでまとめたものはあまり好きではなく、断片的なものを書くのも好きではなかったので変更する必要があるようです。

2. アイデア

(1) カプセル化する方法とカプセル化する内容

カプセル化する方法: どこでも使用できるように、ネイティブ js を使用してツールにカプセル化します。 document.cookie をカプセル化することが最良の方法であり、すべての操作は document.cookie に基づいています。

カプセル化する方法: オブジェクトの形式で存在でき、ゲッター メソッドとセッター メソッドを使用して実装できます。

(2) どのメソッドがカプセル化されるのか

get()、set(name, value, opts)、remove(name)、clear()、getCookies() など。個人的には、Cookie を使用するには、非常に多くのメソッドをカプセル化するだけで十分だと思います。

3. アクション

(1) Cookie の本質は HTTP Cookie です。詳細については、以下のコードを読んでコメントしてください。

(2) 上のコード: これらのコードは非常に直感的であり、プロジェクト コードと一緒に圧縮できます。以下の冒頭のコメントが重要なポイントだと思います。

コードをコピー コードは次のとおりです:

/*
* HTTP Cookie: セッション情報を保存します
* 名前と値は送信時に RUL エンコードする必要があります
* Cookie は指定されたドメイン名にバインドされます。Cookie はローカル ドメイン以外とは共有できませんが、メイン サイトからサブサイトへは Cookie を共有できます
。 * Cookie にはいくつかの制限があります。たとえば、IE6 と IE6 は 20、Opera は 30 に制限されているため、Cookie は一般的に [必須] のニーズに応じて設定されます
* Cookie の名前は大文字と小文字を区別しません。Cookie の URL をエンコードすることも、セキュリティ マーク Cookie
を使用して区別するための良い方法です。 ※SSLの場合はhttpではなくサーバーに送信されます。 Cookie の有効期限、ドメイン、パスを設定することをお勧めします。各 Cookie は 4KB 未満です
。 * */
//getter メソッドと setter メソッドを使用して Cookie をカプセル化します
(関数(グローバル){
// オブジェクトとして表現された Cookie オブジェクトを取得します
関数 getCookiesObj(){
var cookie = {};
If(document.cookie){
var objs = document.cookie.split('; ');
for(objs の変数 i){
var インデックス = objs[i].indexOf('='),
名前 = objs[i].substr(0, インデックス),
値 = objs[i].substr(インデックス 1, objs[i].length); cookie[名前] = 値;
}
}
Cookie を返す;
}
// クッキーを設定
関数セット(名前、値、オプション){
// maxAge、パス、ドメイン、セキュア
を選択します If(名前 && 値){
var cookie = encodeURIComponent(name) '=' encodeURIComponent(value);
// オプションのパラメータ
if(opts){
If(opts.maxAge){
Cookie = '; max-age=' opts.maxAge; }
If(opts.path){
Cookie = '; path=' opts.path;
}
If(opts.domain){
Cookie = '; ドメイン=' opts.ドメイン;
}
If(opts.secure){
Cookie = '; 安全'; }
}
document.cookie = cookie;
return cookie;
}その他{
return '';
}
}
//クッキーを取得
関数 get(name){
return decodeURIComponent(getCookiesObj()[name]) ||
}
// Cookie をクリアします
関数の削除(名前){
        if(getCookiesObj()[名前]){
            document.cookie = 名前 '=; max-age=0';
        }
    }
    //すべてのcookieを削除
    関数クリア(){
        var cookies = getCookiesObj();
        for(Cookie 内の var キー){
            document.cookie = キー '=; max-age=0';
        }
    }
    //すべての cookie を取得
    関数 getCookies(名前){
        getCookiesObj();
を返す     }
    //解决冲突
    関数 noConflict(名前){
        if(名前 && 名前の種類 === '文字列'){
            if(名前 && ウィンドウ['cookie']){
                window[名前] = window['cookie'];
                ウィンドウを削除['cookie'];
                ウィンドウ[名前]を返します;
            }
        }その他{
            return window['cookie'];
            ウィンドウを削除['cookie'];
        }
    }
    グローバル['cookie'] = {
        'getCookies': getCookies,
        'セット': セット、
        'get': 取得、
        '削除': 削除、
        'クリア': クリア、
        'noConflict': noConflict
    };
})(ウィンドウ);

（3）例

复制代码代码如下:

   
       
       
   
   
       
       
            console.log('----------cookie对象---------------');
            console.log(cookie);
            console.log('----------对象---------------');
            console.log(cookie.getCookies());
            console.log('----------设置cookie-------------');
            console.log(cookie.set('name', 'wlh'));
            console.log('----------設置cookie 123-------------');
            console.log(cookie.set('name', 'wlh123'));
            console.log('----------设置cookie age-------------');
            console.log(cookie.set('age', 20));
            console.log('----------获取cookie-------------');
            console.log(cookie.get('name'));
            console.log('----------获取全部---------------');
            console.log(cookie.getCookies());
            console.log('----------消去年齢---------------');
            console.log(cookie.remove('age'));
            console.log('----------获取全部---------------');
            console.log(cookie.getCookies());
            console.log('----------清除全部---------------');
            console.log(cookie.clear());
            console.log('----------获取全部---------------');
            console.log(cookie.getCookies());
            console.log('----------解决冲突-------------');
            var $Cookie = cookie.noConflict(true /*クッキーの新しい名前*/);
            console.log($Cookie);
            console.log('----------新的命名を使用---------------');
            console.log($Cookie.getCookies());