ایونت ترکینگ در سایت های SPA | آموزش تصویری

شاید ندانید، اما هنگامی که از Google Tag Manager استفاده می‌کنید، در واقع کدهای جاوااسکریپتی را پیکربندی می‌کنید که به دنبال ردیابی تعاملات در وب‌سایت هستند. Google Tag Manager درواقع یک رابط کاربری آسان برای انجام این کار ارائه می‌دهد، بنابراین هنگام کار با آن نیازی به دانش برنامه نویسی نیست! با این حال، هرچه بیشتر با Google Tag Manager کار کنید، بیشتر نیازمند درک و استفاده از جاوااسکریپت برای پیشبرد تحلیل‌های خود خواهید بود. استفاده از جاوااسکریپت در تگ های Custom HTML، متغیرهای جاوااسکریپت، یا تمپلیت های سفارشی، انعطاف‌پذیری بیشتری به شما می‌دهد تا اطلاعات دقیق‌تری در مورد نحوه تعامل کاربران با سایت خود به دست آورید. اگر به برنامه‌نویسی علاقه‌مند هستید اما تازه‌کار هستید، یادگیری جاوااسکریپت ممکن است چالش‌برانگیز به نظر برسد. اما بالاخره باید از جایی شروع کرد، درست است؟ این آموزش به شما کمک خواهد کرد تا با استفاده از پنج موضوع کلیدی در مورد جاوااسکریپت برای گوگل تگ منیجر، پیاده سازی و اجرای ایونت ترکنیگ خود را بهتر پیش ببرید.

به عنوان یک پرفورمنس مارکتر، درک این مفاهیم اساسی نه تنها به شما اجازه می‌دهد تا با ابزارهایی مانند Google Tag Manager به طور بهتری کار کنید، بلکه به شما این قدرت را می‌دهد که داده‌های خود را به شیوه‌ای دقیق‌تر تجزیه و تحلیل کنید. بهره‌برداری از داده‌ها برای بهبود تبلیغات، افزایش تعامل کاربر و بهینه‌سازی تجربه کاربری، می‌تواند تفاوت قابل توجهی در عملکرد کمپین‌های شما ایجاد کند.

چرا یادگیری جاوا اسکریپت برای دیجیتال مارکترها ضروری است؟

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

برای دیجیتال مارکترها، دانستن نحوه به‌کارگیری جاوا اسکریپت در Google Tag Manager به منظور افزودن اسکریپت‌های سفارشی به وب‌سایت بدون دستکاری مستقیم کد وب، یک مهارت کلیدی است. اگر به دنبال افزایش دانش خود در زمینه جاوا اسکریپت هستید، پیشنهاد میکنم دوره‌های رایگان جاوا اسکریپت ارائه شده توسط W3Schools را شرکت کنید.

مفاهیم پایه جاوا اسکریپت برای گوگل تگ منیجر

در دنیای بازاریابی دیجیتال و بهینه‌سازی سایت‌ها، داشتن دانش برنامه‌نویسی، به‌خصوص در JavaScript، می‌تواند یک مزیت رقابتی به‌شمار آید. در این راستا، شناخت سینتکس (دستورالعمل نوشتاری کد) JavaScript و تفاوت‌های موجود میان نسخه‌های مختلف آن، از اهمیت ویژه‌ای برخوردار است.

امروزه، نسخه فعلی JavaScript که به‌عنوان ECMAScript 6 (ES6) شناخته می‌شود، تحولات قابل توجهی را در نحوه نوشتار کدها به ارمغان آورده است. با این حال، نکته قابل توجه برای دیجیتال مارکترها و کارشناسان SEO این است که اگرچه Google Tag Manager (GTM) از ES6 پشتیبانی می‌کند، اما در تگهای کاستوم HTML یا متغیرهای کاستوم JavaScript، تنها به نسخه ES5 وفادار مانده است.

این تفاوت‌های نسخه‌ای می‌تواند برای دیجیتال مارکترها به‌ویژه زمانی که در تلاش برای اجرای اسکریپت‌های پیچیده در GTM هستند، حائز اهمیت باشد. به‌عنوان مثال، یکی از ویژگی‌های کلیدی ES6، معرفی Arrow Functions است که سینتکس ساده‌تر و خواناتری برای تعریف توابع فراهم می‌آورد. با این حال، این توابع در ES5 و در نتیجه در بخش‌هایی از GTM که تنها از ES5 پشتیبانی می‌کنند، قابل استفاده نیستند.

تعریف و مقدار دهی متغیرها در جاوا اسکریپت

در عرصه برنامه‌نویسی، تعریف متغیرها یکی از اصول پایه‌ای است که به ما امکان می‌دهد تا با اختصاص دادن نام به مقادیر یا اشیاء، به داده‌ها دسترسی پیدا کنیم. این امر با استفاده از متغیرها، که به عنوان نماینده‌ای از داده‌ها عمل می‌کنند، امکان‌پذیر است. نحوه تعریف متغیرها بین نسخه‌های مختلف جاوا اسکریپت، مانند EC5 و EC6، متفاوت است.

در نسخه EC5، متغیرها با کلیدواژه var تعریف می‌شوند. این کلیدواژه انعطاف‌پذیری بالایی دارد اما محدودیت‌هایی نیز به همراه دارد.

var clothingBrand = ‘Nike’;
var price = 1500;

در حالی که نسخه EC6، با استفاده از const و let، میتوان متغیر تعریف کرد:

const clothingBrand = ‘Nike’;
const price = 1500;

مهمترین نکات هنگام استفاده از جاوا اسکریپت برای گوگل تگ منیجر

در ادامه این مطلب به پنج موضوع کلیدی در رابطه با استفاده از جاوااسکریپت در Google Tag Manager می‌پردازد که به دانش فنی پیچیده‌ای نیاز ندارند.

دیتالیر

یک وب سایت معمولاً دارای سه لایه است: آنچه کاربران شما می بینند، لایه ابزارهای متصل به وب سایت (مانند Google Analytics و Google Tag Manager) و دیتالیر، جایی که داده های تولید شده توسط کاربر ذخیره می شود. Data Layer یک روش قابل اعتماد برای جمع آوری داده ها از وب سایت در اختیار شما قرار می دهد. مقادیر داخل این لایه اغلب توسط Google Tag Manager برای ارسال اطلاعات به تگ ها استفاده می شود. این اطلاعات شامل ایونتها، متغیرها و تریگر هایی هستند که می توانند بر اساس مقادیر متغیرها تنظیم شوند. به محض اینکه کد نصب تگ منیجر روی سایت قرار بگیرد، دیتالیر هم به صورت خودکار ایجاد می شود.

بنابراین زمانی که میخواهید مطمئن شوید که تگ منیجر روی یک سایت به درستی کار میکند یا نه، اولین کاری که باید انجام دهید این است که به دیتا لیر نگاهی بیاندازید. یک راه سریع و راحت برای دسترسی به دیتا لیر، حتی بدون دسترسی به Tag Assistant، استفاده از Developer Tools در مرورگر است. اگر از Google Chrome استفاده می‌کنید، به منوی برنامه‌ها، سپس More Tools و سپس Developer Tools بروید. برای دسترسی به این بخش میتوانید از میانبر صفحه کلید Ctrl+Shift+I برای ویندوز یا Cmd+Shift+I برای مک هم استفاده کنید.

در تب Console، dataLayer را تایپ کنید، سپس Enter را فشار دهید.

با بررسی این بخش میتوانید مطمئن شوید که اطلاعات به درستی ذخیره شده اند یا نه.

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

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

• رشته‌ها (Strings) مجموعه‌ای از کاراکترها هستند که در ” ” قرار می‌گیرند و به عبارتی، متن محسوب می‌شوند. برای مثال، var clothingBrand = 'Nike'; نام یک برند لباس را نشان می‌دهد.
• اعداد (Numbers) یک مقدار عددی هستند. برای نمونه، var price = 15; قیمت یک کالا را نشان می‌دهد.
• بولین (Booleans) فقط می‌توانند یکی از دو مقدار true یا false را داشته باشند. این نوع داده‌ها برای عملیات منطقی و تصمیم‌گیری در کد استفاده می‌شوند. به عنوان مثال، var isOnSale = true; نشان می‌دهد که یک کالا در حال فروش است.

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

var clothingCategories = [‘shoes’, ‘t-shirts’, ‘pants’];
var firstElement = myArray[0]; // returns ‘shoes’
var dataTypes = [‘string’, 1, true, [1, 2, 3]]; // arrays can hold multiple data types

به طور مشابه، یک آبجکت می تواند چندین مقدار از انواع داده های مختلف را در خود نگه دارد.یک آبجکت شامل جفت های کلید-مقدار است که توسط {} مشخص می شوند.

var objectExample = {key: value}; // Example
var itemDetails = {
materialComposition: {
‘cotton’: 70,
‘linen’: 30
},
price: 30,
onSale: false,
searchTags: [‘t-shirt’, ‘women’, ‘tops’]
};

توابع جاوا اسکریپت

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

function priceAfterTax(price, tax) {
return price * (1 + tax);
};

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

function () {
for (var e = document.getElementsByTagName(“iframe”), x=0; x < e.length; x++) {
if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
return true;
}
}
return false;
}

دستورات شرطی (یا دستورات if) زمانی مورد استفاده قرار میگیرند که بر اساس بررسی یک سری شرایط خاص روی ورودی، یک سری عملیات خاص انجام میدهند. این دستورات اغلب در توابع برای برگرداندن خروجی های مختلف بسته به ورودی استفاده می شوند.در کد زیر، بسته به قیمت کالا، برای اینکه ارسال رایگان باشد یا خیر، تابع یک مقدار بولین برمی‌گرداند.

function freeShipping(price) {
if (price < 100) {
return false;
} else {
return true;
}
};

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

Scope قابلیت دسترسی به یک متغیر، شی و تابع را از قسمت های مختلف کد تعریف می کند.دو اسکوپ اصلی برای EC5 وجود دارد: جهانی (global) و function (معروف به محلی). زمانی که یک متغیر به صورت گلوبال تعریف می شود، بدون هیچ محدودیتی میتوان در سراسر کد به آن دسترسی داشت. اما در حالت تابع، متغیر فقط در سطح همان تابعی که تعریف شده است، در دسترس است و بیرون از همان تابع نمیتوان به آن دسترسی داشت. در مثال زیر، نمی‌توانید به متغیر isFreeShipping خارج از تابع دسترسی داشته باشید زیرا این متغیر داخل تابع تعریف شده است.با این حال، می‌توانید از متغیر shippingCost و تابع addShippingCost در توابع دیگر استفاده مجدد کنید.

var shippingCost = 10; // Global scope
function addShippingCost(price) {
var isFreeShipping = freeShipping(price) // Function-Local scope
if (isFreeShipping) {
return price;
} else {
return price + shippingCost;
}};

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

کار با داده از جنس رشته یا string

برای دسترسی به بخشی از یک متن باید از توابع مربوط به رشته ها استفاده کنید. روش .split() یکی از مهمترین توابعی است که هنگام کار با داده از جنس استرینگ مورد استفاده قرار میگیرد. سایر توابع کاربردی مرتبط با داده از نوع رشته عبارت هستند از:

• .slice() – قسمت مشخص شده یک رشته را استخراج می کند و یک رشته جدید برمی گرداند.
• .concat () – دو یا چند رشته به هم پیوسته را برمی گرداند.
• .lowerCase() – رشته مشخص شده را با تمام حروف کوچک برمی گرداند.
• .upperCase() – رشته مشخص شده را در تمام حروف بزرگ برمی گرداند.

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

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

• .push() – یک یا چند عنصر را به انتهای یک آرایه اضافه می کند (از این تابع برای وارد کردن دیتا به دیتالیر گوگل تگ منیجر استفاده می شود)
• .pop() – آخرین عنصر آرایه را حذف و برمی گرداند.
• .find() – اولین عنصر آرایه ای که شرایط مشخص شده را بدون تغییر آرایه اصلی برآورده می کند، پیدا کرده و برمی گرداند.
• .slice() – نباید با .splice() اشتباه گرفته شود، این متد بخشی از آرایه بین دو شاخص مشخص شده را به عنوان یک آرایه جدید برمی گرداند.
• .map() – یک آرایه جدید را پس از فراخوانی یک تابع در هر عنصر آرایه اصلی برمی گرداند.
• .forEach() – به شما امکان می دهد از هر عنصر در یک آرایه عبور کنید و با استفاده از آن عنصر عملیاتی را انجام دهید، اما – برخلاف .map() – چیزی را بر نمی گرداند.
• .includes() – یک بولین را بر اساس اینکه آیا آرایه حاوی عنصر مشخص شده است (این روش به حروف کوچک و بزرگ حساس است) برمی گرداند.
• .filter() – یک آرایه جدید حاوی هر عنصر در آرایه اصلی که شرایط مشخص شده را برآورده می کند، برمی گرداند.

منظور از DOM در جاوا اسکریپت

Document Object Model که به اختصار DOM نامیده می شود، نمایشی پویا از ساختار و محتوای یک وب سایت است. هنگامی که یک وب سایت را باز می کنید، مرورگر یک فایل HTML را از سرور وب سایت دانلود می کند و آنچه را که در سایت می بینید با استفاده از HTML، CSS و جاوا اسکریپت تولید می کند. سپس، DOM ساخته می‌شود و به کمک جاوا اسکریپت اجازه دسترسی به مقادیر خاصی از وب‌سایت را می‌دهد.

هنگامی که کاربران از سایت شما بازدید می کنند، کد ردیابی Google Analytics 4 از ایونت DOM برای ردیابی ایونت هایی مانند کلیک روی یک المان استفاده میکند.

دستور کوئری سلکتور (Query Selector)

تکنیک بعدی که می توانیم برای استفاده از جاوا اسکریپت برای گوگل تگ منیجر استفاده کنیم، روش کوئری سلکتور است. همانطور که پیش از این گفته شد، لایه ای از سایت که کاربران مشاهده میکنند، متشکل از HTML و CSS است. ما زمانی که بخواهیم به یک المان خاص در صفحه اشاره کنیم، میتوانیم از سی اس اس سلکتور آن المان استفاده کنیم. اما برای اینکه مطمئن شویم سلکتور انتخاب شده به صورت دقیق به المان مد نظر ما اشاره میکند، باید از دستور کوئری سلکتور در بخش کنسول اینسپکت استفاده کنیم.

درواقع کاری که کوئری سلکتور انجام می دهد این است که یک عنصر را در صفحه پیدا می کند و آن را به شما برمی گرداند تا بتوانید عملیات بیشتری را روی آن انجام دهید و آن را به Google Tag Manager منتقل کنید. تصور کنید که من میخواهک کلیک روی دکمه مشاوره رایگان در صفحه اصلی سایت خودم را ردیابی کنم. برای انجام این کار، باید از طریق یک سلکتور منحصر به فرد، به این المان دسترسی پیدا کنم. روی المان مورد نظرم راست کلیک کرده و گزینه inspect را انتخاب میکنم.

با اگاهی از تفاوت لوکال استوریج (Local storage) با سشن استوریج و کوکی (Cookie)، می‌توانید تصمیمات آگاهانه‌تری در زمینه ذخیره‌سازی داده‌های مرورگر بگیرید که نه تنها به بهبود تجربه کاربر کمک می‌کند بلکه امنیت و کارایی وب‌سایت شما را نیز بهبود میبخشد.

یکی از موضوعات مهمی که هنگام ایونت ترکینگ در آنالیتیکس ۴ با استفاده از گوگل تگ کنیجر اهمیت زیادی پیدا میکندُ مدل ذخیره سازی اطلاعات مربو ط به کاربران سایت است. شاید شما هم بارها با پاپ آپ هایی حاوی پیغام زیر در وب‌سایت‌های مختلف مواجه شده‌اید:

“این وب‌سایت برای ذخیره‌سازی اطلاعات شما از کوکی‌ها استفاده می‌کند.”

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

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

بررسی مختصری از تاریخچه کوکی

در ادامه این مقاله به بررسی تاریخچه کوکی‌ها و تفاوت آن‌ها با لوکال استوریج و سشن استوریج پرداخته‌ایم.

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

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

اینجا بود که کوکی‌ها به وجود آمدند. کوکی ها مکانیزمی برای ذخیره اطلاعات سبک سمت کلاینت یا سرور به صورت جفت‌های کلید-مقدار در مرورگر ارائه دادند. این کوکی ها دارای یک تاریخ انقضا بودند که باعث میشد به طور خودکار توسط مرورگر حذف شوند.

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

نیاز به افزایش ظرفیت ذخیره‌سازی در مرورگر

در زمان‌های قبل از HTML5، وب‌سایت‌ها برای ذخیره‌سازی اطلاعات کاربر در سمت کلاینت (کاربر)، بیشتر به کوکی‌ها متکی بودند. این کوکی‌ها محدودیت‌هایی از نظر حجم و امنیت داشتند. با معرفی HTML5، API‌های جدیدی برای ذخیره‌سازی اطلاعات در مرورگر کاربران ارائه شد که این محدودیت‌ها را به نحو قابل توجهی کاهش داد.

این API‌های ذخیره‌سازی جدید در دو نوع اصلی عرضه شدند: Local Storage و Session Storage. هر دوی این‌ها بخشی از آبجکت  Window در جاوا اسکریپت هستند، به این معنی است که می‌توانند به طور سراسری در کدهای جاوا اسکریپت که در یک صفحه وب اجرا می‌شوند، دسترسی پیدا کنند.

• Local Storage: امکان ذخیره‌سازی داده‌ها را بدون انقضا فراهم می‌کند، به این معنی که داده‌ها حتی پس از بستن مرورگر هم باقی می‌مانند.
• Session Storage: امکان ذخیره‌سازی داده‌ها را به صورت موقتی فراهم می‌کند، به این معنی که داده‌ها با بسته شدن تب مرورگر پاک می‌شوند.

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

همه چیز در مورد سشن استوریج در مرورگر

ابتدا نگاهی به جایگاه سشن استوریج در مرورگر می‌اندازیم:

• ابزارهای توسعه‌دهنده (Developer Tools) را در مرورگر باز کنید و به زبانه “Application” بروید.
• در بخش ذخیره‌سازی (Storage)، بخشی با نام “Session Storage” را خواهید یافت.
• با کلیک بر روی آن، می‌توانید محتوای سشن استوریج مربوط به آن وب‌سایت را مشاهده کنید.

حال، ویژگی‌های سشن استوریج مرورگر را بررسی می‌کنیم.

ظرفیت ذخیره‌سازی سشن استوریج

سشن استوریج بین 5 تا 10 مگابایت داده را در خود ذخیره میکند. مقدار دقیق ظرفیت ذخیره‌سازی با توجه به هر مرورگر متفاوت است، اما این تفاوت چشمگیر نیست!

مدت زمان نگهداری داده توسط سشن استوریج

همانطور که از نام آن پیداست، سشن استوریج تنها تا زمانی که تب مرورگر باز است، داده‌ها را حفظ می‌کند. این به معنای آن است که هر بار که یک تب یا پنجره مرورگر جدیدی باز می‌کنید، یک سشن استوریج جدید ایجاد می‌شود. پس، هر داده‌ای که در سشن استوریج ذخیره می‌کنید، به طور خودکار هنگام بستن آن تب/پنجره حذف می‌شود.

نحوه استفاده از سشن استوریج

برای دسترسی به سشن استوریج از دستورات زیر در بخش کنسول استفاده کنید:

window.sessionStorage

افزودن داده به سشن استوریج

بیایید با استفاده از تابع setItem موجود در شیء sessionStorage، یک جفت کلید-مقدار به سشن استوریج اضافه کنیم:

sessionStorage.setItem(“id”, “123”)

با این کار یک داده جدید در سشن استوریج با کلید id و مقدار 123 قرار میگیرد. اگر بازهم sessionStorage را فراخوانی کنید، مقدار زیر را دریافت خواهید کرد که حاوی اطلاعاتی است که اخیرا به سشن استوریج اضافه کردید:

Storage {id: ‘123’, length: 1}