लोकलस्टोरेज का सुरक्षित रूप से उपयोग कैसे करें

पिछले हफ्ते, जब मैंने कोडिंग पर ध्यान केंद्रित किया तो मुझे उत्पादन त्रुटि चेतावनी संदेश से बाधित किया गया। मुझे काम बंद करना पड़ा और यह पता लगाना पड़ा कि क्या हुआ है।

त्रुटि है

हम यह नहीं जान सकते कि उत्पादन के लिए कोड स्थान से कौन सा कोड अच्छी तरह से काम नहीं कर रहा है जावास्क्रिप्ट फाइलें सभी संकलित और बदसूरत हैं।

समस्या की खोज करते समय, हम यह पता लगा सकते हैं कि ब्राउज़र लोकलस्टोरेज का समर्थन नहीं करता है। स्थानीय स्टोरेज का उपयोग करते समय त्रुटि को पकड़ने का सबसे आसान समाधान है:

try {
  const data = localStroage.getItem(key)
} catch(e) {
  // if localStorage not support, fallback
}

पूरा करने के लिए उपयोग फ़ाइल प्रदान करने का बेहतर तरीका होगा:

export const storage = {
  getItem(key, fallbackValue) {
    try {
      return localStorage.getItem(key);
    } catch(e) {
      return fallbackValue;
    }
  },
  setItem(key, value) {
    try {
      localStorage.setItem(key, value);
    } catch(e) {
      // 
    }
  }
  removeItem(key, value) {
    try {
      localStorage.removeItem(key, value);
    } catch(e) {
      // 
    }
  }
}

यदि लोकलस्टोरेज समर्थित नहीं है, तो हम मेमोरी का उपयोग करने के लिए वापस आ सकते हैं। अंतिम तरीका इस प्रकार होगा:

function isSupportLS() {
  try {
    localStorage.setItem('_ranger-test-key', 'hi')
    localStorage.getItem('_ranger-test-key')
    localStorage.removeItem('_ranger-test-key')
    return true
  } catch (e) {
    return false
  }
}

class Memory {
  constructor() {
    this.cache = {}
  }
  setItem(cacheKey, data) {
    this.cache[cacheKey] = data
  }
  getItem(cacheKey) {
    return this.cache[cacheKey]
  }
  removeItem(cacheKey) {
    this.cache[cacheKey] = undefined
  }
}
// if not support localStorage, fallback to memory
export const storage = isSupportLS() ? window.localStorage : new Memory();

और फिर क्रोम कंसोल में इस कोड का परीक्षण करें, यह अच्छी तरह से काम करता है:

आशा है कि यह लेख आपकी मदद कर सकता है, और अधिक कौशल सीखने के लिए मुझे फॉलो करने के लिए तत्पर हैं।

PlainEnglish.io पर अधिक सामग्री । हमारे मुफ़्त साप्ताहिक न्यूज़लेटर के लिए साइन अप करें । ट्विटर , लिंक्डइन , यूट्यूब और डिस्कॉर्ड पर हमें फॉलो करें । ग्रोथ हैकिंग में रुचि रखते हैं? सर्किट देखें ।