🧒🏼 👩🏻‍🚀 ✨ एक वस्तु के रूप में स्थानीय भंडारण के साथ काम करना

इस पोस्ट के साथ, मैं एक वस्तु के साथ, रिपॉजिटरी के साथ काम करने के लिए एक पर्याप्त तरीका सही करना चाहता हूं। पोस्ट से कोड " स्थानीय भंडारण के साथ काम करना, किसी वस्तु के साथ?" आराम से! "मैं अत्यधिक इसका उपयोग न करने की सलाह देता हूं, वहां सब कुछ खराब है (नीचे दिए गए रूपरेखाएं हैं)। इसका उद्देश्य उन सभी को समझाना है जिन्होंने लेख को पसंदीदा के लिंक के माध्यम से जोड़ा या इस कोड का उपयोग न करने के लिए एक प्लस चिह्न लगाया।

अब मैं एक टिप्पणी में स्केलर द्वारा प्रस्तावित सबसे सरल विचार प्रदर्शित करना चाहता हूं।

जब पृष्ठ लोड होता है (डोम ट्री तत्परता घटना से पहले भी), तो हम रिपॉजिटरी (इस मामले में, लोकलस्टोरेज और सेशनस्टोरेज) पर पहुंचते हैं, जेएसएन को प्राप्त करते हैं, इसे डिसेर्बलाइज करते हैं और इसे कुछ चर में डालते हैं।

localObject = JSON.parse( localStorage.getItem( '_myStorage' ) ); // "{'a':1, 'b':2}" → {a:1, b:2}

फिर, प्रत्येक एन मिलीसेकंड रिवर्स प्रक्रिया का उत्पादन करता है:

 localStorage.setItem( '_myStorage', JSON.stringify( localObject ) );

Onbeforeunload घटना के साथ, वही करें।

विचार का कार्यान्वयन सरल है (कार्य का कठिनाई स्तर कम है और एक शुरुआत तक भी सुलभ है)। लेकिन, हर किसी ने (अपने आप को) इससे पहले ऐसा नहीं सोचा था।

ऑब्जेक्टस्टोरेज कंस्ट्रक्टर कोड

 var ObjectStorage = function ObjectStorage( name, duration ) { var self, name = name || '_objectStorage', defaultDuration = 5000; //     ,       , //      , //   duration ( ) if ( ObjectStorage.instances[ name ] ) { self = ObjectStorage.instances[ name ]; self.duration = duration || self.duration; } else { self = this; self._name = name; self.duration = duration || defaultDuration; self._init(); ObjectStorage.instances[ name ] = self; } return self; }; ObjectStorage.instances = {}; ObjectStorage.prototype = { // type == local || session _save: function ( type ) { var stringified = JSON.stringify( this[ type ] ), storage = window[ type + 'Storage' ]; if ( storage.getItem( this._name ) !== stringified ) { storage.setItem( this._name, stringified ); } }, _get: function ( type ) { this[ type ] = JSON.parse( window[ type + 'Storage' ].getItem( this._name ) ) || {}; }, _init: function () { var self = this; self._get( 'local' ); self._get( 'session' ); ( function callee() { self.timeoutId = setTimeout( function () { self._save( 'local' ); callee(); }, self._duration ); })(); window.addEventListener( 'beforeunload', function () { self._save( 'local' ); self._save( 'session' ); }); }, //  ,     (clearTimeout( storage.timeoutId )) timeoutId: null, local: {}, session: {} };

का उपयोग करें:

 var storage = new ObjectStorage; storage.local = {a:4, b: {c:5}}; storage.session = {a:7, b: {c:8}}; b = storage.local.b; bc = {d:6};

पृष्ठ को पुनः लोड करें

 var storage = new ObjectStorage; console.log( storage ); /* { _name: ..., duration: ..., local: {a:4, b: {c: {d: 6}}}, session: {a:7, b: {c :8}} } */

वैकल्पिक रूप से, ऑब्जेक्टस्टोरेज निर्माता को कॉल करते समय, आप दो तर्क पास कर सकते हैं: नाम - रिपॉजिटरी और अवधि में कुंजी का नाम - लोकलस्टोरेज में डेटा स्टोरेज का अंतराल।

 new ObjectStorage( '_myStorage', 1000 );

आप नाम मानक छोड़ सकते हैं:

 new ObjectStorage( null, 1000 );

या आप आरंभीकरण के बाद की अवधि को बदल सकते हैं:

 var storage = new ObjectStorage; storage.duration = 2000;

(आप स्टोरेज भी बदल सकते हैं ।_नाम, लेकिन यह अनुशंसित नहीं है, मैंने एक छड़ी भी रखी है, जैसे कि निजी संपत्ति :))

इस लेख की शुरुआत में लिंक द्वारा समाधान की तुलना में पेशेवरों:

प्रदर्शन: कोई गेटर्स नहीं हैं, आपको हर बार कुंजी को कॉल करने के लिए रिपॉजिटरी को खींचने की आवश्यकता नहीं है।
सघनता।
आप एक नियमित वस्तु के रूप में काम कर सकते हैं:
```
 storage.local = {a:{}} storage.local.ab = 5; //  a = storage.local.a; ab = 5; //    
```
निर्मित सत्र-समाधान के लिए।

सामान्य सहमति:

यदि ब्राउज़र सही तरीके से बंद नहीं होता है (बीएसओडी, पावर आउटेज, आदि), तो आप खो सकते हैं (हे भगवान!) अंतिम एम सेकंड में काम करें (डिफ़ॉल्ट रूप से पांच)। कोई फर्क नहीं पड़ता कि मैंने एक परिदृश्य के साथ आने की कितनी कोशिश की, जहां यह क्षण महत्वपूर्ण है, मैं नहीं कर सका।

अच्छा।

एक वस्तु के रूप में स्थानीय भंडारण के साथ काम करना - निरंतर

More articles: