نحوه استفاده از localStorage در جاوا اسکریپت

به عنوان جایگزینی برای کوکی ها، localStorage از پشتیبانی cleaner در جاوا اسکریپت پشتیبانی می کند و کار با آن بسیار آسان است. در ادامه نحوه استفاده از localStorage در جاوا اسکریپت را یاد بگیرید.

مکانیسم localStorage نوعی شی ذخیره سازی وب را فراهم می کند که به شما امکان می دهد داده ها را در مرورگر ذخیره و بازیابی کنید. شما می توانید داده ها را بدون انقضا ذخیره کرده و به آنها دسترسی داشته باشید. داده ها حتی پس از بستن سایت شما توسط بازدید کننده در دسترس خواهند بود.

شما معمولاً با استفاده از جاوا اسکریپت به LocalStorage دسترسی خواهید داشت. با مقدار کمی کد، می توانید یک پروژه نمونه، مانند یک شمارنده امتیاز بسازید. این نشان می‌دهد که چگونه می‌توانید داده‌های دائمی را تنها با استفاده از کد سمت سرویس گیرنده ذخیره کرده و به آنها دسترسی داشته باشید.

LocalStorage در جاوا اسکریپت چیست؟

شی localStorage بخشی از API ذخیره سازی وب است که اکثر مرورگرهای وب از آن پشتیبانی می کنند. می توانید داده ها را به صورت جفت کلید-مقدار با استفاده از localStorage ذخیره کنید. کلیدها و مقادیر منحصر به فرد باید در قالب رشته DOM UTF-16 باشد.

اگر می خواهید اشیا (objects) یا آرایه ها (arrays) را ذخیره کنید، باید آنها را با استفاده از متد JSON.stringify به رشته تبدیل کنید. شما می توانید تا 5 مگابایت داده را در محلی ذخیره کنید. همچنین، همه پنجره‌های با منشأ یکسان می‌توانند داده‌های محلی ذخیره‌سازی آن سایت را به اشتراک بگذارند.

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

localStorage در مقابل sessionStorage

اشیاء localStorage و sessionStorage بخشی از Web Storage API هستند که جفت های کلید-مقدار را به صورت محلی ذخیره می کند. همه مرورگرهای مدرن از هر دو پشتیبانی می کنند. با localStorage، داده ها حتی پس از بستن مرورگر توسط کاربر منقضی نمی شوند. این با sessionStorage که پس از پایان جلسه صفحه داده ها را پاک می کند متفاوت است. یک جلسه صفحه با بستن یک تب یا پنجره به پایان می رسد.

توجه : کد مورد استفاده در این پروژه در یک مخزن GitHub موجود است و برای استفاده شما تحت مجوز MIT رایگان است. اگر می خواهید نگاهی به نسخه زنده پروژه شمارنده امتیاز داشته باشید، می توانید نسخه ی نمایشی زنده را بررسی کنید.

LocalStorage چگونه کار می کند؟

می توانید از طریق ویژگی Window.localStorage به عملکرد localStorage دسترسی داشته باشید. این ویژگی چندین متد مانند setItem()، getItem() و removeItem() ارائه می کند. می‌توانید از اینها برای ذخیره، خواندن و حذف جفت‌های کلید/مقدار استفاده کنید.

نحوه ذخیره داده ها در localStorage

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

window.localStorage.setItem('Python', 'Guido van Rossum');

در اینجا پایتون کلید و Guido van Rossum مقدار است. اگر می خواهید یک آرایه یا یک شی را ذخیره کنید، باید آن را به یک رشته تبدیل کنید. شما می توانید یک آرایه یا یک شی را با استفاده از متد ()JSON.stringify به رشته تبدیل کنید.

window.localStorage.setItem(‘Python’, ‘Guido van Rossum’);

const student = {
name: “Yuvraj”,
marks: 85,
subject: “Machine Learning”
}

const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem(‘result’, JSON.stringify(student));
window.localStorage.setItem(‘marks’, JSON.stringify(scores));

نحوه خواندن داده ها از localStorage

با استفاده از متد getItem() می توانید داده ها را از localStorage بخوانید. این متد کلید را به عنوان پارامتر می پذیرد و مقدار را به صورت رشته برمی گرداند.

let data1 = window.localStorage.getItem(‘Python’);
let data2 = window.localStorage.getItem(‘result’);

console.log(data1);
console.log(data2);

این خروجی زیر را تولید می کند:

Guido van Rossum
{“name“:“Yuvraj“,“marks“:85,“subject“:“Machine Learning“}

اگر می خواهید نتیجه را از یک رشته به یک شی تبدیل کنید، باید از متد JSON.parse() استفاده کنید.

let data2 = JSON.parse(window.localStorage.getItem(‘result’));
console.log(data2);

نحوه حذف جلسات محلی ذخیره سازی

با استفاده از متد removeItem() می توانید جلسات localStorage را حذف کنید. برای حذف جفت کلید-مقدار باید کلید را به عنوان پارامتر به این متد ارسال کنید. اگر کلید وجود داشته باشد، متد جفت کلید-مقدار را حذف می کند و اگر کلید وجود نداشته باشد، متد هیچ کاری انجام نمی دهد.

window.localStorage.removeItem(‘Python‘);
window.localStorage.removeItem(‘C++‘);

چگونه همه موارد را در localStorage پاک کنیم

با استفاده از متد clear() می توانید تمام موارد موجود در حافظه محلی را پاک کنید. نیازی نیست هیچ پارامتری به این روش بدهید.

window.localStorage.clear();

نحوه یافتن طول محل ذخیره سازی

می توانید طول localStorage را با استفاده از ویژگی localStorage.length پیدا کنید.

let len = localStorage.length;
console.log(len);

چگونه کلید را در یک موقعیت مشخص به دست آوریم

با استفاده از متد ()key می توانید کلید را در یک موقعیت مشخص دریافت کنید. این روش شاخص را به عنوان یک پارامتر می پذیرد.

let d = localStorage.key(1);
console.log(d);

متد ()key اساساً برای حلقه زدن تمام آیتم‌ها در localStorage استفاده می‌شود.

نحوه حلقه زدن از طریق همه آیتم ها در localStorage

می‌توانید با استفاده از حلقه for روی همه موارد موجود در localStorage تکرار کنید.

for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}

متد key() ایندکس را به عنوان آرگومان می پذیرد و کلید مربوطه را برمی گرداند. متد getItem() کلید را به عنوان آرگومان می پذیرد و مقدار مربوطه را برمی گرداند. در نهایت، متد console.log() جفت کلید-مقدار را چاپ می کند.

پروژه ساده جاوا اسکریپت مبتنی بر ذخیره محلی (localStorage)

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

یک فایل index.html و script.js در یک پوشه جدید ایجاد کنید و فایل ها را در ویرایشگر کد مورد علاقه خود باز کنید. از کد HTML زیر برای ایجاد یک رابط برای برنامه شمارنده امتیاز استفاده کنید:

<!DOCTYPE html>
<html>
<body>
<h1>localStorage in JavaScript</h1>
<button onclick=“increaseCounter()“ type=“button“>Increase Score</button>
<button onclick=“decreaseCounter()“ type=“button“>Decrease Score</button>
<button onclick=“clearCounter()“ type=“button“>Clear localStorage</button>
<p>Score:</p>
<p id=“score“></p>
<p>Click on the “Increase Score“ button to increase the score count</p>
<p>Click on the “Decrease Score“ button to decrease the score count</p>
<p>Click on the “Clear localStorage“ button to clear the localStorage</p>
<p>
You can close the browser tab (or window), and try again.
You’ll see that the data still persists and is not lost even after closing
the browser.
</p>
<script src=“script.js“> </script>
</body>
</html>

این صفحه شامل سه دکمه افزایش امتیاز، کاهش امتیاز و پاک کردن حافظه محلی (localStorage) است. این دکمه‌ها به ترتیب توابع ()() () () و ()deduceCounter و clearCounter را فراخوانی می‌کنند. از کد زیر برای افزودن قابلیت به برنامه شمارنده امتیاز با استفاده از جاوا اسکریپت استفاده کنید.

function increaseCounter() {
var count = Number(window.localStorage.getItem(“count”));
count += 1;
window.localStorage.setItem(“count“, count);
document.getElementById(“score“).innerHTML = count;
}

تابع ()secureCounter تعداد را با استفاده از متد getItem() بازیابی می کند. نتیجه را به Number تبدیل می کند، زیرا getItem() یک رشته را برمی گرداند و آن را در متغیر count ذخیره می کند.

اولین باری که روی دکمه افزایش امتیاز کلیک می کنید قبل از هر تماسی با setItem() خواهد بود. مرورگر شما کلید شمارش را در localStorage پیدا نمی کند، بنابراین یک مقدار تهی برمی گرداند. از آنجایی که تابع Number() 0 را برای یک ورودی تهی برمی گرداند، نیازی به رسیدگی به پرونده خاصی ندارد. کد می تواند با خیال راحت مقدار شمارش را قبل از ذخیره آن و به روز رسانی سند برای نمایش مقدار جدید افزایش دهد.

function decreaseCounter() {
var count = Number(window.localStorage.getItem(“count”));
count -= 1;
window.localStorage.setItem(“count“, count);
document.getElementById(“score“).innerHTML = count;
}

تابع ()deduceCounter داده ها را بازیابی و بررسی می کند، درست مانند افزایشCounter(). متغیر count را 1 کاهش می دهد که به طور پیش فرض 0 است.

function clearCounter() {
window.localStorage.clear();
document.getElementById(“score“).innerHTML = ““;
}

در آخر، تابع clearCounter() تمام داده ها را از localStorage با استفاده از متد clear() حذف می کند.

با localStorage کارهای بیشتری انجام دهید

شی localStorage چندین متد از جمله setItem()، getItem()، removeItem() و clear() دارد. در حالی که استفاده از localStorage آسان است، ذخیره اطلاعات حساس امن نیست. اما برای توسعه پروژه هایی که نیاز به فضای ذخیره سازی زیادی ندارند و شامل هیچ اطلاعات حساسی نمی شوند، انتخاب خوبی است.

آیا می خواهید یک پروژه جاوا اسکریپت مبتنی بر localStorage دیگر بسازید؟ در اینجا یک برنامه لیست کارهای اساسی وجود دارد که می توانید با استفاده از HTML، CSS و جاوا اسکریپت توسعه دهید.