JavaScript
वेब भंडारण

वाक्य - विन्यास

• localStorage.setItem (नाम, मूल्य);

• localStorage.getItem (नाम);

• localStorage.name = मान;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (नाम);

पैरामीटर

टिप्पणियों

स्थानीय स्तर का उपयोग करना

लोकलस्टोरेज ऑब्जेक्ट स्ट्रिंग्स की कुंजी-वैल्यू स्टोरेज को लगातार (लेकिन स्थायी नहीं - नीचे की सीमा देखें) प्रदान करता है। किसी भी परिवर्तन को तुरंत एक ही मूल से अन्य सभी खिड़कियों / फ़्रेमों में दिखाई देता है। जब तक उपयोगकर्ता डेटा को सहेजता या समाप्ति सीमा को कॉन्फ़िगर नहीं करता है, तब तक संग्रहीत मान अनिश्चित काल तक स्थिर रहता है। मानों को प्राप्त करने और स्थापित करने के लिए लोकलस्टोरेज एक मानचित्र जैसा इंटरफ़ेस का उपयोग करता है।

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

यदि आप सरल संरचित डेटा संग्रहीत करना चाहते हैं, तो आप भंडारण के लिए स्ट्रिंग से इसे और धारावाहिक करने के लिए JSON का उपयोग कर सकते हैं ।

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

ब्राउज़रों में लोकलस्टोरेज की सीमाएँ

मोबाइल ब्राउज़र:

डेस्कटॉप ब्राउज़र:

भंडारण की घटनाओं

जब भी लोकलस्टोरेज में सेट का मान होता है, तो एक storage इवेंट को उसी मूल से अन्य सभी windows पर भेजा जाएगा। इसका उपयोग किसी सर्वर के साथ पुन: लोड या संचार किए बिना विभिन्न पृष्ठों के बीच स्थिति को सिंक्रनाइज़ करने के लिए किया जा सकता है। उदाहरण के लिए, हम एक इनपुट तत्व के मान को अन्य विंडो में पैराग्राफ टेक्स्ट के रूप में दर्शा सकते हैं:

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

टिप्पणियाँ

यदि स्क्रिप्ट के माध्यम से डोमेन को संशोधित किया गया था, तो घटना को क्रोम, एज और सफारी के तहत निकाल दिया या प्रसारित नहीं किया जा सकता है।

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

सेशनस्टोरेज ऑब्जेक्ट स्थानीय स्टोरेज के समान स्टोरेज इंटरफेस को लागू करता है। हालांकि, एक ही मूल से सभी पृष्ठों के साथ साझा किए जाने के बजाय, सेशनस्टोरेज डेटा को प्रत्येक विंडो / टैब के लिए अलग से संग्रहीत किया जाता है। जब तक यह खुला रहता है, तब तक संग्रहीत डेटा उस विंडो / टैब के पृष्ठों के बीच बना रहता है, लेकिन कहीं और दिखाई देता है।

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

सेशनस्टोरेज में डेटा सेव करें

sessionStorage.setItem('key', 'value');

सेशनस्ट्रेस से बचा हुआ डेटा प्राप्त करें

var data = sessionStorage.getItem('key');

सहेजे गए डेटा को सेशनस्टोरेज से हटा दें

sessionStorage.removeItem('key')

क्लीयर स्टोरेज

भंडारण को खाली करने के लिए, बस चलाएं

localStorage.clear();

त्रुटि की स्थिति

कुकीज़ को ब्लॉक करने के लिए कॉन्फ़िगर किए जाने वाले अधिकांश ब्राउज़र, localStorage को भी ब्लॉक कर देंगे। इसका उपयोग करने के प्रयासों का एक अपवाद होगा। इन मामलों को प्रबंधित करने के लिए मत भूलना।

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

यदि त्रुटि को नियंत्रित नहीं किया गया, तो प्रोग्राम ठीक से काम करना बंद कर देगा।

संग्रहण आइटम निकालें

ब्राउज़र स्टोरेज से एक विशेष आइटम को हटाने के लिए ( setItem के विपरीत) removeItem उपयोग removeItem

localStorage.removeItem("greet");

उदाहरण:

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

( sessionStorage लिए एक ही लागू होता है)

भंडारण से निपटने का सरल तरीका

localStorage , sessionStorage जावास्क्रिप्ट ऑब्जेक्ट हैं और आप उन्हें इस तरह से व्यवहार कर सकते हैं।
इसके बजाय .getItem() , .setItem() , इत्यादि जैसे स्टोरेज मेथड्स का उपयोग करने के बजाय ... यहाँ एक सरल विकल्प है:

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

उदाहरण:

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

लोकलस्टोरेज की लंबाई

localStorage.length गुण एक पूर्णांक संख्या देता है जो localStorage में तत्वों की संख्या को दर्शाता है

उदाहरण:

आइटम सेट करें

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

लंबाई प्राप्त करें

localStorage.length; // 3