1。序文
以前は、Cookieがdocument.cookiesの形で使用されていました。互換性は良いですが、面倒です。私は車輪を作ることを好む人なので、クッキーのツールをカプセル化します。長い間、私はコードを書くのが好きですが、テキストを要約するのはあまり好きではなく、断片的なものを書くのも好きではありません。私はそれを変更しなければならないようです。
2。アイデア
(1)カプセル化する方法とカプセル化するもの
カプセル化方法:ネイティブJSを使用してツールにカプセル化して、どこでも使用できるようにすることです。 document.cookieに対するカプセル化はそれを行うための最良の方法であり、すべての操作はdocument.cookieに基づいています。
カプセル化されているもの:オブジェクトとして存在するようにカプセル化され、Getter&Setterメソッドを使用して実装できます。
(2)カプセル化の方法
get()、set(name、value、opts)、remove(name)、clear()、getcookies()など。個人的には、非常に多くの方法をカプセル化するだけではCookieを使用するのに十分だと思います。
3。アクション
(1)クッキーを理解する。 Cookieの本質はHTTP Cookieです。 document.cookieクライアントによって表されるオブジェクトがドキュメントである場合。詳細については、次のコードを読んでコメントできます
(2)上記のコード:これらのコードは非常に直感的であり、プロジェクトコードと一緒に圧縮することができます。次の冒頭のコメントが重要なポイントだと思います。
コードコピーは次のとおりです。
/*
* HTTP Cookie:セッション情報を保存します
*送信時に名前と価値をルールエンコードする必要があります
* Cookieは、指定されたドメイン名にバインドされています。 Cookieはこのドメインなしでは共有できませんが、メインサイトの変電所とCookieを共有できます。
* Cookieにはいくつかの制限があります。たとえば、IE6およびIE6が20に制限されています。 IE7 50;オペラ30 ...したがって、クッキーは通常[必須]の要件に従って設定されます
* Cookieの名前はケースフリーです。また、Cookie URLをエンコードすることもお勧めします。パスは、さまざまな状況でクッキーを区別する良い方法です。セキュリティフラグ付きのクッキー
* SSLの場合はサーバーに送信しますが、HTTPはそうしません。 Cookieの有効期限、ドメイン、およびパスを設定することをお勧めします。各クッキーは4kb未満です。
* */
// Cookieのカプセル化については、GetterおよびSetter Methodを使用してGetterおよびSetterメソッドを採用します
(function(global){
//オブジェクトとして表現されたCookieオブジェクトを取得します
関数getCookiesobj(){
var cookies = {};
if(document.cookie){
var objs = document.cookie.split( ';');
for(bar i in objs){
var index = objs [i] .indexof( '=')、
name = objs [i] .substr(0、index)、
value = objs [i] .substr(index + 1、objs [i] .length);
Cookie [name] = value;
}
}
クッキーを返します。
}
// Cookieを設定します
関数セット(name、value、opts){
// Maxage、Path、Domain、Secureを選択します
if(name && value){
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 += '; domain = ' + opts.domain;
}
if(opts.secure){
Cookie += ';安全な';
}
}
document.cookie = cookie;
クッキーを返す;
}それ以外{
戻る '';
}
}
//クッキーを取得します
関数get(name){
decodeuricomponentを返します(getCookiesobj()[name])||ヌル;
}
//クッキーをクリアします
関数削除(名前){
if(getCookiesobj()[name]){
document.cookie = name + '=; max-age = 0 ';
}
}
//すべてのCookieをクリアします
function clear(){
var cookies = getCookiesobj();
for(cookieのvarキー){
document.cookie = key + '=; max-age = 0 ';
}
}
//すべてのCookieを取得します
関数getCookies(name){
return getCookiesobj();
}
//競合を解決します
function noconflict(name){
if(name && typeof name === 'string'){
if(name && window ['cookie']){
window [name] = window ['cookie'];
ウィンドウを削除['cookie'];
return window [name];
}
}それ以外{
ウィンドウ['cookie']を返します。
ウィンドウを削除['cookie'];
}
}
グローバル['cookie'] = {
「GetCookies」:GetCookies、
「セット」:セット、
'get':get、
「削除」:削除、
「クリア」:クリア、
「noconflict」:noconflict
};
})(ウィンドウ);
(3)例
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> cookie example </title>
</head>
<body>
<script type = "text/javascript" src = "cookie.js">/script>
<script type = "text/javascript">
console.log( '-----------------------------------------------------);
console.log(cookie);
console.log('--------------------------------------------------------------------------------------------------------------------------
console.log(cookie.getCookies());
console.log( '------------------------------------------------------------);
console.log(cookie.set( 'name'、 'wlh'));
console.log( '-----------------------------------------------------------------------);
console.log(cookie.set( 'name'、 'wlh123'));
console.log( '-----------------------------------------------------------------------);
console.log(cookie.set( 'age'、20));
console.log( '--------------------------------------------------------);
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 /*cookie* /);
console.log($ cookie);
console.log( '-------------------------------------------------------------------);
console.log($ cookie.getCookies());
</script>
</body>
</html>
(4)コードアドレス:https://github.com/vczero/cookie