در توسعه وب مدرن، داشتن راهی برای ماندگار کردن داده‌ها به توسعه‌دهندگان کمک می‌کند تا عملکرد را بهبود بخشند و تجربه کاربری بهتری را ایجاد کنند. استفاده از local storage یک راه موثر برای انجام این کار در برنامه‌های جاوااسکریپت می‌باشد.
در این مقاله قصد داریم تا با این موضوع که local storage چیست و چگونه در جاوااسکریپت استفاده می‌شود، آشنا شویم. همچنین مزایای استفاده از local storage و برخی از محدودیت‌های آن را هم باهم بررسی خواهیم کرد.
local storage یک ویژگی در مرورگرهای وب است که به توسعه‌دهندگان اجازه می‌دهد تا داده‌ها را در مرورگر کاربر ذخیره کنند. این ویژگی بخشی از web storage API همراه با session storage است.
local storage با پذیرش داده‌ها به عنوان جفت‌های key-value کار می‌کند. هنگام استفاده از آن، حتی زمانی که کاربر صفحه را رفرش می‌کند یا تب یا مرورگر را می‌بندد، داده‌ها از بین نمی‌روند.
همانطور که قبلاً اشاره کردیم، web storage API در مرورگرهای مدرن دو ویژگی اصلی برای ذخیره‌سازی داده‌ها ارائه می‌دهد. این ویژگی‌ها local storage و session storage هستند.
تفاوت اصلی بین این دو، طول عمر داده‌های ذخیره شده و scope آن‌ها می‌باشد.
داده‌ها در local storage حتی زمانی که تب یا مرورگر بسته است در دسترس باقی می‌مانند. اما با بستن تب یا مرورگر، تمام داده‌های ذخیره شده در session storage پاک می‌شوند.
همچنین، داده‌های ذخیره شده در local storage در چندین تب و پنجره مرورگر قابل دسترسی هستند. از طرف دیگر، داده‌های session 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، از متد getItem() استفاده می‌کنیم. این متد یک key به عنوان آرگومان دریافت می‌کند.
localStorage.getItem(key)
اگر key داده شده در local storage وجود داشته باشد متد، مقدار آن کلید را برمی‌گرداند. اما اگر موجود نباشد، null را return می‌کند.
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 وجود دارد. یکی متد 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() استفاده کنیم. این متد عددی را به عنوان آرگومان می‌گیرد و نام 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")
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 تخصیص می‌دهیم.
اکنون همین کار را برای مقدار 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 را باز می‌کنیم. می‌توانیم این کار را با کلیک راست بر روی صفحه وب و انتخاب Inspect انجام دهیم. سپس، تب Application را در پنل DevTools انتخاب می‌کنیم. بسته به مرورگری که از آن استفاده می‌کنیم، این پنل ممکن است نام دیگری داشته باشد. به عنوان مثال، در سافاری و فایرفاکس Storage نام دارد.
پس از آن، بخش Storage را در نوار کناری پیدا می‌کنیم که لیستی از گزینه‌های مختلف web storage را نشان می‌دهد. اکنون برای باز کردن و مشاهده محتویات آن، بر روی Local Storage کلیک می‌کنیم.
در نهایت، برای مشاهده جفت‌های key-value مربوطه می‌توانیم بر روی آیتم‌های جداگانه کلیک نماییم.
موارد زیر برخی از مزایای local storage نسبت به سایر مکانیسم‌های ذخیره‌سازی در توسعه وب مدرن را نشان می‌دهد.
JSON stringify و parse استفاده نماییم. اما برخی از توسعه‌دهندگان ممکن است آن را ترجیح ندهند، زیرا می‌تواند منجر به نوشتن کدهای پیچیده‌ای شود که دیباگ کردن آن‌ها دشوار باشد.Local storage یکی از ویژگی‌های مرورگرهای وب مدرن است که به توسعه‌دهندگان این امکان را می‌دهد تا داده‌ها را بین sessionهای مرورگر ذخیره و نگه‌داری کنند.
این ویژگی در مقایسه با کوکی‌های سنتی، ظرفیت ذخیره‌سازی بیشتری را فراهم می‌کند. همچنین، برخلاف کوکی‌ها، به فرآیندهای سمت سرور متکی نیست. همین موضوع نیاز به درخواست‌های مکرر سرور را کاهش می‌دهد و به بهبود عملکرد کمک می‌کند.
در این مقاله با نحوه استفاده از Local storage در جاوااسکریپت آشنا شدیم. همچنین ذخیره، بازیابی و حذف داده‌ها از Local storage را باهم بررسی نمودیم. علاوه بر این، درمورد برخی از مزایای و محدودیت‌های استفاده از Local storage در پروژه خود بیشتر صحبت کردیم.
دیدگاه‌ها: