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
sessionStorage
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
sessionStorage
7 sẽ bị xóa khi đóng trình duyệt
sessionStorage
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
sessionStorage
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
sessionStorage
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
sessionStorage
3 có cácCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
7 khác nhau khi truy cập bằng
sessionStorage
5 vàCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
6Code language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
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ủ.
sessionStorage
7 không khả dụng khi trang chạy cục bộ mà không có máy chủ
sessionStorage
Vì
7 là một thể hiện của loại
sessionStorage
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ữ
sessionStorage
31 – đặt giá trị cho tênsessionStorage
32 – xóa cặp tên-giá trị được xác định theo tênsessionStorage
33 – nhận giá trị cho một tên đã chosessionStorage
34 – lấy tên của giá trị ở vị trí số đã chosessionStorage
35 – xóa tất cả các giá trị trongsessionStorage
7sessionStorage
Quản lý dữ liệu trong JavaScript sessionStorage
1] Truy cập sessionStorage
Để truy cập vào
7, bạn sử dụng thuộc tính
sessionStorage
7 của đối tượng
sessionStorage
39
sessionStorage
3
sessionStorage
Vì
40 là đối tượng toàn cầu, bạn chỉ cần truy cập vào
sessionStorage
7 như thế này
sessionStorage
sessionStorage
2] Lưu trữ dữ liệu trong sessionStorage
Sau đây lưu trữ một cặp tên-giá trị trong
7
sessionStorage
Code language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
Nếu
7 có một mục có tên là
sessionStorage
44, phương thức
sessionStorage
45 sẽ cập nhật giá trị cho mục hiện có thành
sessionStorage
46. Nếu không, nó sẽ chèn một mục mới
sessionStorage
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 ‘
sessionStorage
44‘
sessionStorage
3
sessionStorage
Nếu không có mục nào có tên
44, phương thức
sessionStorage
47 sẽ trả về
sessionStorage
81
sessionStorage
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à
sessionStorage
83
sessionStorage
4
sessionStorage
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
sessionStorage
- Sử dụng
85 để lấy tất cả các khóa của đối tượngsessionStorage
7sessionStorage
- Sử dụng
87 để lặp lại các phím và lấy các mục theo phímsessionStorage
Đoạn mã sau minh họa các bước
8
sessionStorage
6] Xóa tất cả các mục trong sessionStorage
Dữ 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
sessionStorage
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
sessionStorage
7
sessionStorage
0
sessionStorage
Tại sao JavaScript sessionStorage
7 có nhiều ứng dụng thực tế. Và sau đây là những cái đáng chú ý. j
sessionStorage
7 có thể được sử dụng để lưu trữ trạng thái giao diện người dùng của ứng dụng web. Sau này, khi người dùng quay lại trang, bạn có thể khôi phục giao diện người dùng được lưu trữ trongsessionStorage
7sessionStorage
7 cũng có thể được sử dụng để truyền dữ liệu giữa các trang thay vì sử dụng các trường nhập ẩn hoặc tham số URLsessionStorage
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
sessionStorage
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
sessionStorage
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
sessionStorage
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
sessionStorage
08, tạo hai thư mục con.
sessionStorage
00 vàCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
01 sẽ lưu trữ các tệp JavaScript và CSSCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
Thứ hai, tạo một tệp
02 mới trong thư mụcCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
7, tệp
sessionStorage
04 trong thư mụcCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
00 và tệpCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
06 trong thư mụcCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
01Code language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
2] Xây dựng trang HTML
Phần sau hiển thị trang
02Code language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
0Code language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
Trong tệp
02 này, chúng tôi đặtCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
06 ở phần đầu vàCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
04 ở phần thânCode language: JavaScript [javascript]
sessionStorage.setItem['mode','dark'];
Trang có một số yếu tố. Cái quan trọng nhất là nút có id
32
sessionStorage
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
sessionStorage
Bạn sẽ sử dụng
33 làm nhãn của nút
sessionStorage
32 ở chế độ tối và
sessionStorage
35 ở chế độ sáng
sessionStorage
Thứ hai, khai báo ba hằng số cho các chế độ tối, sáng và mặc định
8
sessionStorage
Thứ ba, chọn nút
32 bằng cách sử dụng nút
sessionStorage
37
sessionStorage
0
sessionStorage
Thứ tư, xác định một chức năng mới
38 để thay đổi chế độ
sessionStorage
1
sessionStorage
Ở chế độ tối,
38 thay đổi nút thành
sessionStorage
33 và thêm lớp
sessionStorage
81 vào thành phần cơ thể
sessionStorage
Và ở chế độ ánh sáng,
38 thay đổi nhãn nút thành
sessionStorage
35 và loại bỏ lớp
sessionStorage
81 khỏi phần tử cơ thể
sessionStorage
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
sessionStorage
Ở chế độ tối, màu nền là màu đen và màu văn bản là màu trắng
3
sessionStorage
Để 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
sessionStorage
4
sessionStorage
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
sessionStorage
7
sessionStorage
Nếu
7 không có mục
sessionStorage
44 thì hàm
sessionStorage
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
sessionStorage
7
sessionStorage
Thứ sáu, đính kèm trình xử lý sự kiện nhấp chuột vào nút
32
sessionStorage
5
sessionStorage
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
sessionStorage
7 sang mục mới
sessionStorage
Sau đây cho thấy một ứng dụng hoàn chỉnh. tập tin js
6
sessionStorage
Đâ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ó
sessionStorage
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