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.
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!
Không có bình luận.