JavaScriptにおけるクッキーの単純なカプセル化
クッキーの紹介
、複数形で使用されることもあり、ユーザー識別および追跡を目的として特定のウェブサイトによってユーザーのローカル端末に保存される小さなテキストファイルであり、ユーザーの一時的または永続的に保存される情報です。
クッキーは自分自身でパッケージする必要があります。ネイティブのクッキーのインターフェースは十分にフレンドリーではないので、私は練習のためにクッキーのシンプルなバージョンをパッケージしました。
//クッキー・クラスを作る:
function Cookie() {
}
// prototype:はコンストラクタのプロトタイプである
// プロトタイプ・オブジェクトのすべてのプロパティとメソッドは、コンストラクター配下のオブジェクトが所有できる。
//setCookie
Cookie.prototype.setCookie = function (args) {
if (Array.isArray(args)) {//受信データが配列の場合、クッキーを繰り返しセットする。
for (let item of args) {
let d = new Date();
d.setTime(d.getTime() + item.time * * 1000);//時間の設定
document.cookie = item.key + "=" + item.value + ";expires=" + d;//クッキーを追加する
}
}
else {
let d = new Date();
d.setTime(d.getTime() + args.time * * 1000);
document.cookie = args.key + "=" + args.value + d + ";expires=" + d;
}
// メソッドの呼び出し元を返す。
return this
}
//getCookie
Cookie.prototype.getCookie = function () {
//処理されたクッキー・データを保持する空の配列を定義し、それを返す。
let arr = [];
//すべてのクッキー・データを取り出す
let cookie_str = document.cookie;
//取得されたクッキー・データを処理する。
let cookie_arr = cookie_str.split("; ");
//配列を繰り返し、オブジェクトに分割し、arrに入れる。
for (let item of cookie_arr) {
console.log(item.split("="))
let obj = { key: item.split("=")[0], value: item.split("=")[1] };
arr.push(obj);
}
return arr;
}
//hasCookie()メソッド: クッキーの値が含まれているかどうかを判断する)
Cookie.prototype.hasCookie= function (key) {
//レコードが以下を含むかどうかを示すフラグを定義する。
let flag = false;
//ここでのthisは、このメソッドを使用するオブジェクトである。
let arr = this.getCookie()
//判定に何らかのメソッドを使う
flag = arr.some(function (item) {
return item.key === key;
});
return flag;
}
//removeCookie()メソッド: 指定されたクッキーをクリアする。
Cookie.prototype.removeCookie = function (key) {
document.cookie = key + "=1;expires=-1";
}
1) 保管サイズ
- クッキー：通常4K以下
- セッションストレージ：5M以上
- ローカルストレージ：5M以上
2) データ有効期間
- クッキー：一般的にサーバーによって生成され、あなたは有効期限を設定することができます。あなたが時間を設定しない場合は、ブラウザのクッキーの有効期限を閉じ、時間を設定する場合は、クッキーは、ハードドライブに保存され、有効期限が切れる前に有効時間
- sessionStorage: 現在のブラウザウィンドウを閉じたときのみ有効で、ページやブラウザを閉じるとクリアされます。
- localStorage: 永続的、手動で永久に消去しない限り、ウィンドウまたはブラウザは閉じられるので、永続的なデータとして使用されます。
3) スコープ
- クッキー：同じオリジンのすべてのウィンドウで共有
- sessionStorage：同じブラウザウィンドウで共有
- localStorage: すべての同じオリジンのウィンドウで共有されます。
4) コミュニケーション
- ccokie：10は、httpリクエストの同じソースで運ばれ、たとえ必要とされていないので、クッキーは、ブラウザとサーバーの間で前後に渡されるので、あまりにも多くのデータを保存するためにクッキーを使用すると、パフォーマンスの問題が発生する場合
- sessionStorage: クライアントにのみ保存され、サーバーとの通信には関与しません。
- localStorage: クライアントにのみ保存され、サーバーとの通信には関与しません。
5) 使いやすさ
- クッキー：自分でカプセル化する必要があります。
- sessionStorage: ネイティブインターフェースは許容範囲内であり、カプセル化することでオブジェクトと配列のサポートを向上させることができます。
- localStorage: ネイティブ・インターフェイスは許容範囲です。ObjectとArrayをより良くサポートするためにカプセル化することができます。
