HTML مقامی ذخیرہ

HTML مقامی ذخیرہ: کوکی سے بہتر۔

HTML مقامی ذخیرہ کیا ہے؟

لائحہ ذخیرہ (Local Storage) کے ذریعے، ویب ایپلیکیشن کا استعمال کرتے ہوئے، بروزر میں اعداد و شمار کو مقامی طور پر ذخیرہ کرسکتا ہے۔

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

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

لائحے میں ذخیرہ کا ذریعہ (origin) (domain اور پروٹوکول) سے ہوتا ہے۔ تمام پیج، منشا سے، ایک ہی اعداد و شمار کو ذخیرہ اور دستیاب کرسکتا ہے۔

ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ

ਤੈਬਲ ਵਿੱਚ ਸ਼ਾਮਲ ਸ਼੍ਰੇਣੀ ਪਹਿਲੀ ਸਮਰੱਥ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰਦੀ ਹੈ ਜੋ ਸਥਾਨਕ ਸਟੋਰੇਜ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਹੈ。

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 + " ਵਾਰ";

ਖੁਦ ਮੁਸਕਰਾਓ