STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    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
    JavaScript

    JavaScript

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

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

    Đề xuất

    Tìm Hiểu về Window.localStorage
    Tìm hiểu về localStorage trong HTML5 và cách sử dụng thông qua ...
    Tìm Hiểu về fstream
    Kiến thức về file là một trong những kiến thức quan trọng đối với các ...
    11/05/2015

    Khám phá

    Tìm Hiểu về Strings trong Python
    Tìm hiểu về kiểu dữ liệu Strings và các phương thức thao tác trên ...
    20/03/2015
    Tìm Hiểu về Tuples trong Python
    Tìm hiểu kiểu dữ liệu Tuples trong Python.
    25/03/2015
    Một Số Kiến Thức Điện Tử Cơ Bản
    Tìm hiểu 1 số kiến thức điện cơ bản trước khi bắt đầu tìm hiểu sâu về ...
    ioFlashStorage - Lưu Trữ Dữ Liệu Tại 1 Lần Yêu Cầu Trang
    Lưu trữ các trạng thái của web tại trình duyệt với ioFlashStorage ...
    Linear Search - Tìm Kiếm Tuyến Tính
    Tìm hiểu về Linear Search - tìm kiếm tuyến tính qua code mẫu.
    Bản Chất Của Biến Trong C/C++
    Tìm hiểu về bản chất của biến trong C++.
    16/01/2015
    Tìm Hiểu Về WebM
    WebM là một loại định dạng video file mã nguồn mở, royalty-free, được ...
    18/07/2016
    Lập Trình Win32 API - Phần 2: Tạo Cửa Sổ Cơ Bản
    Hệ điều hành Windows cung cấp các cửa sổ Window. Có thể sử dụng Win32 ...
    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 - 2020