STDIO
Tìm kiếm gần đây
    Mục lục
    Thảo luận
    0
    Liên kết
    QR Code

    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.
    15/09/2014
    09/08/2020
    3 phút đọc
    Tìm Hiểu về Window.localStorage

    Để lưu trữ thông tin của người dùng tại trình duyệt web như lưu trữ điểm trong game, lưu trữ tạm các hiệu ứng, cookies là lựa chọn tốt để hiện thực, nhưng cookies có 1 số đặt điểm như sau:

    • Dung lượng tối đa 4KB.
    • Dữ liệu phải gửi qua lại giữa server và client khi phát sinh request.

    Để chủ động hơn, HTML5 hiện thực một khái niệm mới là localStorage:

    • Hỗ trợ lưu trữ và sử dụng nó linh hoạt tại frontend.
    • Dung lượng của localStorage vào khoảng 2MB đến 10MB.
    • localStorage 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.

    localStorage là gì?

    localStorage là cách thức lưu trữ dữ liệu tại client độc lập với server. Giả định viết 1 ứng dụng web cho phép người dùng viết bài trên STDIO, để tránh người dùng chưa lưu trữ bài viết nhưng lại gặp sự cố về máy tính, ứng dụng tiến hành lưu trữ mỗi 5 phút 1 lần, khi gặp sự cố ở lần mở web sau sẽ kiểm tra trong localStorage có dữ liệu hay không, nếu có thì có thể hỏi người dùng có muốn khôi phục lại phiên bản làm việc trước đó không?

    Để hiện thực tính năng lưu trữ tạm này, yêu cầu mỗi 5 phút dữ liệu tự lưu trữ lên server, nếu chỉ đòi hỏi lưu trữ tạm ở trình duyệt web, localStorage là lựa chọn tốt. Server sẽ giảm được lượng request đáng kể nhưng vẫn mang được trải nghiệm tốt cho người dùng. Ngoài ra, thời gian lưu trữ của localStorage có thể kéo dài cho đến khi frontend ra lệnh xóa.

    Cách sử dụng localStorage

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

    Để sử dụng localStorage, 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 localStorage 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 (localStorage) {
            alert("STDIO: Yes, localStorage is here!");
          } else {
            alert("STDIO: Your browser does not support localStorage!");
          }
        </script>
      </body>
    </html>

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

    localStorage

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

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

    localStorage.setItem(name, data)

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

    localStorage.getItem(name) == null

    Xóa dữ liệu

    localStorage.removeItem(name)

    Ví dụ

    <!DOCTYPE html>
    <html>
     <body>
       <script>
         if (localStorage) {
           // Save data to localStorage
           localStorage.setItem("Title", "Tìm Hiểu về Window.localStorage");
           localStorage.setItem("Content", "<p>Để lưu trữ thông tin ...");
           // Get data from localStorage
           console.log(localStorage.getItem("Content"));
           // Check if data stored in localStorage
           if (localStorage.getItem("Title") == null) {
             console.log("Title? Where is Title?");
           } // Remove data from localStorage
           localStorage.removeItem("Title");
           if (localStorage.getItem("Title") == null) {
             console.log("Deleted Title?");
           }
         }
       </script>
     </body>
    </html>

    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 đến xử lý giao diện như lựa chọn theme, trải nghiệm người dùng như lựa chọn ngôn ngữ.
    • Mật khẩu hay mã số bí mật không nên lưu trong localStorage hoặc chưa được mã hóa trước khi lưu.

    Bài chung series

    JavaScript

    JavaScript

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

    Đề xuất

    Tìm Hiểu về Window.sessionStorage

    Tìm Hiểu về Window.sessionStorage

    Hướng dẫn sử dụng sessionStorage với JavaScript thông qua code ví dụ.

    JavaScriptJavaScript Nâng Cao

    29/07/2020

    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 ...

    Modern C++C++98

    11/05/2015

    Khám phá thêm

    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 GameKiến Thức Nâng Cao

    17/01/2015

    Tìm Hiểu về Strings trong Python

    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 ...

    PythonCheat sheet

    20/03/2015

    Tìm Hiểu Về Tuples Trong Python

    Tìm Hiểu Về Tuples Trong Python

    Tìm hiểu kiểu dữ liệu Tuples trong Python.

    PythonCheat sheet

    25/03/2015

    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ử Ứng DụngKiến thức & linh kiện

    25/09/2014

    ioFlashStorage - Lưu Trữ Dữ Liệu Tại 1 Lần Yêu Cầu Trang

    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 ...

    JavaScriptJavaScript Nâng Cao

    03/08/2014

    Linear Search - Tìm Kiếm Tuyến Tính

    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.

    Giải Thuật Lập TrìnhGiải thuật tìm kiếm

    15/08/2015

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

    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++.

    Modern C++C++98

    16/01/2015

    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 ...

    Ẩn Danh

    18/07/2016

    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