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.

Phiên bản	4.0	3.5	8.0	4.0	11.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!