معرفی ، تفاوت ها و شباهت های localStorage و sessionStorage  در جاوا اسکریپت

توی این مقاله قصد دارم درباره دو مفهوم کاربردی توی جاوا اسکریپت به نام های localStorage و sessionStorage صحبت کنم.خیلی وقتا توی پروژه هامون یه سری اطلاعات یه جایی ذخیره کنیم این اطلاعات به صورت local ذخیره میشه و بعد از روی این اطلاعات می تونیم تصمیمات بعدی برای اجرای کدمون بگیریم. مثل ذخیره اطلاعات یه کاربر روی سیستم خودش و خیلی موارد دیگه.این روزها localStorage معمولاً به کوکی ها ترجیح داده می شه چون API های قوی و تمیزی برای ذخیره سازی و بازیابی اطلاعات ارائه می ده (از طرف دیگه استفاده کوکی ها و درک آنها بسیار دشوار هستش.) localStorage و sessionStorage تنها API های ذخیره سازی وب هستن (به این معنی که اینها مکانیزمی برای ذخیره key/value فراهم می کنن) اما قطعاً تنها مواردی نیستن که به عنوان ابزاری برای ذخیره داده ها در مرورگر ما استفاده می شن. موردهای دیگه ای هم مثل Cache Storage ، Cookies و IndexedDB وجود دارن. برای دیدنشون ، DevTools خودتون باز کنید و روی برگه Application کلیک کنید.localStorageدر ابتدا باید بگم localStorage یک شی از Storage هستش. در کنسول خودتون localStorage را تایپ کنید و enter را بزنید ، Storage printed مشاهده می کنید.همین طوری که میبینید StoragePrototype دارای متدها و ویژگی ها هست:clearبرای پاک کردن datastore در localStorage از clear استفاده می کنیم.getItemبرای گرفتن مقدار ذخیره شده توی localStorage کافی key اون در متد getItem(key) اعلام کنید.keyمتد key به عنوان شناسه ارزش واقعی ذخیره یا نگهداری شده آن عمل می کند.برای برگردوندن نام key یک جفت key/value از index استفاده می شود به این صورت key(index)removeItemبرای حذف value از یه key مشخص از متد removeItem(key) استفاده می کنیم.setItemبرای مقدار دهی یک key از setItem(key, value) استفاده میکنیم.lengthبرای پیدا کردن تعداد key/value ذخیره شده توی localStorage از این متد استفاده میکنیم.اینها متدهایی هستن که localStorage برای ذخیره و بازیابی اطلاعات از storage خودش استفاده می کنه. localStorage داده ها را در جفت key/value ذخیره می کنه. دقیقاً مثل شی JS ساده قدیمی و Sets و Maps.window.localStorage localStorageلازم یه چندتا نکته مهم با هم توی این بخش مرور کنیم:کلیدها و مقادیر ( keys/values ) همیشه رشته یا string هستن (توجه داشته باشید که اشیا و عددهای صحیح به صورت رشته ای ذخیره میشن).localStorage.setItem(&quotnum&quot, 90) localStorage.setItem(&quotuser&quot, { name: &quotnnamdi&quot, age: 21 })localStorage.getItem(&quotnum&quot) // &quot90&quot localStorage.getItem(&quotuser&quot) // &quot[ object Object ]&quotاگر ما نیاز به ذخیره یک object در localStorage داریم ، باید آن را string کنیم ، یعنی از JSON # stringify API برای تبدیل مقدار JavaScript به رشته JavaScript Object Notation JSON استفاده کنیم.const user = { name: &quotnnamdi&quot, age: 27, occupation: &quotdoesn't know what he is doing&quot }localStorage.setItem(&quotuser&quot, JSON.stringify(user))به کمک JSON # stringify کاربر Object را به رشته تبدیل می کند.بنابراین وقتی مقدار کاربر را بازیابی می کنیم این را بدست می آوریم:localStorage.getItem(&quotuser&quot) // &quot{ name: &quotnnamdi&quot, age: 27, occupation: &quotdoesn't know what he is doing&quot }&quotبرای دریافت این اطلاعات هم به این صورت عمل می کنیم:localStorage.getItem(&quotuser&quot) // &quot{ name: &quotnnamdi&quot, age: 27, occupation: &quotdoesn't know what he is doing&quot }&quot const userLocal = JSON.parse(localStorage.getItem(&quotuser&quot)) // { name: &quotnnamdi&quot, age: 27, occupation: &quotdoesn't know what he is doing&quot } userLocal.name // &quotnnamdi&quotحتی هنگام بستن مرورگر localStorage datastore همچنان ادامه دارد. هنگام راه اندازی بعدی مرورگر ، داده های localStorage همچنان در دسترس خواهند بود.داده های ذخیره شده در localStorage هرگز منقضی نمی شن ، یعنی دارای محدودیت داده ها یا محدودیت عمر یا تاریخ انقضا نیستن. برای همیشه در مرورگر هستن تا اینکه توسط کاربر پاک بشن.داده ها هرگز به سرور منتقل نمی شن.داده ها بین همه برگه ها و پنجره ها از یک مبدا به اشتراک گذاشته می شوند.sessionStorageباید بگم که sessionStorage کمتر از localStorage استفاده میشه.sessionStorage یک شی از Storage است ، و همچنین روش ها و خصوصیات کلاس والد Storage ، StoragePrototype را به ارث می بره ، دقیقاً مثل localStorage:cleargetItemkeyremoveItemsetItemlengthاین متدها همون کاری را انجام می دن که در localStorage دیدیم. به عنوان مثال:mySessionStorage = window.sessionStorage || sessionStorage sessionStorage.setItem(&quotuserId&quot, &quot23ert5Y&quot) sessionStorage.setItem(&quotname&quot, &quotnnamdi&quot) sessionStorage.getItem(&quotuserId&quot) // &quot23ert5Y&quot sessionStorage.getItem(&quotname&quot) // &quotnnamdi&quot sessionStorage.length // 2 sessionStorage.key(0) // &quot23ert5Y&quot sessionStorage.key(1) // &quotnnamdi&quot sessionStorage.removeItem(&quotname&quot) sessionStorage.getItem(&quotname&quot) // undefined sessionStorage.clear() sessionStorage.getItem(&quotuserId&quot) // undefined sessionStorage.getItem(&quotname&quot) // undefinedsessionStorage.clear() sessionStorage.getItem(&quotuserId&quot) // undefined sessionStorage.getItem(&quotname&quot) // undefinedاما لازم بگم sessionStorage هم یه سری نکات مهم داری:زمان انقضا داده های ذخیره شده در sessionStorage با پایان یافتن جلسه صفحه پاک می شوند.باید گفت که session در این موارد پاک می شود:تب مرورگر بسته بشه.صفحه مرورگر بسته بشه.باز کردن یک tab جدید باعث ایجاد یک جلسه sessionStorage دیگر می شود حتی اگر tab از همان منشا باشد.همچنین session صفحه زمانی حفظ می شود که:تب refreshed بشهبا iframes همراه باشه.بنابراین به راحتی می توان گفت که localStorage بین برگه هایی با همان منبع به اشتراک گذاشته می شود در حالی که sessionStorage به اشتراک گذاشته نمی شود.محدودیت ذخیره سازی بزرگتر از یک کوکی (حداکثر 5 مگابایت) هستش.تفاوت های localStorage و sessionStorageدر localStorage بین tab های مرورگر به اشتراک گذاشته میشه ولی sessionStorage نه!توی باز و بسته کردن مرورگر اطلاعات در localStorage می ماند ولی در sessionStorage نه!داده های توی localStorage هرگز منقضی نمی شن در صورتی که sessionStorage با پایان یافتن session صفحه خاتمه پیدا میکنه.شباهت هاداده های در مرورگر ذخیره میشنداده ها در قالب String ذخیره می شن. اشیا، ، اعداد و غیره به یک رشته تبدیل می شن.خب به انتهای مقاله رسیدیم.امیدورم از این مقاله استفاده کامل ببرید.ممنون از توجهتون :)