Xóa phiên trên trình duyệt đóng javascript

Bây giờ, hãy thêm một quả bóng cong. Mỗi khi người dùng quay lại trang web, tôi muốn họ đăng nhập lại

Để làm điều đó, tôi thường viết cái này

window.onload = () => {

  // Clear localStorage
  if (localStorage.getItem('isAuth') === 'true') {
    localStorage.removeItem('isAuth');
    // Show them the sign in form
  }
};

Phương pháp trên hoạt động. Nhưng nó có thể gây ra một số vấn đề kỳ lạ

Chế độ xem được xác thực có thể nhấp nháy trong giây lát. Hoặc bây giờ bạn có thể có thêm mã soạn sẵn để kiểm tra khi trang web tải

Có một cách sạch hơn

sử dụng cửa sổ. onb Beforeunload

Có một sự kiện JavaScript tên là

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

Trong đoạn mã trên, tôi sẽ chuyển từ

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

Sự kiện này được hỗ trợ trong tất cả các trình duyệt chính. Ngay cả IE 4, nếu bạn muốn đi học cũ

Bạn cũng có thể sử dụng phương pháp

localStorage.getItem('isAuth') === 'true' // true

window.addEventListener("beforeunload", () => localStorage.removeItem('isAuth'));

Thật thú vị khi biết rằng có một trình xử lý sự kiện cho một tab hoặc cửa sổ đang đóng

Nhưng đối với trường hợp sử dụng ở trên, đây là giải pháp tốt hơn và đơn giản hơn;

Giải pháp tốt nhất. phiênStorage

localStorage.getItem('isAuth') === 'true' // true

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

// Save data to sessionStorage
sessionStorage.setItem('isAuth', 'true');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('isAuth');

// Remove saved data from sessionStorage
sessionStorage.removeItem('isAuth');

// Remove all saved data from sessionStorage
sessionStorage.clear();

Điểm khác biệt duy nhất là,

localStorage.getItem('isAuth') === 'true' // true

Vì vậy, bạn không cần thêm trình lắng nghe sự kiện

Tính năng này được hỗ trợ trong tất cả các trình duyệt chính và IE8+

Này, bạn đã làm được điều này. Nếu bạn thích bài viết này, có thể thích hoặc đăng lại chủ đề trên Twitter

Tôi thích tweet về JavaScript và đăng các đoạn mã hữu ích. Theo tôi ở đó nếu bạn cũng muốn một số

Thuộc tính chỉ đọc

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

• Bất cứ khi nào tài liệu được tải trong một tab cụ thể trong trình duyệt, một phiên trang duy nhất sẽ được tạo và gán cho tab cụ thể đó. Phiên trang đó chỉ hợp lệ cho tab cụ thể đó
• Một phiên trang kéo dài miễn là tab hoặc trình duyệt được mở và tồn tại qua các lần tải lại và khôi phục trang
• Việc mở một trang trong tab hoặc cửa sổ mới sẽ tạo ra một phiên mới với giá trị của ngữ cảnh duyệt cấp cao nhất, khác với cách hoạt động của cookie phiên
• Mở nhiều tab/cửa sổ với cùng một URL sẽ tạo ra 16 ________ cho mỗi tab/cửa sổ
• Sao chép tab sao chép

  
  window.onbeforeunload = () => {
    localStorage.removeItem('isAuth');
  }
  

  6 của tab vào tab mới
• Đóng tab/cửa sổ sẽ kết thúc phiên và xóa các đối tượng trong

  
  window.onbeforeunload = () => {
    localStorage.removeItem('isAuth');
  }
  

  6

Dữ liệu được lưu trữ trong

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

Các khóa và giá trị luôn ở định dạng chuỗi UTF-16, sử dụng hai byte cho mỗi ký tự. Đối với các đối tượng, các khóa số nguyên được tự động chuyển đổi thành chuỗi

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}

// Get the text field that we're going to track
let field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
  // Restore the contents of the text field
  field.value = sessionStorage.getItem("autosave");
}

// Listen for changes in the text field
field.addEventListener("change", () => {
  // And save the results into the session storage object
  sessionStorage.setItem("autosave", field.value);
});

window.onbeforeunload = () => {
  localStorage.removeItem('isAuth');
}