STDIO
Tìm kiếm gần đây

    Nội dung

    Tìm Hiểu về Window.sessionStorage

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

    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

    JavaScript

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

    Thảo luận

    In order to comment you must be a STDIO Insider. Please sign up or log in to continue.

    Đăng nhập

    Bài viết liên quan

    Tìm Hiểu về Window.localStorage

    Tìm Hiểu về Window.localStorage

    Tìm hiểu về localStorage trong HTML5 và cách sử dụng thông qua JavaScript code.

    JavaScriptJavaScript Nâng Cao

    15/09/2014

    Tìm Hiểu Về fstream

    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 lập trình viên. Bài viết này trình bày chi tiết về 2 loại file là file nhị phân và file text, cũng ...

    Lê Minh Trung

    11/05/2015

    Tìm Hiểu Về Thuật Toán

    Tìm Hiểu Về Thuật Toán

    ­­­­Thuật toán là một tập hợp hữu hạn các thao tác được thực hiện liên tục nhằm đạt được một mục đích xác định trước. Trong bài viết này, tôi sẽ trình bày lại những hiểu ...

    STDIO Warehouse

    25/08/2015

    Tổng Quan Về Debug

    Tổng Quan Về Debug

    Trong bài viết này tôi sẽ tập trung nói về cách debug trong quá trình coding. Tôi sẽ sử dụng một ví dụ mẫu viết bằng C# trên IDE Visual Studio 2013 để minh họa việc debug ...

    Phạm Tấn Phong

    05/03/2016

    Bản Chất Của Biến Trong C/C++

    Bản Chất Của Biến Trong C/C++

    Những ngày đầu được học và làm việc với các kiểu biến như int, float, char….Tôi luôn có những thắc mắc về:”Điều gì đang xảy ra bên trong biến int, char… khi ta cấp phát ...

    Trần Hữu Danh

    16/01/2015

    Hiện Thực Cơ Bản Của Game

    Hiện Thực Cơ Bản Của Game

    Bài viết này dành cho những bạn muốn tìm hiểu về Game và bắt đầu việc lập trình Game.

    Trần Hữu Danh

    17/01/2015

    Tìm Hiểu Về Game Loop

    Tìm Hiểu Về Game Loop

    Game loop được xem như thành phần "trái tim" của game. Nắm rõ được cấu trúc của game loop có thể xây dựng cấu trúc code tốt hơn, xử lý các vấn đề phát sinh khi code. Bài ...

    Ngô Đình Dũ

    05/03/2016

    Tìm Hiểu Về WebM

    Tìm Hiểu Về WebM

    WebM là một loại định dạng video file mã nguồn mở, royalty-free, được thiết kế cho nền web, thay thế cho các định dạng video file tốn phí và lỗi thời trước đây. Ngoài ra, ...

    Ẩn Danh

    18/07/2016

    Một Số Kiến Thức Điện Tử Cơ Bản

    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ề điện tử.

    Điện Tử Ứng DụngKiến thức & linh kiện

    25/09/2014

    Các Vấn Đề Về Debug Cơ Bản

    Các Vấn Đề Về Debug Cơ Bản

    Tư duy Debug, nếu bạn đang bão hòa về mặt tư duy debug, bài viết này sẽ giúp bạn mở rộng hơn và giúp bạn có được các tư duy debug tốt hơn. Nếu không có một kinh nghiệm ...

    La Kiến Vinh

    03/06/2014

    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