今日は実際のプロジェクトにおける Cookie のカプセル化について見ていきます。
まず、Cookie の属性メソッドを見てください。
実際には、読み取り用と書き込み用の 2 つしかありません。
1.読む
allCookies = document.cookie現在のドメイン名とそのサブドメインにあるすべての Cookie は、「;」（セミコロン + スペース）で区切られたキーと値のペアの文字列である document.cookie を通じて取得できます。
たとえば、mdn Web サイトでコンソール入力を開きます。
document.cookie現れる
'_ga=GA1.2.1682758841.1619014911; preferredlocale=en-US; lux_uid=164510371039082338; _gid=GA1.2.750491686.1645103711'もちろん、異なるコンピューターは同じではありません。
タオバオ API アクセス手順
-
パラメータの説明
- 一般的なパラメータの説明
- 無差別にパラメータを渡さないでください。パラメータを渡さないと、成功または失敗に関係なく料金が差し引かれます。
- URL 説明 https://api-gw.onebound.cn/platform/API タイプ/ プラットフォーム: タオバオ、京東など、API タイプ: [item_search、item_get、item_search_shop など]
- バージョン: API バージョン
- キー: 呼び出しキー、テストキー: test_api_key
- シークレット: コールシークレット、テストシークレット: (入力不要)
- キャッシュ: [はい、いいえ] デフォルトははいです。キャッシュされたデータが呼び出され、速度は比較的高速です。
- result_type: [json,xml,serialize,var_export] 戻りデータ形式、デフォルトは json です
- lang:[cn,en,ru] 翻訳言語、デフォルト cn 簡体字中国語
- シークレット: キー
-
API:item_searchパラメータの説明:
- q: 検索キーワード
- cat: カテゴリ ID
- start_price: 開始価格
- end_price: 終了価格
- sort: ソート [bid, bid, bid2, _bid2, _sale, _credit]
(bid: 合計価格、bid2: 商品価格、sale: 販売数量、クレジットクレジット、プレフィックスを付けて大きい順に並べ替えます) - ページ: ページ数
- page_size: ページごとのトレジャーの数、デフォルトは 40 です
- sell_info: ビジネス情報を取得するかどうか[はい、いいえ]、デフォルトははいです。
-
API: item_get パラメータの説明: num_iid: 赤ちゃん ID
- 一般的なパラメータの説明
2、書きます
document.cookie = newCookieここで、newCookie も文字列であり、1+5 個のパラメータを含むことに注意してください。
1. キー名とキー値で構成される文字列 (必須)
“${name}=${value}”注意すべき点は、値の最後にセミコロンやスペースがあると削除されるということですが、これは経験して初めて分かりました。
2、パス
;path=*path*パスは、Cookie がどのリクエストとともに送信されるかを決定するために使用されます。
現在ブラウザに 2 つの Cookie があるとします。
クッキー1：名前=名前1; 値=値1; パス=/boyue/； cookie2：name=name2; 値=値2; パス=/boyue/tongxue/。
http://localhost/boyue/* にアクセスすると、リクエストヘッダーに cookie1 が含まれますが、cookie2 は含まれません。
http://localhost/boyue/tongxue/* にアクセスすると、リクエストヘッダーに上記の2つが含まれます。
つまり、サブパスにアクセスすると、その親パスの Cookie が含まれますが、親パスにアクセスすると、サブパスの Cookie は含まれません。よく考えると、これは実際には非常に論理的です。そうでなければ、このパラメーターは意味がありません。
3、ドメイン
;domain=*domain*ドメインを設定します。一部の学生は、パスを持っているのに、なぜドメイン パラメータが必要なのかと考えるかもしれません。これは主に、異なるドメイン名で一部のパラメータを共有または区別するためです。たとえば、a.boyue.com と b.boyue.com は異なるドメイン名です。 、ただし、両方ともboyue.comでCookieを取得できますが、お互いに取得することはできません。忘れずに「.」を付けてください。それ以外の場合、ドメイン名がまったく同じである場合にのみこのパラメータを取得できます。
4、最大年齢
;max-age=*max-age-in-seconds*これは分かりやすく、有効期限を設定することです
5、;expires= GMTString 形式の日付
上記と同様に、有効期限の日時を設定します。
6、;安全
Cookie が https プロトコル経由でのみ送信できるかどうかを示します
true の場合、js が対応する cookie を取得したとしても、http リクエストはこのパラメータを運ぶことができません。
3. 包装
カプセル化の主な目的は、その書き込みと取得メソッド、特に取得メソッドを変更することですが、結局のところ、一般的に必要なのは、すべてのキーと値のペアではなく、対応する値です。ここに簡単な実装があります
const cookie = {
get: function (sKey) {
// 按照存储的规则(不同键值对用分号和空格区分，小属性用分号区分)，先用“; ”进行切割，再取出里面第一个等号和第一个分号中的内容即可
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
// 写进去就完事了，会直接覆盖原来的键值对
set: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
// 设置对应的过期时间小于当前时间即可
remove: function (sKey, sPath, sDomain) {
if (!sKey || !this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
return true;
}
};