Utrzymuj klienta javascript/HTML danych przeglądarki bez plików cookie

Question

Mam utworzoną przeze mnie stronę internetową, która korzysta z Pythona, HTML i javascript. Główna strona główna zawiera 19 edytowalnych pól zmiennych. Jeśli zmienię dowolne z tych wartości pól, a następnie opuść stronę (kliknij jedną z moich innych zakładek linków), a następnie powrócę na moją stronę główną, wszystkie moje zmienne zostaną zresetowane z powrotem do wartości domyślnych, ponieważ strona ponownie wczytuje kod. Aby było jasne, użycie przycisku "wstecz" zachowałoby zmienne, ale przez większość czasu użytkownik kliknie link "domowy".

Jak mogę zapamiętać te zmienne na stronie, przynajmniej na czas sesji? Oznacza to, że po zamknięciu przeglądarki i ponownym uruchomieniu strony internetowej będą miały domyślne wartości. Nie chcę używać plików cookie ani AJAX. Czytałem coś o właściwości window.name, która jest w stanie przechowywać zmienne, ale nie rozumiem, jak z tego korzystać, i wygląda na to, że jest to plik cookie, ponieważ może przechowywać tylko jedną zmienną.

Jeśli rozumiem to poprawnie, jeśli używam plików cookie, musiałbym utworzyć plik cookie dla każdej zmiennej, prawda? To wydaje się nieporządne.

Czy jest jakiś łatwy sposób to zrobić? Czy powinienem utworzyć plik tekstowy tymczasowy w Pythonie, aby przechowywać listę zmiennych? Czy jest coś łatwiejszego?

Edytuj: kod używa document.getElementById w całym polu zmiennych init i włącz/wyłącz elementy.

Oto rozwiązanie, które wymyśliłem ... Więcej pracy niż JAndy opublikował. Okazuje się, że localStorage() wymaga przekonwertowania zmiennych na łańcuchy, przechowywania ich, a następnie odwrotu po ich odzyskaniu. Stworzyłem dwie funkcje. Jeden do zapisania, a drugi do pobrania zmiennych. Stworzyłem obiekt do przechowywania zmiennych. Musiałem również zaktualizować moje lokalne pola HTML za każdym razem, gdy kliknąłem z pola wejściowego. Użyłem onchange = "saveTheVars()" i wywołałem moją funkcję zapisu.

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

pomocą przedmiotu localStorage, który jest powszechnie obsługiwany na przeglądarki (IE8 +).

localStorage.setItem('someData', 42); 

później (nawet wtedy, gdy strona internetowa lub przeglądarka została zamknięta)

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

Przeczytaj dokumentację MDN na szybki howto i ograniczeń.

Answer 2

Kilka pomysłów:

1. Nie trzeba tworzyć cookie dla każdej zmiennej. Możesz spakować wszystkie swoje zmienne w jedną zmienną. Spróbuj użyć do tego formatu JSON.
2. Uczyń swoją stronę za pomocą nawigacji zakotwiczonej zamiast prawdziwej nawigacji (odpowiadając javascript na zmiany w obecnej kotwicy, aby wyświetlić różne treści), a ponieważ strona nigdy się nie przeładowuje, cały twój stan zmiennych pozostaje nienaruszony.