JQuery के साथ क्लाइंट की ओर से "वर्चुअल स्टोरेज"

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

1. कुकी से उत्पाद आईडी की सूची प्राप्त करना;
2. डेटाबेस से अनुरोध जिसमें से उत्पाद का नाम, उसका मूल्य और अन्य आवश्यक डेटा वापस कर दिया गया था;
3. बाकी सामग्री की पीढ़ी के साथ कार्ट ब्लॉक बनाने के लिए टेम्प्लेट इंजन (स्मार्टी) का उपयोग करना।

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

आप क्लाइंट रिपॉजिटरी के साथ जावास्क्रिप्ट के लिए क्रॉस-ब्राउज़र समर्थन के लिए लंबे समय तक प्रतीक्षा कर सकते हैं। और इस कार्य के लिए कुकी का उपयोग करना अव्यावहारिक है, कम से कम क्योंकि कुकी में लाइन की लंबाई बहुत सीमित है। मैं jQuery के लिए एक प्लगइन के रूप में और सर्वर की ओर एक छोटे से अतिरिक्त समाधान का प्रस्ताव करता हूं।

जावास्क्रिप्ट

;(function($){ var self={ config: { //   ,        callback: function(){}, //    path: 'storage.php' }, current: { // ? first: true }, //   storage: {}, init: function(objects,config){ if(!self.current.first)return; self.current.first=false; //.  $.extend(self.config,config); //.  self.storage=objects; //.  self.get(); $(window).unload(self.set); $('iframe').unload(self.set); }, //  ext: function(objects){ for(var k in objects){ if(typeof(self.storage[k])=='undefined'){ self.storage[k]={}; }; // if(typeof(objects[k])=='object'){ $.extend(true,self.storage[k],objects[k]); } else { self.storage[k]=objects[k]; }; }; }, //    get: function(){ $.getJSON(self.config.path,function(data){ self.ext(data); self.config.callback(); }); }, //   set: function(){ $.ajax({ type: 'POST', url: self.config.path, data: { storage: JSON.stringify(self.storage) } }); } }; $.extend({ storage: self.init, storageUpdate: self.set }); })(jQuery); 

PHP: storage.php

 <? session_start(); if(isset($_POST['storage'])){ $_SESSION['storage']=$_POST['storage']; } elseif(isset($_SESSION['storage'])){ echo $_SESSION['storage']; } ?> 

इस प्रकार, हमारे पास क्लाइंट के सर्वर के अप्रत्यक्ष उपयोग के साथ किसी भी डेटा का वर्चुअल स्टोरेज है। इसे व्यवहार में कैसे लागू किया जा सकता है?

 var a={i:0}; $(function(){ $.storage({storageA:a},{ callback: function(){ a.i++; alert('    '+a.i+'- .'); } }); }); 

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

पीएस कई कह सकते हैं, वे कहते हैं, ऐसी जटिलता क्यों, यदि आप एप्लिकेशन के सर्वर भाग को अनुकूलित कर सकते हैं, सत्र में तुरंत डेटा स्टोर कर सकते हैं और पेज को जेनरेट करते समय क्लाइंट को तुरंत वही वस्तु दे सकते हैं (बहुत सारे विकल्प हैं)। मेरे पास एक जवाब है। आइए कल्पना करें कि हमने एक एप्लिकेशन को अनुकूलित करने का मार्ग लिया है जहां लगभग सभी गतिशील पृष्ठ स्थिर HTML दृश्य में एक अस्थायी सर्वर कैश में संग्रहीत किए जाते हैं। वैसे, अगर आपको इस तरह से अधिक महत्वपूर्ण डेटा संग्रहीत करने की आवश्यकता है, तो यह योजना कुकीज़ का उपयोग करके हैश संरक्षण के साथ "नमकीन" हो सकती है।