STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ
    Nội dung
    0
    0
    Chia sẻ

    Tìm Hiểu về Window.sessionStorage

    Hướng dẫn sử dụng sessionStorage với JavaScript thông qua code ví dụ.
    29/07/2020 09/08/2020 2 phút đọc
    Tìm Hiểu về Window.sessionStorage

    sessionStorage tương tự như localStorage chỉ khác về tầm vực, thời gian sử dụng:

    • Hỗ trợ lưu trữ và sử dụng nó linh hoạt tại frontend.
    • Dung lượng của sessionStorage vào khoảng 5MB.
    • sessionStorage không liên hệ với server.
    • Muốn gửi thông tin này đến server ta có thể chủ động thông qua http request.

    Điểm khác nhau giữa sessionStorage và localStorage.

    • localStorage: Lưu trữ dữ liệu phân biệt theo domain cho đến khi nhận được lệnh xóa dữ liệu hoặc dữ liệu trình duyệt bị xóa.
    • sessionStorage: Lưu trữ dữ liệu phân biệt theo domain, trên 1 tab hiện tại của trình duyệt, nếu tab đóng dữ liệu sẽ được xóa bỏ.

    sessionStorage là gì?

    sessionStorage là cách thức lưu trữ dữ liệu tại client độc lập với server, giả sử cần lưu trữ điểm số của 1 mini-game trên tab hiện tại, có thể lưu trong sessionStorage, khi mở 1 tab mới điểm số trong sessionStorage của tab mới khác với tab trước đó.

    Cách sử dụng sessionStorage

    Kiểm tra trình duyệt có hỗ trợ sessionStorage hay không?

    Để sử dụng sessionStorage, trình duyệt cần hỗ trợ HTML5 trở lên. Tại thời điểm này, các trình duyệt web hiện đại đã hỗ trợ tốt cho HTML5, tuy nhiên ta vẫn nên kiểm tra xem sessionStorage như 1 thói quen tốt vì có thể ở 1 yêu cầu nào đó từ khách hàng trên 1 số trình duyệt lạc hậu chưa hỗ trợ.

    <!DOCTYPE html>
    <html>
      <body>
        <script>
          if (sessionStorage) {
            alert("STDIO: Yes, sessionStorage is here!");
          } else {
            alert("STDIO: Your browser does not support sessionStorage!");
          }
        </script>
      </body>
    </html>

    Nếu trình duyệt hỗ trợ sessionStorage, thông báo sau sẽ hiện lên

    Lưu mới, thay đổi hoặc lấy dữ liệu từ sessionStorage

    Lưu, thay đổi dữ liệu

    sessionStorage.setItem(name, data)

    Kiểm tra dữ liệu đã tồn tại hay chưa

    sessionStorage.getItem(name) == null

    Xóa dữ liệu

    sessionStorage.removeItem(name)

    Ví dụ

    <!DOCTYPE html>
    <html>
      <body>
        <script>
          if (sessionStorage) {
            // Save data to sessionStorage
            sessionStorage.setItem("HP", "97");
            sessionStorage.setItem("Name", "Nemesis");
            // Get data from sessionStorage
            console.log(sessionStorage.getItem("Name"));
            // Check if data stored in sessionStorage
            if (sessionStorage.getItem("HP") == null) {
              console.log("No HP!!!");
            }
            // Remove data from sessionStorage
            sessionStorage.removeItem("HP");
            if (sessionStorage.getItem("Deleted HP?") == null) {
              console.log("No HP?");
            }
          }
        </script>
      </body>
    </html>
    sessionStorage

    Do dữ liệu được lưu tại trình duyệt web của người dùng, cần cẩn thận việc dữ liệu thay đổi có gây nguy hại cho hệ thống hoặc người dùng hay không?

    • Chỉ nên lưu trữ các giá trị liên quan cấu hình ngắn hạn, trạng thái nhất thời như tọa độ 1 div, xử lý hiệu ứng.
    • Mật khẩu hay mã số bí mật không nên lưu trong sessionStorage hoặc chưa được mã hóa trước khi lưu.

    Bài chung series

    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    • 30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn
    • 383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012
    ©STDIO, 2013 - 2021