HTML لوکل اسٹوریج

HTML لوکل اسٹوریج: کوکی سے بہتر۔

HTML لوکل اسٹوریج کیا ہے؟

لوکل اسٹوریج (Local Storage) کے ذریعے، ویب ایپلیکیشن کا بروزر میں ڈاٹا کا لوکل اسٹوریج کئے جاسکتا ہے۔

HTML5 سے پہلے، ایپلیکیشن ڈاٹا کو صرف کوکی میں اسٹوریج کئے جاسکتا تھا، جس میں ہر سرور درخواست شامل تھی۔ لوکل اسٹوریج زیادہ محفوظ تھا اور بغیر ویب سائٹ کی کارکردگی پر اثر انداز نہ کرتے ہوئے بہت سے ڈاٹا کو لوکل میں اسٹوریج کئے جاسکتا تھا۔

کوکی سے متضاد، اسٹوریج محدود کی حد بہت بڑی ہوتی ہے (کم از کم 5MB)، اور معلومات سرور پر منتقل نہیں کی جاتی ہیں۔

لوکل اسٹوریج کا آغاز (origin) (علاقہ اور پروٹوکول) سے ہوتا ہے۔ تمام پیج، آغاز سے، ایک ساتھی کے دوسرے کو ڈاٹا سٹوریج اور اصول سے استفادہ کرسکتے ہیں۔

براؤزر کی مدد

جداول میں مختصر شمارش کو دکھایا گیا ہے جو پورا لگاہی ذخیرہ کو پورا براؤزر کا پہلا استعمال ممکن بنایا اور کیا نہیں ممکن بنایا

API
وبل اسٹوریج 4.0 8.0 3.5 4.0 11.5

HTML لگاہی ذخیرہ آئیڈیوائز

HTML لگاہی ذخیرہ نے دو آئیڈیوائز فراہم کئے ہیں جو کسی بھی جگہ پر داٹا کو ذخیرہ کرنے کیلئے استعمال کئے جا سکتے ہیں:

  • window.localStorage - کوئی تاریخ ختم نہ رکھنے والی داٹا کو ذخیرہ کرنا
  • window.sessionStorage - ایک سیشن کیلئے داٹا کو ذخیرہ کرنا (براؤزر کی ٹیبل سائیڈ بند کردیئے تو داٹا میل نہیں جاتا)

لگاہی استعمال میں، localStorage اور sessionStorage کا براؤزر کا استعمال ممکن ہونے پر پتہ لگائیجئے:

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage کے لئے کد
} else {
    // معافی! وبل اسٹوریج کا استعمال نہیں کیا جاسکتا..
}

localStorage آئیڈیوائز

localStorage آئیڈیوائز میں کوئی تاریخ ختم نہیں رکھی جاتی ہیں، جب براؤزر بند کردیئے تو داٹا نہیں میل جاتا، پچھلے دن، ہفتے یا سال میں بھی استعمال کیا جا سکتا ہے.

مثال

// ذخیرہ کرنا
localStorage.setItem("lastname", "Gates");
// واپس لینا
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

به طور شخصی امتحان کنید

مثال کا وضاحت:

  • localStorage میں نام/مقدار جوجھ بنانا، جس میں: name="lastname"، value="Gates"
  • "lastname" کا مقادار واپس لینا، اور اس کو id="result" کی جگہ میں بندوبست کیا جاتا ہے

مثال میں اس طرح بھی لکھا جا سکتا ہے:

// ذخیرہ کرنا
localStorage.lastname = "Gates";
// واپس لینا
document.getElementById("result").innerHTML = localStorage.lastname;

حذف "lastname" localStorage پروجیکٹ کی نمائش بجائے:

localStorage.removeItem("lastname");

نوٹ: نام/مقدار کی جوجھ کو کچھ جگہ میں کچھ جگہ میں کوئی بھی شکل میں محفوظ رکھا جاتا ہے، اگر ضرورت ہو تو ان کو دوسری شکل میں تبدیل دینا یاد رکھیجئے!

مثال کا استعمال بنا پر مشق کیا جاتا ہے کہ آپ نے کتنا بلک کیا ہے نکلنے پر بٹن پر کلک کیا ہے، کد میں کچھ درج کی جاتی ہیں، سلسلے میں جوائز کو عدد کی شکل میں تبدیل کیا جاتا ہے اور پچھلے سے آگے بڑھا جاتا ہے:

مثال

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "شما این دکمه را " +
localStorage.clickcount + " بار.";

به طور شخصی امتحان کنید

موضوع sessionStorage

موضوع sessionStorage به localStorage مشابه است، اما تفاوت در این است که فقط داده‌ها را برای یک session ذخیره می‌کند. اگر کاربر صفحه‌ی خاصی از مرورگر را ببندد، داده‌ها نیز حذف می‌شوند.

در اینجا مثالی از شمارش کلیک‌های کاربر در session فعلی آورده شده است:

مثال

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "در این session، شما این دکمه را " +
sessionStorage.clickcount + " بار.";

به طور شخصی امتحان کنید