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'];
}
2. Sự kiện này được kích hoạt khi một cửa sổ hoặc tab trình duyệt sắp đóngTrong đoạn mã trên, tôi sẽ chuyển từ
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
3 sang
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
4
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
1
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
2 tương tự như
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
5
// 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
2 tự động xóa dữ liệu sau khi đóng cửa sổ hoặc tabVì 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'];
}
6 truy cập một đối tượng phiên
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
7 cho nguồn gốc hiện tại.
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
6 tương tự như
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
9; - 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
6 của tab vào tab mớiwindow.onbeforeunload = [] => { localStorage.removeItem['isAuth']; }
- Đóng tab/cửa sổ sẽ kết thúc phiên và xóa các đối tượng trong
6window.onbeforeunload = [] => { localStorage.removeItem['isAuth']; }
Dữ liệu được lưu trữ trong
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
6 dành riêng cho giao thức của trang. Cụ thể, dữ liệu được lưu trữ bởi tập lệnh trên trang web được truy cập bằng HTTP [e. g. , http. //thí dụ. com] được đặt trong một đối tượng
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
6 khác từ cùng một trang được truy cập bằng HTTPS [e. g. , https. //thí dụ. com]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
Một đối tượng
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
7 có thể được sử dụng để truy cập không gian lưu trữ phiên gốc hiện tại// 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];
}];
4Thuộc một trong các trường hợp sau
- Nguồn gốc không phải là. Điều này có thể xảy ra nếu nguồn gốc sử dụng lược đồ
5 hoặc// 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]; }];
6, chẳng hạn// 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]; }];
- Yêu cầu vi phạm một quyết định về chính sách. Ví dụ: người dùng đã định cấu hình trình duyệt để ngăn trang lưu trữ dữ liệu
Lưu ý rằng nếu người dùng chặn cookie, trình duyệt có thể sẽ hiểu đây là hướng dẫn để ngăn trang lưu trữ dữ liệu
window.onbeforeunload = [] => {
localStorage.removeItem['isAuth'];
}
1Ví dụ sau đây tự động lưu nội dung của trường văn bản và nếu trình duyệt được làm mới, hãy khôi phục nội dung trường văn bản để không bị mất văn bản