कुकीज के बिना ब्राउज़र क्लाइंट जावास्क्रिप्ट/एचटीएमएल डेटा पर बने रहें

Question

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

कम से कम सत्र के लिए, वेबसाइट इन चरों को कैसे याद रख सकती है? यही है, जब मैं ब्राउज़र बंद करता हूं और वेबपृष्ठ को फिर से लॉन्च करता हूं, तो इसमें डिफ़ॉल्ट मान होंगे। मैं कुकीज़ या AJAX का उपयोग नहीं करना चाहता। मैंने window.name संपत्ति को चर स्टोर करने में सक्षम होने के बारे में कुछ पढ़ा है, लेकिन मुझे समझ में नहीं आता कि इसका उपयोग कैसे किया जाए, और ऐसा लगता है कि यह केवल एक चर को स्टोर कर सकता है।

यदि मैं कुकीज़ का उपयोग करता हूं, तो मैं इसे सही ढंग से समझता हूं, तो मुझे प्रत्येक चर के दायीं ओर एक कुकी बनाना होगा? वह गन्दा लगता है।

क्या ऐसा करने का कोई आसान तरीका है? क्या मुझे चर की सूची को स्टोर करने के लिए पायथन के साथ एक अस्थायी पाठ फ़ाइल बनाना चाहिए? या क्या कुछ आसान है?

संपादित करें: कोड दस्तावेज़ में उपयोग कर रहा है .getElementById सभी init चर फ़ील्ड में और तत्वों को सक्षम/अक्षम करें।

यहां समाधान है जिसके साथ मैं आया ... JAndy की तुलना में अधिक काम पोस्ट किया गया। स्थानीय स्टोरेज() को बाहर करने के लिए आपको तारों को तारों में बदलने के लिए, उन्हें संग्रहीत करने की आवश्यकता होती है, और फिर जब आप उन्हें पुनर्प्राप्त करते हैं तो विपरीत करते हैं। मैंने दो कार्यों का निर्माण किया। सहेजने के लिए एक और चर को पुनः प्राप्त करने के लिए एक। मैंने चर को स्टोर करने के लिए ऑब्जेक्ट बनाया है। प्रत्येक बार जब मैं इनपुट फ़ील्ड से क्लिक करता हूं तो मुझे अपने स्थानीय HTML फ़ील्ड भी अपडेट करना पड़ता था। मैंने onchange = "saveTheVars()" का उपयोग किया और मेरा सेव फ़ंक्शन कहा।

varObjects = {Step:'step', Dwell:'dwell', Min:'min_att', Max:'max_att', Hold:'hold', Roam:'roam', Dur:'duration', Clients:'n_client', TX:'tx' }; 

result = new Object(); // variable object to hold the retrieved data 

function saveTheVars() { 
      //fill up the object with the variables 
      varObjects.Step = document.getElementById('step').value; 
      varObjects.Dwell = document.getElementById('dwell').value; 
      varObjects.Min = document.getElementById('min_att').value; 
      varObjects.Max = document.getElementById('max_att').value; 
      varObjects.Hold = document.getElementById('hold').value; 
      varObjects.Dur = document.getElementById('duration').value; 
      varObjects.Roam = document.getElementById('roamID').value; 
      varObjects.Clients = document.getElementById('n_client').value; 
      varObjects.TX = document.getElementById('tx').value; 

      try{ 

       localStorage.setItem("theVars", JSON.stringify(varObjects)); // if localstorage id defined then save variables to it. 

      } catch(e) { 

       return false; 
       } 

}

function retrieveTheVars() { 

      try { 
        result = JSON.parse(localStorage.getItem("theVars")); 

       if(result == null) // no object exist in memory so set defaults 
       { 
        alert("Test variables not saved: Loading defaults"); 
        document.getElementById('duration').value= '300'; 
        document.getElementById('n_client').value= '0'; 
        document.getElementById('manual').value= ""; 
        document.getElementById('step').value= '1'; 
        document.getElementById('dwell').value= '0.45'; 
        document.getElementById('min_att').value= '0'; 
        document.getElementById('max_att').value= '30'; 
        document.getElementById('hold').value= '3'; 
        document.getElementById('roamID').value= '10'; 
        document.getElementById('tx').value= '15'; 

        saveTheVars(); //save the newly created variables 
       } 
       else 
       { 

        //update the page variables with the retrieved data 

        document.getElementById('dwell').value= result.Dwell; 
        document.getElementById('step').value= result.Step; 
        document.getElementById('min_att').value= result.Min; 
        document.getElementById('max_att').value= result.Max; 
        document.getElementById('hold').value= result.Hold; 
        document.getElementById('roamID').value= result.Roam; 
        document.getElementById('duration').value= result.Dur; 
        document.getElementById('n_client').value= result.Clients; 
        document.getElementById('tx').value= result.TX; 
       } 

      } catch(e) { 

       return false; 
      } 
     } 

Answer 1

localStorage वस्तु है, जो व्यापक रूप से ब्राउज़रों (IE8 +) भर में समर्थित है का उपयोग करें।

localStorage.setItem('someData', 42); 

बाद में (यहां तक ​​कि जब वेबसाइट या ब्राउज़र बंद हुआ था)

localStorage.getItem('someData') // === 42 

एक त्वरित कैसे करें और प्रतिबंध के लिए MDN दस्तावेज़ीकरण पढ़ें।

Answer 2

कुछ विचार:

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