در توسعه وب مدرن، داشتن راهی برای ماندگار کردن داده‌ها به توسعه‌دهندگان کمک می‌کند تا عملکرد را بهبود بخشند و تجربه کاربری بهتری را ایجاد کنند. استفاده از local storage یک راه موثر برای انجام این کار در برنامه‌های جاوااسکریپت می‌باشد.

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

Local Storage چیست؟

local storage یک ویژگی در مرورگرهای وب است که به توسعه‌دهندگان اجازه می‌دهد تا داده‌ها را در مرورگر کاربر ذخیره کنند. این ویژگی بخشی از web storage API همراه با session storage است.

local storage با پذیرش داده‌ها به عنوان جفت‌های key-value کار می‌کند. هنگام استفاده از آن، حتی زمانی که کاربر صفحه را رفرش می‌کند یا تب یا مرورگر را می‌بندد، داده‌ها از بین نمی‌روند.

تفاوت بین Local Storage و Session Storage

همانطور که قبلاً اشاره کردیم، web storage API در مرورگرهای مدرن دو ویژگی اصلی برای ذخیره‌سازی داده‌ها ارائه می‌دهد. این ویژگی‌ها local storage و session storage هستند.

تفاوت اصلی بین این دو، طول عمر داده‌های ذخیره شده و scope آن‌ها می‌باشد.

داده‌ها در local storage حتی زمانی که تب یا مرورگر بسته است در دسترس باقی می‌مانند. اما با بستن تب یا مرورگر، تمام داده‌های ذخیره شده در session storage پاک می‌شوند.

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

استفاده از Local Storage در جاوااسکریپت

آبجکت local storage متدهای مختلفی را ارائه می‌دهد که می‌توانیم برای تعامل با آن استفاده کنیم. با این متدها می‌توانیم داده‌ها را به local storage اضافه کنیم یا این که آن‌ها را بخوانیم و حذف نماییم.

ذخیره داده‌ها در Local Storage

برای ذخیره داده‌ها در local storage، از متد setItem() استفاده می‌کنیم. این متد دارای دو آرگومان key و value است.

localStorage.setItem(key, value)

اگر key در local storage وجود نداشته باشد، متد setItem() یک key جدید ایجاد می‌کند و value داده شده را به آن اختصاص می‌دهد. اما اگر key با همین نام وجود داشته باشد، value آن key را با value جدید ارائه شده به‌روزرسانی می‌کند.

خواندن داده‌ها از Local Storage

برای بازیابی و استفاده از داده‌ها از local storage، از متد getItem() استفاده می‌کنیم. این متد یک key به عنوان آرگومان دریافت می‌کند.

localStorage.getItem(key)

اگر key داده شده در local storage وجود داشته باشد متد، مقدار آن کلید را برمی‌گرداند. اما اگر موجود نباشد، null را return می‌کند.

ذخیره و خواندن مقادیر پیچیده داده در Local Storage

local storage فقط می‌تواند مقادیر string را ذخیره کند. این بدان معناست که اگر ما نیاز به ذخیره مقادیری مانند آبجکت و یا آرایه داشته باشیم، ابتدا باید یک نمایش رشته‌ای از آن مقادیر را دریافت کنیم. این کار را می‌توانیم با استفاده از متد JSON.stringify انجام دهیم. به عنوان مثال:

const userObj = {
  username = "Maria",
  email: "maria@mail.com"
}

localStorage.setItem('user', JSON.stringify(userObj))

متد JSON.stringify() آبجکت userObj را قبل از ارسال به local storage به حالت string تبدیل می‌کند.

اکنون، هنگامی که می‌خواهیم داده‌ها را از local storage بازیابی کنیم باید آن را از حالت string به شکل اصلی تغییر دهیم. ما این کار را با استفاده از متد JSON.parse() انجام می‌دهیم. به عنوان مثال:

const storedUserData = localStorage.getItem('user')

if (storedUserData) {
  const userData = JSON.parse(storedUserData)
  // You can use userData here...
} else {
  console.log('User data not found in local storage')
}

در مثال بالا، قبل از استفاده از متد JSON.parse() ابتدا بررسی می‌کنیم که آیا در local storage داده‌ای برای user وجود دارد یا نه. این موضوع مهم است زیرا اگر داده‌ای وجود نداشته باشد، JSON.parse() روی یک مقدار null اعمال می‌شود که در نتیجه منجر به ایجاد خطا می‌گردد.

حذف داده‌ها از Local Storage

دو روش برای حذف داده‌ها از local storage وجود دارد. یکی متد removeItem() و دیگری متد clear() است.

زمانی که می‌خواهیم یک آیتم را از local storage حذف نماییم، از متد removeItem() استفاده می‌کنیم. این متد یک key را به عنوان آرگومان دریافت کرده و جفت key-value مربوطه را از local storage حذف می‌کند.

localStorage.removeItem(key)

اما اگر به جای حذف یک جفت key-value، بخواهیم همه داده‌ها را حذف کنیم باید از متد clear() استفاده نماییم.

localStorage.clear()

متد clear() تمام جفت‌های key-value موجود در local storage دامین فعلی را حذف می‌کند.

دریافت نام key در Local Storage

اگر می‌خواهیم نام یک key را در یک ایندکس خاص در local storage به دست بیاوریم، می‌توانیم از متد key() استفاده کنیم. این متد عددی را به عنوان آرگومان می‌گیرد و نام key را در آن ایندکس تعیین شده return می‌کند. مثلا:

localStorage.key(0)

مثال بالا نام key را در ایندکس ۰ برمی‌گرداند. اگر key در ایندکس مشخص شده وجود نداشته باشد، متد مقدار null را return می‌کند.

بررسی یک مثال عملی

در ادامه یک مثال عملی از تفاوت بین local storage و session storage را باهم بررسی می‌کنیم.

در این مثال، نام کاربر را در local storage و سن آن را در session storage ذخیره می‌کنیم.

<!-- HTML --> 
<body>

  <h1 class="userName"></h1>
  <h2 class="userAge"></h2>

  <input type="text" class="name" placeholder="Enter name here"/>
  <button class="saveNameBtn">Save Name</button>
  
  <br />

  <input type="text" class="age" placeholder="Enter age here"/>
  <button class="saveAgeBtn">Save Age</button>
  
</body>

markup شامل دو المنت h است، یکی برای username و دیگری برای userAge. همچنین دو المنت input برای نام و سن داریم. هر ورودی دارای یک دکمه مرتبط با خود است که برای ذخیره داده‌ها استفاده می‌کنیم.

حال از متد querySelector برای انتخاب المنت‌های مختلف استفاده می‌نماییم.

const userNameText = document.querySelector(".userName")
const userAgeText = document.querySelector(".userAge")

const saveNameButton = document.querySelector(".saveNameBtn")
const saveAgeButton = document.querySelector(".saveAgeBtn")

مثال کد برای Local Storage

saveNameButton.addEventListener("click", () => {
  const userName = document.querySelector(".name").value
  userNameText.textContent = userName
  localStorage.setItem("name", userName)
})

ابتدا مقدار input نام را دریافت کرده و آن را به عنوان textContent از userNameText تنظیم می‌کنیم. سپس از متد setItem() مربوط به local storage برای ذخیره مقدار userName در حافظه محلی استفاده می‌نماییم.

در مرحله بعد، بررسی می‌کنیم که چگونه می‌توانیم مقدار نام را در زمانی که به آن نیاز داریم از local storage دریافت کنیم.

function displayUserName () {
  const nameFromLocalStorage = localStorage.getItem("name")

  if (nameFromLocalStorage) {
    userNameText.textContent = nameFromLocalStorage
  } else {
    userNameText.textContent = "No name data in local storage"
  }
}

displayUserName()

تابع displayUserName با استفاده از متد getItem() مقدار nameFromLocalStorage را دریافت می‌کند. اگر این مقدار در حافظه محلی وجود داشته باشد، آن را به عنوان textContent المنت userNameText تنظیم می‌کنیم. اما اگر null باشد یا وجود نداشته باشد، مقدار رشته No name data in local storage را بهtextContent تخصیص می‌دهیم.

مثال کد برای Session Storage

اکنون همین کار را برای مقدار age انجام می‌دهیم. تنها تفاوتی که در اینجا وجود دارد این است که به جای local storage از session storage استفاده می‌کنیم.

saveAgeButton.addEventListener("click", () => {
  const userAge = document.querySelector(".age").value
  userAgeText.textContent = userAge
  sessionStorage.setItem("age", userAge)
})

function displayUserAge () {
  const ageFromSessionStorage = sessionStorage.getItem("age")

  if (ageFromSessionStorage) {
    userAgeText.textContent = ageFromSessionStorage
  } else {
    userAgeText.textContent = "No age data in session storage"
  }
}

displayUserAge()

متدهای setItem و getItem برای session storage نیز کار می‌کنند.

اکنون اگر صفحه مرورگر را ببندیم و مجددا باز کنیم، اطلاعات name که در local storage‌ ذخیره شده است ثابت باقی می‌ماند. اما اطلاعات مربوط به age که در session storage ذخیره شده است، پس از بسته شدن صفحه پاک می‌شود. کد در این لینک در دسترس می‌باشد.

روش مشاهده Local Storage در DevTools

می‌توانیم با دنبال کردن مراحل زیر، محتویات local storage‌ را در ابزارهای توسعه‌دهنده مرورگر خود بررسی نماییم.

ابتدا DevTools را باز می‌کنیم. می‌توانیم این کار را با کلیک راست بر روی صفحه وب و انتخاب Inspect انجام دهیم. سپس، تب Application را در پنل DevTools انتخاب می‌کنیم. بسته به مرورگری که از آن استفاده می‌کنیم، این پنل ممکن است نام دیگری داشته باشد. به عنوان مثال، در سافاری و فایرفاکس Storage نام دارد.

پس از آن، بخش Storage را در نوار کناری پیدا می‌کنیم که لیستی از گزینه‌های مختلف web storage را نشان می‌دهد. اکنون برای باز کردن و مشاهده محتویات آن، بر روی Local Storage کلیک می‌کنیم.

در نهایت، برای مشاهده جفت‌های key-value مربوطه می‌توانیم بر روی آیتم‌های جداگانه کلیک نماییم.

مزایای استفاده از Local Storage در جاوااسکریپت

موارد زیر برخی از مزایای local storage نسبت به سایر مکانیسم‌های ذخیره‌سازی در توسعه وب مدرن را نشان می‌دهد.

• داده‌های پایدار: هنگامی که از local storage استفاده می‌کنیم، داده‌های ذخیره شده حتی زمانی که کاربر تب یا مرورگر را می‌بندد، پایدار باقی می‌مانند. استفاده از این گزینه می‌تواند برای ذخیره تنظیمات، ترجیحات کاربر و سایر داده‌های مرتبط مفید باشد و به ایجاد یک تجربه کاربری یکپارچه کمک کند.
• دسترسی آفلاین: ما می‌توانیم از local storage به عنوان وسیله‌ای برای ذخیره‌سازی داده‌ها استفاده کنیم که حتی با اینترنت محدود یا بدون اینترنت قابل دسترسی باشند. این ویژگی آن را به یک ویژگی مفید برای برنامه‌هایی تبدیل می‌کند که برای استفاده آفلاین به ذخیره‌سازی داده‌ها متکی هستند.
• ظرفیت ذخیره‌سازی بیشتر: local storage در مقایسه با سایر ابزار ذخیره‌سازی، ظرفیت نسبتاً بالایی دارد. به عنوان مثال، ظرفیت کوکی‌ها در هد دامنه به ۴ کیلوبایت محدود می‌شود. اما local storage می‌تواند در هر دامنه تا ۵ مگابایت داده ذخیره نماید.

محدودیت‌های استفاده از Local Storage در جاوااسکریپت

• فقط رشته‌ها را ذخیره می‌کند: همانطور که قبلاً در این مورد صحبت کردیم، local storage فقط می‌تواند مقادیر string را ذخیره کند. برای حل این مشکل می‌توانیم از متدهای JSON stringify و parse استفاده نماییم. اما برخی از توسعه‌دهندگان ممکن است آن را ترجیح ندهند، زیرا می‌تواند منجر به نوشتن کدهای پیچیده‌ای شود که دیباگ کردن آن‌ها دشوار باشد.
• نگرانی‌های امنیتی در این مورد داده‌های ذخیره شده وجود دارد: داده‌های local storage می‌توانند مستعد حملاتی مانند cross-site scripting (XSS) باشند. به این ترتیب، هنگام کار با اطلاعات حساس باید محتاط باشیم. توصیه می‌شود پیامدهای امنیتی را ارزیابی کنیم و در صورت لزوم گزینه‌های دیگر را در نظر بگیریم.
• برای web workerها در دسترس نیست: Local storage بخشی از آبجکت Window است. به این ترتیب، به thread اجرایی اصلی صفحه وب گره خورده است. این بدان معناست که برای web workerها در دسترس نیست. بنابراین اگر فرآیندهای پس‌زمینه را اجرا می‌کنیم، نمی‌توانیم از Local storage در اسکریپت‌های web worker استفاده نماییم.

جمع‌بندی

Local storage یکی از ویژگی‌های مرورگرهای وب مدرن است که به توسعه‌دهندگان این امکان را می‌دهد تا داده‌ها را بین sessionهای مرورگر ذخیره و نگه‌داری کنند.

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

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