jquery कुकीज सेट करत आहे. jQuery मधील कुकीज वापरणे. jQuery सह कुकीज व्यवस्थापित करणे

कुकीज तुम्हाला साठवण्याची परवानगी देतात उपयुक्त माहितीत्याला प्रदान करण्यासाठी वापरकर्त्याबद्दल उत्तम सेवातुमच्या वेबसाइटवर. तुम्ही त्यांच्यासोबत jQuery मध्ये देखील काम करू शकता. IN हा धडाआम्ही वापरकर्त्याची काही प्राधान्ये संग्रहित करण्यासाठी jQuery आणि कुकीज कसे वापरू शकतो ते आम्ही पाहू जेणेकरून विशिष्ट सामग्री प्रदर्शित करताना आम्ही त्यांचा वापर करू शकू.

चला सुरू करुया

आम्ही एकापेक्षा जास्त लेबल असलेले पॅनेल बनवणार आहोत. प्रत्येक वेळी तुम्ही लेबलवर क्लिक करता तेव्हा ते रंगात हायलाइट केले जाते आणि लेबलशी संबंधित मूल्य तुमच्या ब्राउझरचा वापर करून तुमच्या संगणकावरील कुकीमध्ये सेव्ह केले जाते. त्यानंतर तुम्ही कुकीमध्ये साठवलेले वर्तमान मूल्य प्रदर्शित करण्यासाठी किंवा कुकी हटविण्यासाठी दोन बटणे वापरू शकता.

तसेच, प्रथम डाउनलोड दरम्यान डेमो पृष्ठाकडे लक्ष द्या. कोणतेही लेबल हायलाइट केलेले नाहीत. आणि तुम्ही एक निवडल्यानंतर, तुम्ही डेमो पेज रिफ्रेश करू शकता आणि तुम्ही निवडलेले लेबल निवडलेले राहील. तुम्ही तुमच्या कुकीज साफ केल्यास, लेबलमधून हायलाइट काढला जाईल. आणि रीबूट केल्यानंतर, सर्व लेबले न निवडलेली राहतील. आता हे कसे कार्य करते ते पाहू.

jQuery सह कुकीज व्यवस्थापित करणे

आम्ही कुकीज व्यवस्थापित करण्यासाठी jQuery वापरणार आहोत, ज्यामध्ये कुकी स्टोरेजसह कार्य करण्यासाठी डिझाइन केलेले प्लगइन समाविष्ट असेल. प्लगइनचे नाव स्वतःसाठी बोलते - कुकी.

कुकी प्लगइन jQuery प्लगइन साइटच्या प्रकल्प विभागातून डाउनलोड केले जाऊ शकते.

कुकी हे फक्त एक कुकी() फंक्शन असलेले एक साधे प्लगइन आहे. या फंक्शनचा वापर करून, कुकी मूल्ये क्लायंटच्या संगणकावर संग्रहित, पुनर्प्राप्त आणि हटविली जातात.

चिन्हांकित करणे

jQuery लायब्ररी कनेक्ट केल्यानंतर, आम्ही प्लगइन कनेक्ट करतो jquery.cookie.jsआमच्या HTML कोडमध्ये. मग आम्ही कनेक्ट करतो JavaScript फाइल, ज्यामध्ये कुकीजसह कार्य करण्यासाठी कोड असतो (तुम्ही वापरून HTML कोडमध्ये स्क्रिप्ट मजकूर देखील समाविष्ट करू शकता.

HTML कोड अगदी सोपा दिसतो:

• बेसिक
• मानक
• विस्तारित

कुकीज दाखवा कुकीज हटवा

आम्ही कुकी स्थिती प्रदर्शित करण्यासाठी तीन लेबले, दोन लिंक्स आणि फील्ड तयार करतो. सामग्री CSS फाइलधड्याच्या विषयाशी संबंधित नाही आणि .selected वर्ग वापरून फक्त निवडलेले लेबल हायलाइट करण्यासाठी वापरले जाते. तर सरळ जावास्क्रिप्ट कोडकडे जाऊ.

आम्ही कुकीज तयार करतो

त्यामुळे दस्तऐवज तयार झाल्यावर आमची स्क्रिप्ट कार्यान्वित करण्यासाठी आम्हाला नेहमीचा कोड जोडणे आवश्यक आहे:

JQuery(दस्तऐवज).रेडी(फंक्शन())(//स्क्रिप्ट कोड येथे ठेवला आहे));

आता काही व्हेरिएबल्स सुरू करूया जे नंतर आमच्या कोडमध्ये वापरले जातील. हे कुकीचे नाव आहे आणि कुकी फंक्शनचे पर्याय: कुकीचे जीवनकाळ आणि पृष्ठ पत्त्यावर जोडलेला मार्ग. इतर युक्तिवाद देखील शक्य आहेत, परंतु आमच्या धड्यात आम्ही फक्त हे दोन वापरू:

Var cookieName = "स्तर"; var cookieOptions = (कालबाह्य: 7, पथ: "/");

पुढे आम्हाला आमच्या कुकीमध्ये मूल्य तपासण्याची आवश्यकता आहे. जर ते नसेल तर पुढे जा. परंतु कुकीमध्ये मूल्य असल्यास, कुकीमध्ये आयडी सेव्ह केलेल्या लेबलसाठी तुम्हाला .सिलेक्टेड क्लास सेट करणे आवश्यक आहे. आम्ही वापरतो कुकी फंक्शनकुकीचे नाव असलेले एकमेव पॅरामीटर ज्याचे मूल्य आम्हाला मिळणे आवश्यक आहे:

$("#" + $.cookie(cookieName)).addClass("निवडलेले");

आता आपण माउस क्लिक इव्हेंट हँडलर तयार करतो. preventDefault() फंक्शन आहे मानक प्रक्रिया jQuery ब्राउझरला लिंक फॉलो करण्यापासून रोखण्यासाठी जेव्हा माउस बटणावर क्लिक केले जाते. जेव्हा वापरकर्ता लेबलवर क्लिक करतो (जो प्रत्यक्षात एक दुवा आहे), आम्ही वर्ग काढून टाकतो .निवडलेमध्ये हायलाइट केलेल्या चिन्हावरून हा क्षणआणि तुम्ही नुकत्याच निवडलेल्यासाठी सेट करा.

$(".htabs a").क्लिक(function(e)(e.preventDefault(); $("#" + $.cookie(cookieName)).removeClass("selected");

कुकी तयार करण्याची आणि त्यावर मूल्य नियुक्त करण्याची वेळ आली आहे. पहिला युक्तिवाद कुकीचे नाव आहे, आमच्या उदाहरण स्तरामध्ये , आणि दुसरा युक्तिवाद कुकीला नियुक्त केले जाणारे मूल्य आहे. आम्ही फंक्शनला पर्याय देखील देतो.

आता लेबलमध्ये .selected वर्ग जोडूया:

$("#" + $.cookie(cookieName)).addClass("निवडलेले");));

कुकी मूल्य मिळवणे आणि प्रदर्शित करणे

आता आपल्याला कुकी मूल्य प्रदर्शित करणे आवश्यक आहे. आपल्याला फक्त एका पॅरामीटरसह कुकी फंक्शन कॉल करणे आवश्यक आहे, जे कुकीचे नाव आहे ज्याचे मूल्य आपल्याला आवश्यक आहे. जेव्हा #showCookie बटण क्लिक केले जाते, तेव्हा आम्ही फील्डमध्ये वर्तमान कुकी मूल्य रेकॉर्ड करतो #व्हर्बोज.

$("#showCookie").क्लिक(function(e)( e.preventDefault(); $("#verbose").val("कुकी मूल्य हे " + $.cookie(cookieName) + ".");) );

कुकीज हटवत आहे

आता आपल्याला कुकीज कशा हटवायच्या हे शोधण्याची आवश्यकता आहे. म्हणून, जेव्हा वापरकर्ता #deleteCookie बटणावर क्लिक करतो, तेव्हा आम्ही फील्डमध्ये आउटपुट करतो #व्हर्बोजकुकी हटवली गेली आहे हे दर्शवणारा संदेश. त्यानंतर आम्ही सध्या निवडलेल्या लेबलमधून .selected वर्ग काढून टाकतो.

$("#deleteCookie").क्लिक(function(e)( e.preventDefault(); $("#verbose").val("कुकी "लेव्हल" मूल्यासह \"" + $.cookie(cookieName) + " \" काढले." $("#" + $.cookie(cookieName)).removeClass("selected");

शेवटी, आम्ही कुकीज हटवतो. हे खूप आहे मनोरंजक मुद्दा. कोड असे दिसते खालील प्रकारे:

$.cookie(cookieName, null, (path:"/"));

इतकंच. फंक्शनचा तिसरा आर्ग्युमेंट पाहू. आपण प्लगइन कोड पाहिल्यास jquery.cookie.js, नंतर असे दिसून येते की दुसऱ्या युक्तिवादाच्या मूल्यासह निरर्थकऑप्शन्स ॲरेमधील एक्सपायर्स व्हेरिएबलला मूल्य -1 नियुक्त केले आहे:

जर (मूल्य === शून्य) (मूल्य = ""; options.expires = -1;)

म्हणून, आम्ही पास तर कुकी पर्यायतिसरा युक्तिवाद म्हणून, उदाहरणार्थ, यासारखे:

$.cookie(cookieName, $(this).attr("id"), cookieOptions);

नंतर आमच्या कोडचे ऑपरेशन विस्कळीत होईल, पासून cookieOptions.expiresमूल्य -1 घेईल, जे प्लगइनच्या तर्काशी पूर्णपणे जुळते.

आणि जर नकारात्मक मूल्य निर्दिष्ट केले असेल (म्हणजे पूर्वीची तारीख), कुकी हटविली जाईल.

परंतु पथ निर्दिष्ट करणे आवश्यक आहे, कारण काही प्रकरणांमध्ये प्लगइनने पथ निर्दिष्ट केल्याशिवाय कुकीज हटवल्या नाहीत.

लेखकाकडून: ग्रीटिंग्ज, मित्रांनो. आम्ही TOP jQuery प्लगइन्सच्या संग्रहाशी परिचित होणे सुरू ठेवतो. आज आम्ही बहुतेक वेबसाइट्ससाठी जवळजवळ अपरिहार्य प्लगइनची ओळख करून देऊ. याबद्दल आहे jQuery कुकी प्लगइन बद्दल. जसे तुम्ही नावावरून अंदाज लावला असेल, प्लगइनचे कार्य कुकीजसह कार्य करणे आहे.

स्टोरेज टास्क सानुकूल सेटिंग्जआणि त्यांच्यासोबत काम करताना कोणत्याही अधिक किंवा कमी गंभीर प्रकल्पात आमचा सामना होतो. उदाहरणार्थ, सूचीच्या स्वरूपात किंवा ऑनलाइन स्टोअरमध्ये उत्पादने सादर करण्याचे उत्कृष्ट कार्य सारणी फॉर्म. वापरकर्ता त्याच्यासाठी सर्वात सोयीस्कर प्रेझेंटेशन पद्धत निवडण्यास मोकळा आहे, परंतु आपण ती लक्षात ठेवली पाहिजे आणि ती दर्शविणे लक्षात ठेवा. सोयीस्कर फॉर्मवर्तमान सत्रात आणि पुढच्या वेळी तुम्ही साइटवर प्रवेश करता तेव्हा.

दुसरे उत्कृष्ट उदाहरण म्हणजे वापरकर्ता अधिकृतता लक्षात ठेवणे. Remember पर्याय निवडून वापरकर्ता साइटवर लॉग इन करतो. दुसऱ्या दिवशी साइटवर प्रवेश करताना, त्याला यापुढे अधिकृततेवर वेळ वाया घालवण्याची गरज नाही वापरकर्ता सत्र स्वयंचलितपणे पुनर्संचयित केले जाईल.

हे सर्व चमत्कार कुकीजमुळे शक्य आहेत. कुकी हा डेटाचा एक संच आहे जो वापरकर्त्याच्या संगणकावर संग्रहित केला जातो आणि JavaScript वर प्रवेश करता येतो. सर्व्हरला विनंती करताना ब्राउझर साइट-विशिष्ट कुकीज देखील पाठवतो.

च्या साठी आरामदायक कामकुकीजसह आम्ही विशेष jQuery कुकी प्लगइन वापरू शकतो, ज्यासह कार्य करणे खूप सोपे आहे. चला फक्त प्लगइन फाइल डाउनलोड आणि कनेक्ट करूया:

यानंतर, आम्हाला काही उपयुक्त पद्धतींमध्ये प्रवेश मिळेल: कुकी() आणि रिमूव्ह कुकी(). पहिली पद्धत आपल्याला कुकीज स्थापित करण्याची परवानगी देते, दुसरी आपल्याला त्या हटविण्याची परवानगी देते. चला उदाहरणे पाहूया, ती अत्यंत सोपी आहेत. महत्वाची टीप! सर्व्हरवर या कोडसह कार्य करणे उचित आहे.

म्हणून, कुकी सेट करण्यासाठी, आम्हाला फक्त कॉल करणे आवश्यक आहे कुकी पद्धत(), त्यास दोन पॅरामीटर्स पास करणे. पहिला पॅरामीटर तयार करायच्या कुकीचे नाव निर्दिष्ट करतो, दुसरा पॅरामीटर त्याचे मूल्य निर्दिष्ट करतो:

$.cookie("नाव", "Andrey");

$. कुकी("नाव", "अँड्री");

जर आपण आता ब्राउझर कन्सोल उघडले आणि कुकीज विभाग पाहिला, तर तेथे आपल्याला असे काहीतरी दिसेल:

कुकी यशस्वीरित्या तयार केली गेली आहे, आणि आम्ही आता कोडच्या ओळीवर टिप्पणी दिली जी ती तयार करते आणि पृष्ठ रीफ्रेश करते, तरीही कुकी कुठेही जाणार नाही. हे वापरकर्ता सत्रादरम्यान आमच्यासाठी उपलब्ध आहे, म्हणजे ब्राउझर बंद करण्यापूर्वी. आम्हाला दीर्घ कालावधीसाठी कुकी तयार करायची असल्यास, आम्ही ती तिसऱ्या पॅरामीटरसह निर्दिष्ट करू शकतो:

$.cookie("name2", "जॉन", (कालबाह्य: 3));

$. कुकी ("name2" , "जॉन" , ( कालबाह्य : 3 ) );

अशा प्रकारे आम्ही एक कुकी तयार केली ज्याचे आयुष्य 3 दिवस आहे.

console.log("हे कुकीचे नाव आहे: " + $.cookie("name")); console.log("हे कुकी नेम2 आहे:" + $.cookie("name2"));

कन्सोल लॉग ( "हे कुकीचे नाव आहे: " + $ . कुकी ( "नाव") ); कन्सोल लॉग ( "हे कुकीचे नाव 2 आहे: " + $ . कुकी ( "name2" ) );

jQuery कुकीज हे कुकीजसह कार्य करण्यासाठी एक प्लगइन आहे जे ते खूप सोपे करते ही प्रक्रिया. आम्हाला कनेक्टेड Jquery लायब्ररी आणि प्लगइनची आवश्यकता आहे कुकीज सेट करणे $.cookie("cookie_name", "cookie_value"); त्याच्यासारखे नाही एक धूर्त मार्गानेआम्ही cookie_name नावाची आणि cookie_value मूल्य असलेली कुकी तयार केली. ही कुकी केवळ वापरकर्त्याने ब्राउझर बंद करेपर्यंत संग्रहित केली जाईल, कारण आम्ही स्थापनेदरम्यान कुकीची कालबाह्यता तारीख निर्दिष्ट केलेली नाही.

तुम्हाला विशिष्ट कालावधीसाठी कुकी सेट करायची असल्यास, उदाहरणार्थ 1 दिवस, तुम्हाला वापरण्याची आवश्यकता आहे विशेष पॅरामीटरकालबाह्य
कालबाह्य: 1
)); ही दोन उदाहरणे सध्याच्या स्तरावरील पथांसाठी कुकीज सेट करतील. म्हणजेच, जर हा कोड http://mysite.ru/dir/ पृष्ठावर कार्य करत असेल, तर कुकी पथ /dir साठी सेट केली जाईल आणि यापुढे साइटच्या रूटमध्ये उपलब्ध राहणार नाही.

संपूर्ण साइटवर कुकीज वापरण्यासाठी, तुम्ही पथ पॅरामीटर वापरणे आवश्यक आहे
$.cookie("cookie_name", "cookie_value", (
कालबाह्य: 1,
मार्ग: "/",
)); कुकीज सेट करताना, तुम्ही इतर पॅरामीटर्स सेट करू शकता.

डोमेन - ही कुकी ज्या डोमेनवर वैध असेल ते निर्दिष्ट करते. डीफॉल्टनुसार, हे त्या पृष्ठाचे डोमेन आहे ज्यावर कुकी तयार केली गेली होती. या पॅरामीटरच्या मूल्यामध्ये, आपण सबडोमेन निर्दिष्ट करू शकता.

$.cookie("cookie_name", "cookie_value", (
डोमेन: "one.mysite.ru"
)); सुरक्षित – सत्य असल्यास, स्थापित केलेल्या कुकीज सुरक्षित राहतील आणि केवळ द्वारे सर्व्हरला पाठवल्या जातील https प्रोटोकॉल. हे पॅरामीटरक्वचितच वापरले जाते, त्यामुळे डीफॉल्ट मूल्य असत्य आहे.
$.cookie("cookie_name", "cookie_value", (
कालबाह्य: 1,
मार्ग: "/",
सुरक्षित: खरे
});

कुकी मूल्य कसे मिळवायचे ते येथे सोपे आहे
var coo = $.cookie("cookie_name"); कुकीज काढून टाकत आहे जर तुम्ही संपूर्ण साइटसाठी कुकीज सेट केल्या असतील, तर तुम्हाला त्या प्रत्येक गोष्टीसाठी हटवाव्या लागतील
$.cookie("cookie_name", null,(path: "/"));

कुकीज काय आहेत आणि ते कशासाठी आवश्यक आहेत यापासून सुरुवात करणे कदाचित योग्य आहे. कुकी हा डेटाचा एक भाग आहे जो वापरकर्त्याच्या बाजूला संग्रहित केला जाऊ शकतो आणि नंतर त्यांच्या कल्पना अंमलात आणण्यासाठी वापरला जाऊ शकतो.

चला कल्पना करूया की आपल्या वेबसाइटवर आपल्याला निवडण्याची संधी आहे रंग योजनाजागा. कुकीजवर हे अंमलात आणणे खूप सोयीचे आहे, कारण त्याने निवडलेली थीम फक्त त्यालाच दृश्यमान असेल.

PHP आणि jQuery दोन्हीमध्ये कुकीज अस्तित्वात आहेत. म्हणून, आम्ही प्रत्येक प्रकरणाचा अधिक तपशीलवार विचार करू.

jQuery मध्ये कुकीजसह काम करण्यासाठी तपशीलवार सूचना

1. कुकीज सेट करत आहे

आता आम्ही आमची पहिली कुकी तयार करण्याचा प्रयत्न करू शकतो:

$.cookie("cookie_name", "cookie_value", ( कालबाह्य: 3, पथ: "/", डोमेन: "your_site.ru", सुरक्षित: खरे ));

इथे काय आहे?

"cookie_name" - कुकीचे नाव;

"cookie_value" - कुकी मूल्य;

"कालबाह्य" - कुकीज किती दिवस साठवल्या जातील (आमच्या बाबतीत - 3 दिवस). या वेळेनंतर, ते होईल स्वयंचलित काढणेकुकीज;

"पथ" - साइटवर कुकीजची उपलब्धता (आमच्या बाबतीत "/" - संपूर्ण साइटवर उपलब्ध). इच्छित असल्यास, आपण फक्त सेट करू शकता विशिष्ट पृष्ठकिंवा ज्या विभागात कुकी उपलब्ध असेल, उदाहरणार्थ, “/ऑडिओ/रॉक”;

“डोमेन” – ज्या डोमेनवर कुकी वैध आहे. तुमच्याकडे सबडोमेन असल्यास, तुम्ही ते या पॅरामीटरमध्ये निर्दिष्ट करू शकता, उदाहरणार्थ, "डोमेन: "subdomain.your_site.ru"", आणि या प्रकरणात कुकी फक्त "subdomain.your_site.ru" डोमेनवर उपलब्ध असेल;

"सुरक्षित" – कुकी सुरक्षित https प्रोटोकॉलवर प्रसारित केली जावी हे दर्शविणारे पॅरामीटर.

येथे, सर्व पॅरामीटर्स आवश्यक नाहीत आणि कुकीज सेट करण्यासाठी, हे बांधकाम पुरेसे असेल:

$.cookie("cookie_name", "cookie_value", ( expires: 3, पथ: "/" ));

2. एक कुकी प्राप्त करत आहे

कुकीज मिळवणे अगदी सोपे आहे, तुम्ही हे कोड वापरून करू शकता:

$.cookie("cookie_name");

हा कोडव्हेरिएबलला नियुक्त केले जाऊ शकते आणि आपल्या गरजांसाठी वापरले जाऊ शकते:

var सामग्री = $.cookie("cookie_name"); जर (सामग्री != शून्य) ( अलर्ट("कुकी अस्तित्वात आहे!"); ) इतर ( अलर्ट("कुकी अस्तित्वात नाही!");)

सहमत आहे, हे खूप सोयीस्कर आहे.

3. कुकीज काढत आहे

कुकी मूल्य काढून टाकण्यासाठी, ते "नल" वर सेट करा:

$.cookie("cookie_name", null);

माझ्या मते, jQuery मध्ये कुकीजसह काम करण्याच्या परिचयाचा शेवट आहे. हे ज्ञान तुमच्या कल्पना अंमलात आणण्यासाठी पुरेसे आहे.

PHP मध्ये कुकीजसह काम करण्यासाठी तपशीलवार सूचना

कुकीजसह कार्य करण्यासाठी मागील पर्यायाप्रमाणे, तुम्हाला येथे काहीही कनेक्ट करण्याची आवश्यकता नाही.

1. कुकीज सेट करत आहे

मध्ये स्थापित करण्यासाठी PHP कुकीज, आम्ही अंगभूत “setcookie” फंक्शन वापरू:

इथे काय आहे?

"cookie_name" - कुकीचे नाव;

"cookie_value" - कुकी मूल्य;

"वेळ()+3600" - सेकंदांमध्ये कुकीचे आयुष्यभर (आमच्या बाबतीत - 1 तास). तुम्ही आजीवन "0" वर सेट केल्यास, ब्राउझर बंद होताच कुकी हटवली जाईल;

“/” – ज्या विभागात कुकीज उपलब्ध आहेत (आमच्या बाबतीत, संपूर्ण साइटवर उपलब्ध). ज्या विभागात कुकीज उपलब्ध होतील तो विभाग तुम्ही मर्यादित करू इच्छित असल्यास, नंतर “/” बदला, उदाहरणार्थ, “/ऑडिओ/रॉक”;

“your_site.ru” – डोमेन ज्यावर कुकी उपलब्ध असेल;

“true” – कुकी फक्त सुरक्षित https प्रोटोकॉलद्वारे उपलब्ध असल्याचे दर्शविणारे पॅरामीटर. IN अन्यथामूल्य - खोटे;

“असत्य” – कुकी उपलब्ध असल्याचे दर्शवणारे पॅरामीटर स्क्रिप्टिंग भाषा. अन्यथा – सत्य (केवळ http द्वारे उपलब्ध).

येथे देखील, सर्व पॅरामीटर्स आवश्यक नाहीत आणि कुकीज तयार करण्यासाठी आपल्याला फक्त खालील बांधकामांची आवश्यकता असेल:

सोयीसाठी, कुकी मूल्य व्हेरिएबलद्वारे सेट केले जाऊ शकते:

2. एक कुकी प्राप्त करत आहे

कुकीज प्राप्त करण्यासाठी, आपण हे वापरणे आवश्यक आहे:

$_COOKIE["cookie_name"];

मुळे होणाऱ्या चुका टाळण्यासाठी संभाव्य अनुपस्थितीकुकीज, वापरा:

jQuery मध्ये कुकीजसह काम करण्याच्या मागील उदाहरणाप्रमाणे, कुकीज व्हेरिएबलला नियुक्त केल्या जाऊ शकतात:

3. कुकीज काढत आहे

PHP मध्ये कुकीज काढणे jQuery प्रमाणेच सोपे आहे. तुम्हाला फक्त कुकी रिकाम्या मूल्यावर आणि नकारात्मक वेळेवर सेट करायची आहे (आधीच निघून गेलेली वेळ):

सेटकुकी("कुकी_नाव", "", वेळ() - 3600);

या उदाहरणातील वेळ एक तासापूर्वीचा आहे, जो कुकीज हटवण्यासाठी पुरेसा आहे.

मी हे लक्षात घेऊ इच्छितो की काही प्रकरणांमध्ये, आवश्यक कार्यक्षमतेची अंमलबजावणी करण्यासाठी डेटाबेस वापरण्यापेक्षा कुकीज वापरणे अधिक तर्कसंगत आहे.

वेब ब्राउझर साइटवरील प्रत्येक वापरकर्त्यासाठी विशिष्ट विशिष्ट सत्रे व्युत्पन्न करू शकतात. बर्याचदा ही प्रक्रिया मध्ये चालते अंतर्गत इंटरफेस PHP किंवा रुबी सारख्या भाषा वापरणे, परंतु आम्ही सत्र कुकीज देखील वापरू शकतो बाह्य इंटरफेसयेथे javascript मदत. तेथे अनेक ट्यूटोरियल आहेत जे तुम्हाला शुद्ध JS कुकीज कसे तयार करायचे ते सांगतात. परंतु नवीन jQuery कुकीज लायब्ररी ही प्रक्रिया अधिक सुलभ करते.

आम्ही तुम्हाला सांगूया की, मदतीमुळे तुम्ही खूप समजू शकता साधी प्रणालीप्रमाणीकरण सर्व कोड समोरच्या बाजूला सादर केले जातील, परंतु कामाचे परिणाम पाहण्यासाठी, तुम्हाला चाचणीसाठी थेट सर्व्हरची आवश्यकता असेल. वेब सर्व्हरद्वारे ऑफर केलेल्या स्थानिक IP वर ब्राउझर कुकीज तयार केल्या जातील, याचा अर्थ असा की दुर्दैवाने तुम्ही या स्क्रिप्ट स्थानिक पातळीवर चालवू शकणार नाही. आम्ही कशाबद्दल बोलत आहोत हे पाहण्यासाठी थेट डेमो पहायला विसरू नका.

लक्ष द्या! तुम्हाला लपवलेला मजकूर पाहण्याची परवानगी नाही.

दस्तऐवज आधार

प्रारंभ करण्यासाठी, आम्ही एक नमुना HTML5 दस्तऐवज तयार करू एकमेव दुवावर jQuery लायब्ररी, आणि सह देखील jQuery फंक्शनकुकीज. तुम्ही त्यांना थेट डाउनलोड करू शकता आणि आम्हाला फक्त jquery.cookie.js फाइलची आवश्यकता असेल.

jQuery सह कुकीज व्यवस्थापित करणे - लाइव्ह डेमो







ट्यूटोरियल पृष्ठासाठी दोन भिन्न दृश्ये तयार करण्यावर लक्ष केंद्रित करेल. प्रथम आमच्याकडे एक लॉगिन फॉर्म असेल जो कुकी नसल्यास प्रदर्शित केला जाईल. मानक डेमो/डेमो मूल्ये वापरून, तुम्ही फॉर्म वापरून लॉग इन करू शकता आणि ते तुमचे सत्र कुकीमध्ये सेव्ह करेल.

साहजिकच, तुम्ही स्क्रिप्टला डेटाबेसशी जोडल्यास, तुम्ही सर्व्ह करण्यास सक्षम असाल मोठी संख्यालॉगिन याचा अर्थ असा की एका स्क्रिप्टद्वारे तुम्ही अनेक लोकांना अधिकृत करू शकता आणि त्याच वेळी त्यांचे लॉगिन किंवा आयडी स्थानिक कुकीजमध्ये संग्रहित करू शकता. हे उदाहरण फक्त एक प्रारंभिक बिंदू आहे जिथे आम्हाला वापरकर्त्यांना अधिकृत करण्यासाठी Ajax विनंत्या किंवा सर्व्हर साइड स्क्रिप्टची आवश्यकता नाही.

आतील घटक सामग्री

पहिला div हा रॅपर आहे ज्यामध्ये संपूर्ण पृष्ठ असते. आयडी #loginform सह एक फॉर्म आहे जो प्रथम प्रदर्शित केला जातो. अभ्यागत चालू असेल तरच ते jQuery वापरून लपवले जाईल हा क्षणसत्र कुकी वापरून डेमो खात्यात लॉग इन केले.

मूलभूत कुकी व्यवस्थापन

यासह डेमो खात्यात लॉग इन करा खालीलवापरकर्तानाव/संकेतशब्द: डेमो/डेमो

वापरकर्तानाव:

पासवर्ड:

तुम्ही आहातडेमो म्हणून लॉग इन केले! कुकी मूळ लॉगिनपासून 1 दिवसात कालबाह्य होण्यासाठी सेट केली आहे.

लॉगआउट करू इच्छिता? सोपे!

आता लॉगआउट करा

तुमच्या लक्षात आले असेल की लॉगिन फॉर्म नंतर HTML मध्ये #logindetails या आयडीसह आणखी एक div आहे. आम्ही ते CSS शैली वापरून लपवले आहे, कारण वापरकर्त्याने लॉग इन केले असेल तरच आम्हाला ते प्रदर्शित करणे आवश्यक आहे. अंतर्गत HTML स्थिर आहे आणि नेहमी डेमो वापरकर्तानाव प्रदर्शित करते. परंतु डेटाबेससह कार्य करताना, आपण जावास्क्रिप्ट वापरून कोणत्याही वापरकर्तानावावर हे पॅरामीटर अद्यतनित करू शकता.

CSS शैली इतक्या क्लिष्ट नाहीत, परंतु काही तपशीलांमध्ये जाणे चांगले होईल. आम्ही ट्युटोरियलमधील टिप्स वापरून एक चमकदार CSS3 बटण तयार केले. या शैली खूप विस्तृत आहेत आणि त्यासाठी जतन केल्या पाहिजेत पुन्हा वापरआणि इतर प्रकल्पांमध्ये.

/** फॉर्म घटक **/
फॉर्म लेबल (फॉन्ट-आकार: 1.1em; ओळ-उंची: 1.25em; फॉन्ट-वजन: ठळक; समास-तळा: 5px; )

फॉर्म input.basic (
प्रदर्शन: ब्लॉक;
बाह्यरेखा: काहीही नाही;
फॉन्ट-आकार: 1.5em;
रंग: #525252;
रुंदी: 300px;
पॅडिंग: 10px 8px 10px 8px;
समास-तळाशी: 7px;
सीमा: 1px घन #888;
सीमा-त्रिज्या: 5px;
-वेबकिट-बॉक्स-शॅडो: इनसेट 0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: इनसेट 0 1px 2px rgba(0,0,0,0.4);
बॉक्स-छाया: इनसेट 0 1px 2px rgba(0,0,0,0.4);
}

#logindetails (
प्रदर्शन: काहीही नाही;
}
आम्हीही बदललो मानक घटकइनपुट करा जेणेकरुन ते पृष्ठावर चांगले बसतील. लॉगिन तपशील कंटेनर डिस्प्लेसह चिन्हांकित केले आहे: कोणतीही मालमत्ता नाही, त्यामुळे ते व्युत्पन्न पृष्ठावर कोणतीही जागा घेणार नाही. तथापि, तो अजूनही DOM चा सक्रिय भाग बनवतो, याचा अर्थ आम्ही jQuery वापरून प्रदर्शन मूल्य हाताळू शकतो. आता क्लोजिंग बॉडी टॅगच्या अगदी आधी पेजच्या तळाशी असलेल्या या jQuery कोडवर एक नजर टाकू.

jQuery मध्ये कुकीज

प्लगइन आम्हाला अनेक ऑफर करते मानक वैशिष्ट्ये, ज्यासाठी नियमित जावास्क्रिप्टमध्ये बरेच तर्क आवश्यक असू शकतात. हे नवीन कुकीज कॉल करण्यासाठी आणि विद्यमान हटविण्यासाठी पूर्व-निर्मित अंतर्गत पद्धती प्रदान करते. येथे काय चालले आहे हे समजून घेण्यासाठी कोडच्या ओपनिंग ब्लॉकवर एक नजर टाकूया:

$(कार्य())(
if($.cookie("वापरकर्तानाव")) (
$("#लॉगिनफॉर्म").लपवा();
$("#logindetails").शो();
}
निःसंशयपणे, आणखी आहेत चांगले मार्गअंतर्गत इंटरफेस भाषा वापरून हा फॉर्म व्यवस्थापित करणे, परंतु आमच्या डेमोमध्ये jQuery चांगले काम करते. $.cookie('username') विरुद्ध if स्टेटमेंट चालवून, आम्ही "वापरकर्तानाव" कुकी अस्तित्वात आहे का ते तपासतो. जर होय, तर आम्हाला माहित आहे की वापरकर्त्याने सध्या त्यांच्या खात्यात लॉग इन केले आहे, म्हणून आम्ही अधिकृतता फॉर्म लपवतो आणि लॉगिन माहिती दाखवतो. अन्यथा, काहीही होत नाही आणि आम्हाला फक्त लॉगिन फॉर्म असलेले पृष्ठ दिसते.

$("#लॉगिनफॉर्म").सबमिट(फंक्शन(ई)(
e.preventDefault();
var इनपुटनाम = $("#username").val();
var इनपुटपास = $("#पासवर्ड").val();

जर (इनपुटुनेम == "डेमो" && इनपुटपास == "डेमो") (
// यशस्वी प्रमाणीकरण आणि कुकी तयार करा
$.cookie("वापरकर्तानाव", "डेमो", ( कालबाह्य: 1 ));
var currentusr = $.cookie("वापरकर्तानाव");
window.location.reload();
}
});

$("#logoutbtn").on("क्लिक", फंक्शन(e)(
e.preventDefault();
if($.removeCookie("वापरकर्तानाव")) (
$("#logoutcontainer").html("यशस्वीपणे लॉग आउट झाले! रिफ्रेश करत आहे पृष्ठआता...");
window.setTimeout("location.reload()", 2000); // 2 सेकंदांनंतर रिफ्रेश करा
}
});
});
आम्ही या दोन फंक्शन्समध्ये एकत्र केले आहे एकच ब्लॉककोड, कारण ते एकमेकांशी खूप समान आहेत. वापरकर्त्याने खात्यात लॉग इन करण्याचा प्रयत्न करताच, आम्ही वापरकर्तानाव/संकेतशब्द "डेमो" शी जुळतो का ते तपासतो. जर होय, तर आम्ही $.cookie('username', 'demo', ( expires: 1 )); चालवतो, ज्यामध्ये अनेक पर्याय आहेत.

प्रथम आम्ही एक कुकी नाव "वापरकर्तानाव" नियुक्त करतो, ज्याच्या विरूद्ध आम्ही मूल्य तपासू शकतो. स्ट्रिंग "डेमो" हे कुकी मूल्य आहे, परंतु हे लक्षात ठेवणे महत्त्वाचे आहे की ही पद्धत अन्यथा अधिक योग्य असेल तर आम्ही कोणतेही वापरकर्तानाव किंवा आयडी देखील प्रविष्ट करू शकतो. शेवटी, शेवटचा पॅरामीटर हा पर्यायांचा संग्रह आहे जो कुकी कालबाह्य होण्यापूर्वी दिवसांची संख्या सेट करतो. आम्ही कालबाह्यता पर्याय वगळल्यास, वापरकर्त्याने ब्राउझर बंद करताच कुकीज हटवल्या जातील. हे सत्र कुकीमध्ये देखील नमूद केले आहे आणि खाली आम्ही स्क्रिप्टच्या तळाशी टिप्पणी केलेले एक साधे उदाहरण दिले आहे.

कोडचा दुसरा ब्लॉक #logoutbtn लिंकवर वापरकर्त्याच्या क्लिकचा मागोवा घेतो. अर्थात, जर वापरकर्ता सध्या लॉग इन असेल तरच लॉगआउट लिंक प्रदर्शित होईल. हे फंक्शन इफ स्टेटमेंटमध्ये $.removeCookie('username') चालवून सत्र समाप्त करेल. त्यामुळे जर आपण कुकी काढू शकलो, तर आपल्याला लॉगआउट बटण काढून यशाचा संदेश दाखवावा लागेल आणि लॉगिन फॉर्म सादर करावा लागेल.

अनुमान मध्ये

अधिकृतता आणि इतर कारणांसाठी माहिती साठवण्यासाठी कुकीज अतिशय सोयीस्कर आहेत. तुम्ही युनिक आयडी कुकीज वापरून बॅकएंडमध्ये सत्रांवर चालणारे ऑनलाइन स्टोअर आयोजित करू शकता. ऑनलाइन स्टोअर्स आज खूप लोकप्रिय आहेत, आणि वेब डेव्हलपमेंटमधील घडामोडी त्यांना व्यवस्थापित करणे आणि देखरेख करणे खूप सोपे करते. तुम्ही उदाहरण कोड डाउनलोड करू शकता आणि तुम्ही कसे वापरू शकता ते तपासू शकता हे उदाहरणव्ही स्वतःचे प्रकल्प, आणि कार्यक्षमता सुधारण्याचा देखील प्रयत्न करा.