به نام خدا با سلام خدمت کد ایتی های عزیز در ادامه سری مقالات اموزشی جاوا اسکریپت این جلسه به تفاوت بين session storage و local storage و cookies در جاوا اسکریپت يا همان توابع ناشناس خواهيم پرداخت با ما همراه باشید.

جاوا اسکریپت سه مکانیسم برای ذخیره داده ها در کلاینت فراهم می کند: cookies, session storage و local storage. هر کدام مزایا و معایبی دارند.

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

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

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

در این آموزش قصد داریم هر یک از آنها را به تفصیل بررسی کنیم.

Local Storage

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

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

داده ها در Local Storage به صورت جفت کلید/مقدار ذخیره می شوند. کلید مانند نام داده است و مقدار آن مانند خود داده واقعی است. می توانید آن را به عنوان یک متغیر در جاوا اسکریپت در نظر بگیرید. برای ذخیره داده ها در Local Storage، ابتدا باید یک کلید ایجاد کنید. سپس می توانید هر داده ای را که می خواهید در زیر آن کلید ذخیره کنید.

برای ایجاد یک کلید، از متد ()setItem استفاده می کنید. این متد دو آرگومان می گیرد، اولی کلید و دومی مقداری است که می خواهید ذخیره کنید.

localStorage.setItem('key', 'value');

1	localStorage.setItem('key', 'value');

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

برای ذخیره داده ها، دوباره از متد ()setItem استفاده می کنید. این بار، کلید را به عنوان آرگومان اول و داده هایی را که می خواهید ذخیره کنید به عنوان آرگومان دوم ارسال می کنید.

localStorage.setItem('key', 'value');

1	localStorage.setItem('key', 'value');

برای بازیابی داده ها از Local Storage، از متد ()getItem استفاده می کنید. این متد کلید را به عنوان آرگومان می گیرد و داده هایی را که در زیر آن کلید ذخیره شده است برمی گرداند.

localStorage.getItem('key');

1	localStorage.getItem('key');

اگر می خواهید یک مورد را از Local Storage حذف کنید، از متد ()removeItem استفاده می کنید. این روش کلید را به عنوان آرگومان می گیرد و داده هایی را که در زیر آن کلید ذخیره می شود حذف می کند.

Session Storage

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

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

Session Storage روشی برای ذخیره داده ها در سمت سرویس گیرنده برنامه است. این شبیه به ذخیره سازی محلی است، اما با چند تفاوت کلیدی :

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

Session Storage یک راه عالی برای بهبود عملکرد برنامه های کاربردی وب شما با کاهش مقدار داده ای است که باید بین مشتری و سرور منتقل شود. همچنین می‌توان از آن برای ذخیره داده‌ها به روشی امن‌تر استفاده کرد، زیرا داده‌ها در کوکی‌ها ذخیره نمی‌شوند، جایی که سایت‌های شخص ثالث می‌توانند به آن‌ها دسترسی داشته باشند.

برای استفاده از Session Storage در برنامه های کاربردی وب خود، باید از شی sessionStorage استفاده کنید. این شی دسترسی به فضای ذخیره سازی جلسه جاری را فراهم می کند.

شی sessionStorage دو روش دارد.

()setItem – این روش یک جفت کلید/مقدار را در ذخیره‌سازی جلسه تنظیم می‌کند.

sessionStorage.setItem("name", "codeit");

1	sessionStorage.setItem("name", "codeit");

()getItem – این روش مقدار یک کلید را از ذخیره‌سازی جلسه بازیابی می‌کند.

var name = sessionStorage.getItem("name")

1	var name = sessionStorage.getItem("name")

شی sessionStorage همچنین دارای چند ویژگی دیگر است :

length – این ویژگی تعداد جفت کلید/مقدار را در ذخیره‌سازی جلسه برمی‌گرداند.
()key – این روش یک شاخص را به عنوان پارامتر می پذیرد و کلید را در آن شاخص در ذخیره سازی جلسه برمی گرداند.

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

Cookies

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

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

تنظیمات کوکی

یک کوکی با استفاده از متد ()setItem تنظیم می شود. این متد دو آرگومان نام کوکی و مقدار کوکی را می پذیرد.

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

کد زیر یک کوکی با نام “name” و مقدار “codeit” تنظیم می کند.

document.cookie = "name=codeit";

1	document.cookie = "name=codeit";

خواندن از کوکی

یک کوکی با استفاده از متد ()getItem خوانده می شود. این متد نام کوکی را به عنوان آرگومان می پذیرد و مقدار کوکی را برمی گرداند.اگر کوکی وجود نداشته باشد، متد ()getItem مقدار Null برمی‌گرداند.کد زیر کوکی “name” را می خواند و مقدار را در متغیر “user” ذخیره می کند.

var user = document.cookie.getItem("name");

1	var user = document.cookie.getItem("name");

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

تفاوت بين session storage و local storage و cookies

جدول زیر تفاوت های عمده بین Local Storage، Session Storage و Cookies را نشان می دهد.

Local Storage	Session Storage	Cookies
این اجازه می دهد تا 10 مگابایت داده ذخیره شود.	این اجازه می دهد تا 5 مگابایت داده ذخیره شود.	ظرفیت ذخیره سازی محدود به 4 کیلوبایت داده است.
هنگامی که مرورگر بسته می شود، داده های ذخیره شده حذف نمی شوند.	داده ها فقط برای جلسه ذخیره می شوند و با بسته شدن مرورگر حذف خواهند شد.	داده ها را می توان تنظیم کرد تا در زمان خاصی منقضی شوند.
ذخیره‌سازی محلی برای ذخیره داده‌هایی که کاربر بعداً باید به آنها دسترسی پیدا کند، مانند داده‌های آفلاین مفید است.	ذخیره سازی جلسه یک راه عالی برای بهبود عملکرد برنامه های وب شما است.	کوکی‌ها انتخاب خوبی برای ذخیره داده‌هایی هستند که نباید برای مدت طولانی باقی بمانند، مانند شناسه‌های جلسه.
این به ویژه برای ذخیره داده‌هایی مفید است که می‌خواهید حتی اگر کاربر مرورگر را ببندد، مانند تنظیمات، باقی بمانند.	ذخیره‌سازی جلسه برای ذخیره داده‌هایی که حساس هستند، مانند اعتبارنامه‌های ورود، مفید است.	کوکی ها اغلب برای ذخیره داده هایی استفاده می شوند که حساس نیستند، مانند تنظیمات برگزیده کاربر
Local Storage یک ویژگی جدید است که در HTML5 معرفی شده است	Session Storage یک ویژگی جدید است که در HTML5 معرفی شده است	کوکی ها قدیمی ترین (HTML4) و شناخته شده ترین مکانیسم هستند.
ديتا ها با درخواست مشتری به سرور ارسال نمی شوند.	اطلاعات با درخواست مشتری به سرور ارسال نمی شوند	ديتاها با درخواست مشتری به سرور ارسال می شود
داده ها در مرورگر و سیستم ذخیره می شوند.	ديتا ها فقط در مرورگر ذخیره می شوند.	داده ها فقط در مرورگر ذخیره می شوند.

نتیجه گیری

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

خب دوستان عزیز به پايان جلسه تفاوت بين session storage , local storage و cookies در جاوا اسکريپت رسيديم اميدواريم مورد توجه شما واقع قرار گيرد.

سايرمقالات

عملگر void در جاوا اسکریپت

نحوی مدیریت استثناها با try-catch در کاتلین | آموزش مقدماتی کاتلین | درس سیزدهم

برای امتیاز به این نوشته کلیک کنید!

[کل: 2 میانگین: 5]

اشتراک‌گذاری

نحوی مدیریت استثناها با try-catch در کاتلین | آموزش مقدماتی کاتلین | درس سیزدهم نوشته قبل

آموزش افزونه نویسی (Extension Function) در کاتلین | آموزش مقدماتی کاتلین | درس 14 ام نوشته بعد

علی فرجی

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