Reset select option khi click back history

Question

Mình gặp vấn đề như vậy, không biết có anh em nào từng gặp phải case này thì support mình với?

Accepted Answer

Vấn đề em đang gặp phải là do trình duyệt lưu trạng thái của trang web như dữ liệu của các thẻ input, vị trí cuộn, trạng thái của các phần tử DOM... Các dữ liệu này được restore khi nhấn nút Back.

Anh nghĩ em hãy thử mấy cách sau:

Trang nào ko muốn cache thì server thêm header yêu cầu ko no-cache chặng hạn
Dùng JavaScript bắt sự kiện tải trang rồi thực hiện reset về default value
Không render ssr cái field input đó, mà thử render dưới client side xem?

Nhưng mà anh nghĩ là có thể nó lưu các trạng thái này vào memory hoặc đâu đó, nên cách 1 và 3 có thể không có tác dụng. Cách 2 thì bắt sự kiện pageshow như sau:

<form method="GET" url="/">
  <input name="submitted" value="default" />
  <button type="submit">Submit</button>
</form>

<script>
  window.addEventListener('pageshow', () => {
    const input = document.querySelector('input');
    const url = new URL(location);

    if (input && !url.searchParams.get('submitted')) {
      input.value = 'default';
    }
  });
</script>

1 CÂU TRẢ LỜI