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

داده های جاوااسکریپت پرونده های داده ای هستند که حاوی اطلاعات ارائه شده توسط کاربران هستند. این پرونده ها در رایانه های کاربران ذخیره می شوند. این آموزش نحوه ایجاد و استفاده از کوکی ها برای بهبود وب سایت ها را توضیح می دهد.

شما می آموزید که چگونه آنها را از ابتدا و با گذر از تمام پارامترهای لازم در JavaScript بنویسید. این آموزش همچنین شامل روشهای تغییر ، به روزرسانی و حذف کوکی ها می باشد. علاوه بر این ، شما یاد خواهید گرفت که کوکی مجموعه جاوا اسکریپت را بسازید.

نکات اصلی داده های جاوااسکریپت:

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

یک مثال اساسی

کوکی ها چیست؟ این داده های ذخیره شده در رایانه به صورت جفت نام-مقدار است.

مثال زیر را ببینید. دقیقاً می توانید چنین جفتی را ببینید که برای استفاده از نام کاربری که بازدیدکننده یک صفحه وب هنگام ورود به سیستم وارد کرده است ، استفاده می شود:

username=jogger66

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

پدید آوردن

در جاوا اسکریپت ، ممکن است از ویژگی document.cookie برای ایجاد ، حذف و خواندن کوکی ها استفاده شود.

مثال زیر اولین گامی را که باید برداریم – ایجاد یک کوکی – را نمایش می دهد:

document.cookie = "name=jogger66";

به طور پیش فرض ، با بستن مرورگر ، کوکی ها فوراً حذف می شوند. با این حال ، یک تاریخ انقضا مشخص می تواند به کوکی ها نیز اضافه شود:

document.cookie = "name=jogger66; expires=Fri, 11 Dec 2019 14:00:00 UTC";

پارامتر path مسیری را که کوکی به آن تعلق دارد مشخص می کند. به طور پیش فرض ، مسیر صفحه فعلی است:

document.cookie = "name=jogger66; expires=Fri, 11 Dec 2019 14:00:00 UTC; path=/";

خواندن

مثال ارائه شده در زیر نحوه خواندن کوکی ها را در JavaScript نشان می دهد:

  var xyz = document.cookie;

توجه: این روش همه کوکی ها را در یک لیست رشته ای برمی گرداند (cookieOne = valueOne ؛ cookieTwo = valueTwo …)

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

روند تغییر کوکی ها در JavaScript همان ایجاد آنهاست. مقدار کوکی قدیمی با جایگزینی آن حذف می شود:

  document.cookie = "name=newJogger; expires=Thu, 22 Dec 2022 22:00:00 UTC; path=/";

در حال حذف شدن

برای حذف یک کوکی ، تاریخ انقضا آن را به یک تاریخ در گذشته تنظیم کنید. همانطور که قبلاً گذشت ، سیستم کوکی را دیگر معتبر نمی داند:

  document.cookie = "name=newJogger; expires=Thu, 22 Dec 2022 22:00:00 UTC; path=/";

توجه: همیشه بهتر است هنگام حذف کوکی مسیر را مشخص کنید تا مطمئن شوید که کوکی درست را حذف کرده اید. در صورت تنظیم نشدن مسیر ، ممکن است برخی از مرورگرها حتی اجازه حذف نیز ندهند.

تنظیمات

اکنون که دانستید کوکی چیست ، در بندهای زیر نحوه تنظیم ، دریافت و بررسی کوکی های کاربر توضیح داده خواهد شد. این اولین مثال نحوه عملکرد کوکی مجموعه جاوا اسکریپت را نشان می دهد.

این تابع با جمع کردن نام کوکی (cookName) ، مقدار کوکی (cookValue) و رشته منقضی (انقضا) یک کوکی ایجاد می کند:

function setCookie(cookName, cookValue, expiry) {
    var dt = new Date();
    dt.setTime(dt.getTime() + (expiry*24*60*60*1000));
    var expires = "expires="+ dt.toUTCString();
    document.cookie = cookName + "=" + cookValue + ";" + expiry + ";path=/";
}

گرفتن

سپس ، تابعی ایجاد می کنیم که مقدار کوکی مشخص شده را برمی گرداند. نام کوکی را به عنوان یک پارامتر می گیرد (cookName) ، هر عنصر از سند را تقسیم می کند. کوکی را به یک آرایه (cookArray) تقسیم می کند ، سپس تمام عناصر را حلقه می کند و هر مقدار را می خواند.

اگر یک کوکی پیدا شود c.indexOf (نام) == 0 ، مقدار آن بازگردانده می شود ، در غیر این صورت – “” بازگردانده می شود:

function getCookie(cookName) {
    var cname = cookName + "=";
    var deCookie = decodeURIComponent(document.cookie);
    var cookArray = decodedCookie.split(';');
    for(var i = 0; i < cookArray.length; i++) {
        var c = cookArray[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(cname) == 0) {
            return c.substring(cname.length, c.length);
        }
    }
    return "";
}

چک کردن

آخرین کاری که ما انجام خواهیم داد بررسی کوکی است.

اگر یک عملکرد یک کوکی موجود را پیدا کند ، یک تبریک نشان می دهد. در غیر این صورت ، از کاربر می خواهد نام خود را وارد کند. سپس ، اطلاعات جدید را ذخیره کرده و یک کوکی تنظیم می کند:

function checkCookie() {
    var firstname = getCookie("firstname");
    if (firstname != "") {
        alert("Welcome again " + firstname);
    } else {
        firstname = prompt("Enter name:", "");
        if (firstname != "" && firstname != null) {
            setCookie("firstname", firstname, 365);
        }
    }
}

یک داده تمام شده

ما تمام مراحل مدیریت یک کوکی جاوا اسکریپت را مرحله به مرحله طی کردیم. همه اش را گرفتی؟ خارق العاده!

حال ، بیایید ببینیم تمام قسمت هایی که در بالا توضیح داده شده به هم پیوسته و با هم نمایش داده شده اند. نتیجه یک کوکی در حال کار است که آماده استفاده در وب سایت است:

function setCookie(cookName, cookValue, expiry) {
 var dt = new Date();
 dt.setTime(dt.getTime() + (expiry*24*60*60*1000));
 var expires = "expires="+ dt.toUTCString();
 document.cookie = cookName + "=" + cookValue + ";" + expiry + ";path=/";
}

function getCookie(cookName) {
 var cname = cookName + "=";
 var deCookie = decodeURIComponent(document.cookie);
 var cookArray = decodedCookie.split(';');
 for(var i = 0; i < cookArray.length; i++) {
   var c = cookArray;
   while (c.charAt(0) == ' ') {
     c = c.substring(1);
   }
   if (c.indexOf(cname) == 0) {
     return c.substring(cname.length, c.length);
   }
 }
  return "";
}

function getCookie(cookName) {
 var cname = cookName + "=";
 var deCookie = decodeURIComponent(document.cookie);
 var cookArray = decodedCookie.split(';');
 for(var i = 0; i < cookArray.length; i++) {
   var c = cookArray;
   while (c.charAt(0) == ' ') {
     c = c.substring(1);
   }
   if (c.indexOf(cname) == 0) {
     return c.substring(cname.length, c.length);
   }
 }
   return "";
 }
}

خلاصه داده های جاوااسکریپت:

• برای ذخیره اطلاعات کاربر می توانید از کوکی ها استفاده کنید.
• می توانید از کوکی ها برای اهداف مختلف مانند سلام و احوالپرسی با کاربر استفاده کنید.
• کوکی ها می توانند تاریخ انقضا داشته باشند ، مجدداً تنظیم شده و تغییر کنند.