معرفی ، تفاوت ها و شباهت های 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:

  • clear
  • getItem
  • key
  • removeItem
  • setItem
  • length

این متدها همون کاری را انجام می دن که در 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 ذخیره می شن. اشیا، ، اعداد و غیره به یک رشته تبدیل می شن.

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

ممنون از توجهتون :)