एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

एचटीएमएल वेब स्टोरेज एपीआई


एचटीएमएल वेब भंडारण; कुकीज़ से बेहतर।


HTML वेब स्टोरेज क्या है?

वेब स्टोरेज के साथ, वेब एप्लिकेशन उपयोगकर्ता के ब्राउज़र में स्थानीय रूप से डेटा स्टोर कर सकते हैं।

HTML5 से पहले, एप्लिकेशन डेटा को प्रत्येक सर्वर अनुरोध में शामिल कुकीज़ में संग्रहीत किया जाना था। वेब संग्रहण अधिक सुरक्षित है, और वेबसाइट के प्रदर्शन को प्रभावित किए बिना बड़ी मात्रा में डेटा स्थानीय रूप से संग्रहीत किया जा सकता है।

कुकीज़ के विपरीत, भंडारण सीमा बहुत बड़ी है (कम से कम 5 एमबी) और जानकारी कभी भी सर्वर पर स्थानांतरित नहीं की जाती है।

वेब संग्रहण प्रति मूल (प्रति डोमेन और प्रोटोकॉल) है। सभी पेज, एक मूल से, एक ही डेटा को स्टोर और एक्सेस कर सकते हैं।


ब्राउज़र समर्थन

तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से वेब स्टोरेज का समर्थन करता है।

API
Web Storage 4.0 8.0 3.5 4.0 11.5

एचटीएमएल वेब स्टोरेज ऑब्जेक्ट्स

HTML वेब स्टोरेज क्लाइंट पर डेटा स्टोर करने के लिए दो ऑब्जेक्ट प्रदान करता है:

  • window.localStorage- बिना किसी समाप्ति तिथि के डेटा संग्रहीत करता है
  • window.sessionStorage- एक सत्र के लिए डेटा संग्रहीत करता है (ब्राउज़र टैब बंद होने पर डेटा खो जाता है)

वेब स्टोरेज का उपयोग करने से पहले, लोकलस्टोरेज और सेशनस्टोरेज के लिए ब्राउजर सपोर्ट की जांच करें:

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}


लोकलस्टोरेज ऑब्जेक्ट

लोकलस्टोरेज ऑब्जेक्ट बिना किसी एक्सपायरी डेट के डेटा को स्टोर करता है। ब्राउज़र बंद होने पर डेटा हटाया नहीं जाएगा, और अगले दिन, सप्ताह या वर्ष में उपलब्ध होगा।

उदाहरण

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

उदाहरण समझाया:

  • नाम = "अंतिम नाम" और मान = "स्मिथ" के साथ स्थानीय स्टोरेज नाम/मान जोड़ी बनाएं
  • "अंतिम नाम" का मान पुनर्प्राप्त करें और इसे आईडी = "परिणाम" के साथ तत्व में डालें

ऊपर दिया गया उदाहरण भी इस प्रकार लिखा जा सकता है:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

"अंतिम नाम" लोकलस्टोरेज आइटम को हटाने का सिंटैक्स इस प्रकार है:

localStorage.removeItem("lastname");

नोट: नाम/मूल्य जोड़े हमेशा स्ट्रिंग के रूप में संग्रहीत होते हैं। जरूरत पड़ने पर उन्हें दूसरे प्रारूप में बदलना याद रखें!

निम्न उदाहरण यह गिनता है कि उपयोगकर्ता ने कितनी बार किसी बटन पर क्लिक किया है। इस कोड में काउंटर को बढ़ाने में सक्षम होने के लिए मान स्ट्रिंग को एक संख्या में बदल दिया जाता है:

उदाहरण

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

सत्र भंडारण वस्तु

ऑब्जेक्ट लोकलस्टोरेज sessionStorageऑब्जेक्ट के बराबर है, सिवाय इसके कि यह केवल एक सत्र के लिए डेटा संग्रहीत करता है। जब उपयोगकर्ता विशिष्ट ब्राउज़र टैब बंद करता है तो डेटा हटा दिया जाता है।

निम्न उदाहरण वर्तमान सत्र में किसी उपयोगकर्ता द्वारा किसी बटन पर क्लिक किए जाने की संख्या की गणना करता है:

उदाहरण

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";