स्थानीय भंडारण के साथ काम करना, किसी वस्तु के साथ कैसे? आराम से!

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

localStorage = { a: { b: 1 }, c: { d: 2 } } localStorage.ab = 3; 

यह अच्छा होगा, है ना?

अपेक्षाकृत बहुत पहले, लगभग छह महीने पहले, मैंने सोचा: कैसे, यह लानत है, स्थानीयकरण के साथ काम करना संभव बनाने के लिए बिना किसी कार्य के, विशुद्ध रूप से एक वस्तु की तरह। चुनौती स्वीकार की!

जैसा कि कुख्यात गीशा कहती है: " यही है, मैंने इसे बनाया है ।"

आगे पढ़ना जरूरी नहीं है। एक और अधिक उचित समाधान यहाँ है: habrahabr.ru/post/144998


मुख्य उपवाक्य केवल वस्तु पर ही नहीं, बल्कि उप-विषयों पर भी सेटर को लटकाने के तरीके का आविष्कार था, और चाबियाँ पहले से ज्ञात नहीं हैं। इसे बहुत सरलता से हल किया जाता है: ऑब्जेक्ट पर गेट्टर लगाएं:

 Object.defineProperty( window, 'objectLocalStorage', { //  -  get: function() { return {}; } }); 

अब हम चाबियों में से कुछ को सौंप रहे हैं,

 window.objectLocalStorage.a = 1; 

गेटटर कहा जाता है।

तो, सब कुछ अपमानजनक रूप से सरल है।

 (function() { // ,    ,      //       json    var _objectLocalStorage = JSON.parse( localStorage.getItem( 'objectStorage' ) ) || {}, timer = null; //     objectLocalStorage  window       //   ,    localStorage,   ,   Object.defineProperty( window, 'objectLocalStorage', { get: function() { // timer   ,         //   ,    localStorage    , //     // setTimeout    >< ,    if( timer === null ) { timer = setTimeout( function(){ var stringified = JSON.stringify( _objectLocalStorage ); //   :      , //     ,    if( stringified !== localStorage.getItem( 'objectStorage' ) ) { //  localStorage.setItem( 'objectStorage', stringified ); } timer = null; }, 0); } return _objectLocalStorage; }, //  ,  objectLocalStorage    set: function( v ) { _objectLocalStorage = v; localStorage.setItem( 'objectStorage', JSON.stringify( _objectLocalStorage ) ); } } ); })(); 

(कृपया ध्यान दें कि स्थानीयस्टोरेज में परिणामों को बचाने के लिए टाइमर को केवल कॉल किया जाता है। अन्यथा, असाइनमेंट परिणाम अनुमानित है, जैसा कि एक नियमित ऑब्जेक्ट में है, चूंकि _objectLocalStorage तुरंत लौटता है। इस टिप्पणी से प्रेरित है।)

कैसे करें इस्तेमाल?

हम अपनी js फ़ाइल में उपरोक्त कोड पेस्ट करते हैं, और उपयोग करते हैं:

 objectLocalStorage = { a: 4, b: {c: 2} }; objectLocalStorage.bc = {d: 5} 

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

 console.log( objectLocalStorage ); // { a: 4, b: {c: {d: 5}} } 

यह कैसे काम करता है?

GetL objectLocalStorage के साथ, स्थानीय _objectLocalStorage ऑब्जेक्ट वापस कर दिया जाता है। इसलिए, जब हम ऑब्जेक्टब्लास्टस्टोरेज में सबोबिज कुंजी में से किसी एक को कुछ असाइन करते हैं, तो _objectLocalStorage को वापस कर दिया जाता है और असाइनमेंट इसमें चला जाता है। वह है

 objectLocalStorage.ab = 5; 

उसी प्रकार

 _objectLocalStorage.ab = 5; 

लेकिन, पहले मामले में, असाइनमेंट के बाद, ऑब्जेक्ट को लोकलस्टोरेज में सेव किया जाता है। यदि आप इस भाग को टाइमआउट में नहीं डालते हैं, तो भंडारण असाइनमेंट तक होगा। मैं मानता हूं, यह तरीका बग से भरा हुआ है, लेकिन मुझे बाद में बचाने के लिए कोई दूसरा तरीका नहीं मिला।

वह, वास्तव में, सब है। आदर्श रूप में, निश्चित रूप से, यह अच्छा होगा:

• IE <9 का समर्थन करें। जैसा कि आप जानते हैं, Object.defineProperty क्रॉस-ब्राउज़र नहीं है
  
• सभी बाल वस्तुओं पर एक गेटिंग हैंगर, जो अब है:
  

   objectLocalStorage.ab = 5; //  a = objectLocalStorage.a; ab = 5; //   

  
  
• सेशनस्टोरेज के लिए भी यही करें
  

लेकिन फिर, मैं सिर्फ खुशी साझा करना चाहता था :)

आपको किरण देता है।

युपीडी
मैं टिप्पणियों में स्केलर द्वारा व्यक्त वैकल्पिक, सरल और सरल समाधान पर अलग से प्रकाश डालना चाहूंगा।

ऐसा लगता है कि एलएस (समय-सीमा और ऑनबॉर्फ़न द्वारा) में क्रमबद्ध और एक नियमित ऑब्जेक्ट के लिए पढ़ना और लिखना मुझे आसान लगता है, और जब एप्लिकेशन शुरू होता है तो डीरिशियल हो जाता है।