Trước khi HTML5 ra đời, dữ liệu web được lưu trữ vào cookie và những dữ liệu này đều được gửi kèm mỗi khi trình duyệt gửi yêu cầu tới máy chủ. Local Storage an toàn hơn cookie và có thể chứa khối lượng dữ liệu lớn mà không làm ảnh hưởng tới hiệu suất của website.

Sử dụng HTML5 Local Storage để lưu trữ dữ liệu

Không giống cookies, Local Storage có giới hạn lưu trữ lớn hơn rất nhiều (ít nhất là 5 MB) và những dữ liệu này không cần phải gửi tới máy chủ trong quá trình trao đổi dữ liệu giữa trình duyệt với máy chủ.

Tất cả các trang từ cùng một nguồn (cùng tên miền và giao thức), có thể lưu trữ và truy cập vào cùng một khu vực dữ liệu.

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.

Icon ChromeIcon FireFoxIcon IEIcon SafariIcon Opera
Phiên bản4.03.58.04.011.5

Sử dụng Local Storage

Để thuận tiện hơn, bạn nên sử dụng jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Lưu dữ liệu cục bộ

Ví dụ lưu dữ liệu ở Textbox khi người dùng đưa con trỏ chuột ra ngoài.

$('#textbox').blur(function() {
    localStorage.setItem('textbox', $(this).val());
});

Lấy dữ liệu

Ví dụ lấy dữ liệu được lưu trữ cục bộ của Textbox khi người dùng tải trang.

$(document).ready(function() {
    $('#textbox').val(localStorage.getItem('textbox'));
});

Ví dụ lấy dữ liệu lên Select và chọn sẵn giá trị.

$(document).ready(function() {
    if (localStorage.getItem('select') !== null) {
        $("#select option:selected").prop("selected", false);
        $('#select option').each(function() {
            if ($(this).text() == localStorage.getItem('select')) {
                $(this).attr('selected', 'selected');   
            }
        });
    }
});

Chúc các bạn thành công!