Vì HTTP là không trạng thái, mỗi khi bạn tải trang, nó sẽ sử dụng các giá trị ban đầu của bất kỳ thứ gì bạn đặt trong JavaScript. Bạn không thể đặt một biến toàn cục trong JS và chỉ cần đặt giá trị đó sau khi tải lại trang.
Có một số cách bạn có thể lưu trữ giá trị ở một nơi khác để bạn có thể khởi tạo nó khi tải bằng JavaScript
Chuỗi truy vấn
Khi gửi biểu mẫu bằng GETphương thức này, url sẽ được cập nhật bằng một chuỗi truy vấn ( ?parameter=value&something=42). Bạn có thể sử dụng điều này bằng cách đặt trường đầu vào trong biểu mẫu thành một giá trị nhất định. Đây sẽ là ví dụ đơn giản nhất:
<form method="GET">
<input type="hidden" name="clicked" value="true" />
<input type="submit" />
</form>
Khi tải trang đầu tiên, không có chuỗi truy vấn nào được đặt. Khi bạn gửi biểu mẫu này, namevà valuekết hợp của đầu vào được chuyển vào chuỗi truy vấn dưới dạng clicked=true. Vì vậy, khi trang tải lại với chuỗi truy vấn đó, bạn có thể kiểm tra xem nút đã được nhấp chưa.
Để đọc dữ liệu này, bạn có thể sử dụng tập lệnh sau khi tải trang:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var clicked = getParameterByName('clicked');
( Nguồn )
Khả năng sử dụng điều này phụ thuộc vào cách biểu mẫu của bạn hiện đang hoạt động, nếu bạn đã sử dụng POST thì điều này có thể có vấn đề.
Ngoài ra, đối với các tập dữ liệu lớn hơn, điều này không tối ưu. Chuyển xung quanh một chuỗi không phải là một vấn đề lớn nhưng đối với các mảng và đối tượng dữ liệu, bạn có thể nên sử dụng Web Storage hoặc cookie. Mặc dù các chi tiết khác nhau một chút giữa các trình duyệt, giới hạn thực tế đối với độ dài URI là khoảng 2000 ký tự
Lưu trữ web
Với sự ra đời của HTML5, chúng tôi cũng có Web Storage, cho phép bạn lưu thông tin trong trình duyệt khi tải trang. Có localStoragethể lưu dữ liệu trong một thời gian dài hơn (miễn là người dùng không xóa nó theo cách thủ công) và sessionStoragechỉ lưu dữ liệu trong phiên duyệt hiện tại của bạn. Cái sau rất hữu ích cho bạn ở đây, vì bạn không muốn đặt "đã nhấp" thành true khi người dùng quay lại sau.
Ở đây tôi đặt bộ nhớ cho sự kiện nhấp vào nút, nhưng bạn cũng có thể liên kết nó với biểu mẫu gửi hoặc bất kỳ thứ gì khác.
$('input[type="submit"][value="Search"]').click(function() {
sessionStorage.setItem('clicked', 'true');
});
Sau đó, khi bạn tải trang, bạn có thể kiểm tra xem nó đã được đặt chưa bằng cách sử dụng:
var clicked = sessionStorage.getItem('clicked');
Mặc dù giá trị này chỉ được lưu trong phiên duyệt web này, nhưng có thể bạn muốn đặt lại nó sớm hơn. Để làm như vậy, hãy sử dụng:
sessionStorage.removeItem('clicked');
Nếu bạn muốn lưu một đối tượng hoặc mảng JS, bạn nên chuyển đổi nó thành một chuỗi. Theo thông số kỹ thuật, có thể lưu các kiểu dữ liệu khác, nhưng điều này chưa được triển khai chính xác trên các trình duyệt.
//set
localStorage.setItem('myObject', JSON.stringify(myObject));
//get
var myObject = JSON.parse(localStorage.getItem('myObject'));
Hỗ trợ trình duyệt khá tuyệt vời vì vậy bạn nên yên tâm sử dụng tính năng này trừ khi bạn cần hỗ trợ các trình duyệt thực sự cũ / khó hiểu. Lưu trữ web là tương lai.
Bánh quy
Một giải pháp thay thế cho Lưu trữ web là lưu dữ liệu trong cookie. Cookie chủ yếu được tạo ra để đọc dữ liệu phía máy chủ, nhưng cũng có thể được sử dụng cho dữ liệu hoàn toàn phía máy khách.
Bạn đã sử dụng jQuery, điều này làm cho việc đặt cookie khá dễ dàng. Một lần nữa, tôi sử dụng clicksự kiện ở đây nhưng có thể được sử dụng ở bất cứ đâu.
$('input[type="submit"][value="Search"]').click(function() {
$.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});
Sau đó, khi tải trang, bạn có thể đọc cookie như sau:
var clicked = $.cookie('clicked');
Vì cookie vẫn tồn tại qua các phiên trong trường hợp của bạn, bạn sẽ cần phải hủy đặt chúng ngay sau khi bạn làm bất cứ điều gì bạn cần làm với nó. Bạn sẽ không muốn người dùng quay lại một ngày sau đó và vẫn clickedđặt thành true.
if(clicked === "true") {
//doYourStuff();
$.cookie('clicked', null);
}
(có thể tìm thấy một cách không phải jQuery để đặt / đọc cookie tại đây )
Cá nhân tôi sẽ không sử dụng cookie cho một cái gì đó đơn giản như ghi nhớ trạng thái được nhấp, nhưng nếu chuỗi truy vấn không phải là một tùy chọn và bạn cần hỗ trợ các trình duyệt thực sự cũ không hỗ trợ sessionStorage thì điều này sẽ hoạt động. Bạn nên thực hiện điều đó bằng cách kiểm tra sessionStorage trước và chỉ khi điều đó không thành công, hãy sử dụng phương pháp cookie.
window.name
Mặc dù đối với tôi đây có vẻ giống như một vụ hack có thể bắt nguồn từ trước localStorage / sessionStorage, nhưng bạn có thể lưu trữ thông tin trong thuộc window.nametính:
window.name = "my value"
Nó chỉ có thể lưu trữ các chuỗi, vì vậy nếu bạn muốn lưu một đối tượng, bạn sẽ phải xâu chuỗi nó giống như localStorageví dụ trên :
window.name = JSON.stringify({ clicked: true });
Sự khác biệt chính là thông tin này được giữ lại không chỉ trên các trang làm mới mà còn trên các miền khác nhau. Tuy nhiên, nó bị hạn chế đối với tab hiện tại bạn đang ở.
Điều này có nghĩa là bạn có thể lưu một số thông tin trên trang của mình và miễn là người dùng vẫn ở trong tab đó, bạn có thể truy cập thông tin tương tự ngay cả khi anh ta duyệt qua trang web khác và quay lại. Nói chung, tôi khuyên bạn không nên sử dụng điều này trừ khi bạn thực sự cần lưu trữ thông tin tên miền chéo trong một phiên duyệt web.