Dữ liệu javascript/HTML của ứng dụng khách trình duyệt không có cookie

Question

Tôi có một trang web mà tôi đã tạo sử dụng Python, HTML và javascript. Trang chủ chính có 19 trường biến có thể chỉnh sửa. Nếu tôi thay đổi bất kỳ giá trị trường nào và sau đó rời khỏi trang (nhấp vào một trong các tab liên kết khác của tôi), sau đó quay lại trang chủ của tôi, tất cả các biến của tôi sẽ được đặt lại về mặc định vì trang tải lại mã. Để rõ ràng, sử dụng nút "quay lại" sẽ giữ các biến, nhưng hầu hết thời gian, người dùng sẽ nhấp vào liên kết "nhà riêng".

Làm cách nào để trang web có thể nhớ các biến này, ít nhất là cho phiên? Đó là, khi tôi đóng trình duyệt và khởi chạy lại trang web, nó sẽ có các giá trị mặc định. Tôi không muốn sử dụng cookie hoặc AJAX. Tôi đọc một cái gì đó về tài sản window.name có thể lưu trữ các biến, nhưng tôi không hiểu làm thế nào để sử dụng nó, và nó có vẻ giống như một cookie ở chỗ nó chỉ có thể lưu trữ một biến.

Nếu tôi hiểu chính xác, nếu tôi sử dụng cookie, tôi sẽ phải có cookie được tạo cho mọi biến phải không? Điều đó có vẻ lộn xộn.

Có cách nào dễ dàng để thực hiện việc này không? Tôi có nên tạo một tệp văn bản tạm thời với Python để lưu trữ danh sách các biến không? Hoặc là có cái gì đó dễ dàng hơn?

Chỉnh sửa: mã đang sử dụng document.getElementById tất cả trong suốt để bắt đầu các trường biến và bật/tắt các phần tử.

Đây là giải pháp tôi đã đưa ra ... Nhiều công việc hơn so với JAndy được đăng. Hóa ra localStorage() yêu cầu bạn chuyển đổi các biến thành chuỗi, để lưu chúng, và sau đó làm ngược lại khi bạn lấy chúng. Tôi đã tạo hai hàm. Một để lưu và một để lấy các biến. Tôi đã tạo một đối tượng để lưu trữ các biến trong. Tôi cũng phải cập nhật các trường HTML cục bộ của mình mỗi khi tôi nhấp vào trường nhập. Tôi đã sử dụng onchange = "saveTheVars()" và gọi hàm save của tôi.

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

Sử dụng các đối tượng localStorage, được hỗ trợ rộng rãi trên các trình duyệt (IE8 +).

localStorage.setItem('someData', 42); 

sau (ngay cả khi trang web hoặc trình duyệt đã được đóng cửa)

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

Đọc tài liệu MDN cho một howto nhanh chóng và hạn chế.

Answer 2

Một số ý tưởng:

1. Bạn không cần phải tạo ra một cookie cho mỗi biến. Bạn có thể gói tất cả các biến của mình thành một biến duy nhất. Hãy thử sử dụng định dạng JSON cho điều đó.
2. Làm cho trang web của bạn sử dụng điều hướng neo thay vì điều hướng thực (phản hồi javascript để thay đổi neo hiện tại để hiển thị nội dung khác) và vì trang không bao giờ tải lại, tất cả trạng thái biến của bạn vẫn còn nguyên vẹn.