Javascript nhận tất cả các biến phiên
|
Bản tóm tắt. trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript 7 để lưu trữ dữ liệu chỉ cho một phiên Giới thiệu về JavaScript sessionStorageĐối tượng 7 chỉ lưu trữ dữ liệu cho một phiên. Điều đó có nghĩa là dữ liệu được lưu trữ trong 7 sẽ bị xóa khi đóng trình duyệt Phiên trang kéo dài miễn là trình duyệt web được mở và tồn tại qua quá trình làm mới trang Khi bạn mở một trang trong tab hoặc cửa sổ mới, trình duyệt web sẽ tạo một phiên mới Nếu bạn mở nhiều tab hoặc cửa sổ có cùng một URL, trình duyệt web sẽ tạo một 7 riêng cho từng tab hoặc cửa sổ. Vì vậy, dữ liệu được lưu trữ trong một tab trình duyệt web không thể truy cập được trong một tab khác Khi bạn đóng một tab hoặc cửa sổ, trình duyệt web sẽ kết thúc phiên và xóa dữ liệu trong 7 Dữ liệu được lưu trữ trong 7 dành riêng cho giao thức của trang. Ví dụ: cùng một trang web 3 có các 7 khác nhau khi truy cập bằng 5 và 6 Vì dữ liệu 7 được liên kết với phiên máy chủ nên nó chỉ khả dụng khi một trang được yêu cầu từ máy chủ. 7 không khả dụng khi trang chạy cục bộ mà không có máy chủ Vì 7 là một thể hiện của loại 30 nên bạn có thể quản lý dữ liệu bằng các phương thức của Bộ lưu trữ
Quản lý dữ liệu trong JavaScript sessionStorage1) Truy cập sessionStorageĐể truy cập vào 7, bạn sử dụng thuộc tính 7 của đối tượng 39 3 Vì 40 là đối tượng toàn cầu, bạn chỉ cần truy cập vào 7 như thế này
2) Lưu trữ dữ liệu trong sessionStorageSau đây lưu trữ một cặp tên-giá trị trong 7
Nếu 7 có một mục có tên là 44, phương thức 45 sẽ cập nhật giá trị cho mục hiện có thành 46. Nếu không, nó sẽ chèn một mục mới 3) Lấy dữ liệu từ sessionStorageĐể lấy giá trị của một mục theo tên, bạn sử dụng phương thức 47. Ví dụ sau lấy giá trị của item ‘ 44‘ 3 Nếu không có mục nào có tên 44, phương thức 47 sẽ trả về 81 4) Xóa một mục theo tênĐể xóa một mục theo tên, bạn sử dụng phương pháp 82. Sau đây xóa mục có tên là 83 4 5) Lặp lại tất cả các mụcĐể lặp lại tất cả các mục được lưu trữ trong 7, bạn làm theo các bước sau
Đoạn mã sau minh họa các bước 8 6) Xóa tất cả các mục trong sessionStorageDữ liệu được lưu trữ trong 7 sẽ tự động bị xóa khi đóng tab/cửa sổ trình duyệt web Ngoài ra, bạn có thể sử dụng phương pháp 35 để lập trình xóa tất cả dữ liệu được lưu trữ trong 7 0 Tại sao JavaScript sessionStorage7 có nhiều ứng dụng thực tế. Và sau đây là những cái đáng chú ý. j
Phiên JavaScriptỨng dụng lưu trữBạn sẽ xây dựng một ứng dụng web đơn giản cho phép người dùng chọn chế độ, chế độ tối hoặc sáng. Theo mặc định, nó có chế độ ánh sáng. Và bạn sẽ sử dụng 7 để ghi nhớ chế độ khi trang được làm mới Nếu bạn làm mới trang, chế độ bạn đã chọn sẽ khôi phục vì nó được lưu trữ trong 7 Tuy nhiên, nếu bạn đóng tab hoặc cửa sổ, trang sẽ đặt lại về chế độ 46, đây là chế độ mặc định 1) Tạo cấu trúc thư mục dự ánĐầu tiên, tạo một thư mục mới có tên là 08. Trong thư mục 08, tạo hai thư mục con. 00 và 01 sẽ lưu trữ các tệp JavaScript và CSS Thứ hai, tạo một tệp 02 mới trong thư mục 7, tệp 04 trong thư mục 00 và tệp 06 trong thư mục 01 2) Xây dựng trang HTMLPhần sau hiển thị trang 02 0 Trong tệp 02 này, chúng tôi đặt 06 ở phần đầu và 04 ở phần thân Trang có một số yếu tố. Cái quan trọng nhất là nút có id 32 3) Tạo ứng dụng. tập tin jsĐầu tiên, khai báo hai hằng số sẽ được sử dụng làm nhãn của butotn 3 Bạn sẽ sử dụng 33 làm nhãn của nút 32 ở chế độ tối và 35 ở chế độ sáng Thứ hai, khai báo ba hằng số cho các chế độ tối, sáng và mặc định 8 Thứ ba, chọn nút 32 bằng cách sử dụng nút 37 0 Thứ tư, xác định một chức năng mới 38 để thay đổi chế độ 1 Ở chế độ tối, 38 thay đổi nút thành 33 và thêm lớp 81 vào thành phần cơ thể Và ở chế độ ánh sáng, 38 thay đổi nhãn nút thành 35 và loại bỏ lớp 81 khỏi phần tử cơ thể Phần sau đây hiển thị CSS của chế độ ánh sáng. Màu nền là màu trắng và màu văn bản là màu đen 2 Ở chế độ tối, màu nền là màu đen và màu văn bản là màu trắng 3 Để chuyển từ chế độ sáng sang tối, bạn thêm. lớp tối cho phần tử cơ thể và ngược lại Thứ năm, xác định chức năng 85 sẽ chạy khi tải trang 4 Trong chức năng này, chúng tôi sử dụng phương pháp 47 để lấy chế độ được lưu trữ trong 7 Nếu 7 không có mục 44 thì hàm 85 sẽ chuyển trang về chế độ mặc định là chế độ tối. Mặt khác, nó đặt ở chế độ được lưu trữ trong 7 Thứ sáu, đính kèm trình xử lý sự kiện nhấp chuột vào nút 32 5 Trình xử lý sự kiện nhấp chuột nhận chế độ được lưu trữ trong sessionStorage Nếu mục chế độ tồn tại, nó sẽ chuyển đổi chế độ. Nói cách khác, chế độ sáng trở thành chế độ tối và ngược lại Sau đó, nó sử dụng phương pháp 45 để cập nhật mục chế độ trong 7 sang mục mới Sau đây cho thấy một ứng dụng hoàn chỉnh. tập tin js 6 Đây là ứng dụng cuối cùng Đầu tiên, bạn chọn một chế độ e. g. , chế độ ánh sáng, 7 sẽ lưu nó Sau đó, bạn làm mới trang. Nó sẽ hiển thị chế độ đã chọn trước đó Để xem dữ liệu được lưu trữ trong bộ nhớ phiên trên trình duyệt web, bạn bấm vào tab Ứng dụng và chọn Bộ nhớ phiên Bạn có thể truy cập các biến phiên trong JavaScript không?Bạn không thể đặt các biến phiên bên phiên từ Javascript . Nếu bạn muốn làm điều này, bạn cần tạo một BÀI ĐĂNG AJAX để cập nhật điều này trên máy chủ mặc dù nếu việc lựa chọn một chiếc ô tô là một sự kiện lớn thì việc POST này có thể dễ dàng hơn. Lưu câu trả lời này.
sessionStorage là gì?Lưu trữ phiên là một lựa chọn phổ biến khi lưu trữ dữ liệu trên trình duyệt . Nó cho phép các nhà phát triển lưu và truy xuất các giá trị khác nhau. Không giống như bộ nhớ cục bộ, bộ nhớ phiên chỉ giữ dữ liệu cho một phiên cụ thể. Dữ liệu bị xóa sau khi người dùng đóng cửa sổ trình duyệt.
sessionStorage có được chia sẻ giữa các tab không?SessionStorage chỉ tồn tại trong tab trình duyệt hiện tại. Một tab khác có cùng trang sẽ có bộ nhớ khác. Nhưng nó được chia sẻ giữa các iframe trong cùng một tab (giả sử chúng đến từ cùng một nguồn gốc).
Async có phải là sessionStorage không?Giống như localStorage , sessionStorage cũng là một API đồng bộ , vì vậy bạn có thể chắc chắn rằng mình sẽ ngay lập tức có quyền truy cập vào bất kỳ giá trị nào bạn muốn . |
