HTML5 Web Storage kya hai – HTML Tutorial in Hindi

Posted on by

इस HTML Tutorial in Hindi के लेख मे आप जानेगे की HTML5 Web Storage kya hai.

Contents hide
1 What is Web Storage in HTML
1.1 Advantages of Web Storage
1.2 Types of Web storage
2 localStorage Object in HTML
3 sessionStorage Object in HTML

What is Web Storage in HTML

HTML5 का web storage feature user के computer में cookies की तरह कुछ जानकारी को संग्रहीत करता है , लेकिन यह cookie की तुलना में ज्यादा fast और बेहतर है | लेकिन web storage cookies की तुलना में ज्यादा secure नहीं है |

Advantages of Web Storage

  • Web storage प्रति domain 5MB तक की storage space का उपयोग कर सकता है।
  • यह data को server side send नहीं करता है , इसलिए cookie की तुलना में ज्यादा fast है |
  • local Storage द्वारा store लिए गए data expired नहीं होते है , , जबकि cookies का data थोड़े time के बाद या session ख़तम होने के बाद exएक्सपीरेड हो जाता है |

Types of Web storage

Web storage दो प्रकार के होते हैं |

  • Local storage – इसमें आपकी website का data permanent store करने के लिए localStorage object का उपयोग किया जाता है | इसका मतलब यह है की store किया गया local data को जबतक आप remove नहीं करते तबतक यह data available रहेगा |
  • Session storage – session storage single browser window या tab के लिए अस्थायी आधार पर data store करने के लिए sessionStorage object का उपयोग करता है | session end होने पर यह data remove हो जाते है – उदहारण के लिए जब user web browser की window या tab को बंद कर देगा तब यह data भी remove हो जायेगे |

Note :- HTML5 web storage लगभग सभी web browser को support करता है |

localStorage Object in HTML

जैसे की पहले हमने बताया की localStorage बिना किसी expiration date के data store करता है | इसमें प्रत्येक data का piece key/value के जोडे मे store किया जाता है |

Key information के name की पहचान करती है ( जैसेकि ‘first_name’) , और value उस key से जुड़ा मान है (‘manoj’ ).

Example :-

<script>
// check If the localStorage object exists , will  
if(localStorage) {
    // Store data
    localStorage.setItem("first_name", "Manoj");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else {
    alert("Sorry, your browser do not support local storage.");
}
</script>

आइये ऊपर दिए गए javascript code को समझने की कोशिश करते है |

  • localStorage.setItem(key, value) – उस key से जुड़े vale को store करता है।
  • localStorage.getItem(key) – उस key से जुड़े value को पुनः प्राप्त करता है।

आप पहले से मौजूद किसी particular item को removeItem() method में key name को पास करके storage से remove भी सकते हैं | जैसेकि – localStorage.removeItem("first_name")

यदि आप complete storage को remove करना चाहते हैं तो clear() method का उपयोग कर सकते है | जैसेकि – localStorage.clear()

sessionStorage Object in HTML

sessionStorage object localStorage object की तरह ही काम करता है , लेकिन इसमें data खाली एक ही session के लिए store होता है | उदहारण के लिए data तब तक बना रहता है जब तक उपयोगकर्ता उस window या tab को बंद नहीं कर देता।

आइये इसे समझने के लिए निचे दिए गए code को देखे |

<script>
// Check if the sessionStorage object exists
if(sessionStorage) {
    // Store data
    sessionStorage.setItem("last_name", "Sharma");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
    alert("Sorry, your browser do not support session storage.");
}
</script>

यह भी पढ़े :-