HTML لحظي ذخيره

HTML لحظي ذخيره: کوکی سے بہتر

HTML لحظي ذخيره کیا کچھ ہوتا ہے؟

لحظي ذخيره (Local Storage) کے ذریعے، ویب ایپلیکیشن کا استعمال کنندہ کے براؤزر میں اعداد و شمار کا لحظي ذخيره کیا جاسکتا ہے۔

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

کوکی سے متمايز، ذخيره کی محدودیت بہت زیادہ ہوتی ہے (کم از کم 5 میگا بائٹ)، اور معلومات سرور تک منتقل نہیں کی جاتی ہیں۔

لحظي ذخيره کي موسمي (origin) (domain و protocol) کي رابطه کا حصہ ہوتي ہے۔ تمام صفحات، از موسمي، اپنے اپنے اعداد و شمار کو ذخيره اور دسترس کرا سکتے ہیں۔

براؤزر سپورٹ

جداول میں دوسرے براؤزر میں محلی ذخیرہ کا پورا سپورٹ کا نشان دہی کی گئی ہے

API
Web Storage 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 {
    // معاف، Web Storage کا دعوا نہیں کیا جاسکتا ..
}

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 + " بار.";

به طور مستقیم امتحان کنید