HTML 本地存储

HTML 本地存储：优于 cookies。

什么是 HTML 本地存储？

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

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

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

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 ਲਈ ਕੋਡ
}
    // ਮਾਫ ਕਰੋ! 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;
}
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "آپ نے اس بٹن کو " +
localStorage.clickcount + " بار";

خود کا ایک تجربہ کریئن

sessionStorage آئیکیواینت

sessionStorage آئیکیواینت localStorage آئیکیواینت برابر ہوتی ہیں، فرق اس میں یہ ہوتا ہے کہ یہ صرف ایک سیشن کے لئے محفوظ ہوتا ہے۔ اگر یوزر بروزر کا کسی ویب پیج کو بند کردار، تو اس کی اطلاعات میں بھی محفوظ نہیں رہتی ہیں۔

درج ذیل مثال میں آپ کا اس سیشن میں بٹن کی کلک کی تعداد جاری رکھتی ہے:

مثال

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "اس سیشن میں، آپ نے اس بٹن کو " +
sessionStorage.clickcount + " بار";

خود کا ایک تجربہ کریئن