کاربرد کوکی در جاوا اسکریپت — از صفر تا صد

۲۶۴ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
کاربرد کوکی در جاوا اسکریپت — از صفر تا صد

اینترنت جای غریبی است. اطلاعات مفید، تصاویر حیوانات بامزه و هر چیز دیگری که بخواهید در آن پیدا می‌شود. برخی اوقات ما می‌خواهیم با این موارد تعاملی داشته باشیم و لذا لازم می‌شود که در یک وب‌سایت حساب ایجاد کنیم. متأسفانه پروتکلی که وب بر مبنای آن ساخته شده یعنی HTTP ذاتاً «بی‌حالت» (stateless) است. شاید بپرسید منظور از بی‌حالت چیست؟ در HTTP هر دستور به صورت مستقل اجرا می‌شود و هیچ دانشی از دستورهای قبل از خود ندارد. از این رو برای ساخت وب‌سایت‌های تعاملی که کاربران و اقدامات آن‌ها را  به خاطر بسپارند نیازمند رویکرد مجزایی هستیم. در این راستا و در این مقاله با کاربرد کوکی در جاوا اسکریپت آشنا خواهیم شد.

997696

کوکی چیست؟

کوکی به اطلاعات کوچکی گفته می‌شود که از سوی یک وب‌سایت ارسال و در رایانه کاربران ذخیره می‌شوند. کوکی‌ها می‌توانند از سوی مرورگر کاربر خوانده شوند و نوعی از اطلاعات را در اختیار وب‌سایت قرار دهند، مثلاً به وب‌سایت بگویند که این کاربر چه کسی است.

کوکی‌ها تنها می‌توانند رشته‌های متنی را ذخیره کنند. البته برای این مشکل راه‌حل‌هایی وجود دارد. چهار نوع وظیفه ابتدایی وجود دارد که هنگام سر و کار داشتن با کوکی‌ها می‌توان اجرا کرد.

  • ایجاد کوکی
  • خواندن کوکی
  • به‌روزرسانی کوکی
  • حذف کوکی

این مجموعه رایج از چهار اقدام، عموماً به نام CRUD شناخته می‌شوند.

ایجاد کوکی در جاوا اسکریپت

همه کدهایی که در این مقاله می‌بینید را می‌توانید در این ریپوی گیت‌هاب (+) به طور کامل مشاهده کنید.

1JavaScript
2// Creating a cookie in JS
3document.cookie = "iAmACookie=Hello"
4// This is useful to store some data, but a cookie naturally expires upon exiting the current document
5
6// Creating a cookie with an expiration
7const tomorrow = new Date()
8tomorrow.setDate(tomorrow.getDate() + 1)
9console.log(tomorrow)
10// => Fri Oct 04 2019 10:07:16 GMT-0400 (Eastern Daylight Time)
11document.cookie = `thisCookieExpiresTomorrow=w0w; expires=${tomorrow}`

خواندن کوکی در جاوا اسکریپت

1JavaScript
2// Read all cookies
3console.log(document.cookie)
4// => iAmACookie=Hello; thisCookieExpiresTomorrow=w0w

به‌روزرسانی کوکی در جاوا اسکریپت

1JavaScript
2// Changing a cookie
3document.cookie = "iAmACookie=Wow"
4console.log(document.cookie)
5// => thisCookieExpiresTomorrow=w0w; iAmACookie=Wow

حذف کوکی در جاوا اسکریپت

1JavaScript
2// Deleting a cookie
3// In order to delete a cookie, we can just set the cookie expiration to a date that has already passed
4const yesterday = new Date()
5yesterday.setDate(yesterday.getDate() - 1)
6console.log(yesterday)
7// => Wed Oct 02 2019 10:07:16 GMT-0400 (Eastern Daylight Time)
8
9document.cookie = `iAmACookie=; expires=${yesterday}`
10console.log(document.cookie) // If this doesn't print  iAmACookie, it worked!
11// => thisCookieExpiresTomorrow=w0w

ممکن است متوجه شده باشید که وقتی تلاش می‌کنیم document.cookie را بخوانیم، یک رشته جدا شده با نقطه‌ویرگول از کوکی‌ها در اختیار ما قرار می‌گیرد. می‌توانیم آن رشته را بگیریم و کوکی‌های خاص را با افراز کردن رشته بر اساس نقطه‌ویرگول‌ها به دست آوریم.

1JavaScript
2// You'll notice that cookies are seperated by semicolons when stored. Thus we can return individual cookies by splitting them by the semicolons
3document.cookie = `newCookie=nomNOMn0m; expires=${tomorrow}`
4let cookieArray = document.cookie.split("; ")
5console.log(cookieArray[0])
6// => thisCookieExpiresTomorrow=w0w
7console.log(cookieArray[1])
8// => newCookie=nomNOMn0m

بدین ترتیب یک آرایه از همه کوکی‌ها به دست می‌آید. سپس می‌توانیم روی این آرایه حلقه تعریف کنیم و کوکی‌های خاصی که نیاز داریم را بیابیم.

ذخیره‌سازی یک شیء به عنوان کوکی

علاوه بر خواندن و نوشتن رشته در کوکی، می‌توانیم ساختمان‌های داده پیچیده‌تر مانند شیء را نیز به صورت کوکی ذخیره کنیم.

1JavaScript
2// We can use some creativity to store more complex data in a cookie
3const imAnObject = {name: "Sukrit", location: "New York", hobby: "JavaScript"}
4console.log(imAnObject) // Objects can be pretty useful
5// => {name: "Sukrit", location: "New York", hobby: "JavaScript"}
6console.log(imAnObject.name) // But cookies can only store strings
7// => Sukrit
8console.log(imAnObject.location) // So we have to be a little creative
9// => New York
10console.log(imAnObject.hobby) // To bypass this limitation
11// => JavaScript
12
13const stringy = JSON.stringify(imAnObject) // Convert this object to a string
14console.log(stringy)
15// => {"name":"Sukrit","location":"New York","hobby":"JavaScript"}
16document.cookie = `user=${stringy}; expires=${tomorrow}`
17cookieArray = document.cookie.split("; ")
18console.log(cookieArray[2]) // Still a string here, not very useful
19// => user={"name":"Sukrit","location":"New York","hobby":"JavaScript"}

کوکی‌ها در مورد حجم ذخیره‌سازی با محدودیت مواجه هستند، از این رو نباید تلاش کنید یک API کامل را در کوکی فشرده بسازید.

اکنون که یک شیء را در کوکی ذخیره کردیم، باید آن را به عنوان یک شیء باز پس بگیریم. این کار به روش زیر قابل انجام است.

1JavaScript
2// We can parse this stringified object back into an object using JSON.parse()
3const turnCookieToObject = string => {
4    const arrayOfStrings = string.split("=")
5    return JSON.parse(arrayOfStrings[1])
6}
7
8const objectified = turnCookieToObject(cookieArray[2])
9// This returns all of the functionality of the object
10console.log(objectified)
11// => {name: "Sukrit", location: "New York", hobby: "JavaScript"}
12console.log(objectified.name)
13// => Sukrit
14console.log(objectified.location)
15// => New York
16console.log(objectified.hobby)
17// => JavaScript

محدودیت‌های کوکی‌ها

  • کوکی‌ها بر اساس حجم داده‌ای که می‌توانند نگهداری کنند محدود شده‌اند.
  • کوکی‌ها از سوی کاربران به سهولت قابل خواندن هستند.
  • کاربران زیرک می‌توانند کوکی‌هایشان را با استفاده از اکستنشن‌های مرورگر ویرایش بکنند.

سخن پایانی

استفاده از کوکی یک روش عالی برای ردگیری اطلاعات وب‌سایت محسوب می‌شود. می‌توان از این اطلاعات برای ردگیری افرادی که در وب‌سایت لاگین می‌کنند استفاده کرد، گرچه این کار بدون نوعی رمزنگاری پیشنهاد نمی‌شود. همچنین با به‌کارگیری کوکی می‌توان رد اقدامات انجام یافته از سوی کاربر را پیگیری کرد و حتی تعداد مواردی که کاربر می‌تواند یک کار خاص را انجام دهد، محدود ساخت.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۳ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
better-programming
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *