Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Với tính năng lưu trữ dữ liệu trên web, các ứng dụng website có thể lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng.
Trước HTML5, dữ liệu ứng dụng thường được lưu trữ trong biến cookie, và được gọi lại khi máy chủ web có yêu cầu. Lưu trữ web thì an toàn hơn và có thể lưu trữ một lượng lớn dữ liệu được lưu trữ cục bộ mà không ảnh hưởng đến hiệu suất trang web.
Không giống như cookie, giới hạn lưu trữ web lớn hơn nhiều (ít nhất 5MB) và thông tin dữ liệu người dùng không bao giờ được chuyển đến máy chủ.
Lưu trữ web là lưu trữ theo nguồn gốc trang web (theo tên miền và giao thức). Tất cả các trang, từ một nguồn, có thể lưu trữ và truy cập cùng một dữ liệu.
Các số trong bảng bên dưới chỉ định phiên bản tối thiểu trình duyệt hỗ trợ đầy đủ cho chức năng webstorage.
API | |||||
---|---|---|---|---|---|
Lưu trữ web | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML cung cấp cho chúng ta hai đối tượng để lưu trữ dữ liệu trên máy khách client.
window.localStorage
- lưu trữ dữ liệu không có ngày hết hạnwindow.sessionStorage
- lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi đóng tab trình duyệt)Trước khi sử dụng lưu trữ web, chúng ta phải kiểm tra sự hỗ trợ của trình duyệt cho localStorage
và sessionStorage
.
if (typeof(Storage) !== "undefined") { // Code cho localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. }
Đối tượng localStorage
lưu trữ dữ liệu mà không có ngày hết hạn. Dữ liệu sẽ không bị xóa khi trình duyệt bị đóng và sẽ có sẵn vào ngày, tuần hoặc năm tiếp theo.
Ví dụ
// Lưu trữ localStorage.setItem("lastname", "Smith"); // Lấy lại document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Ví dụ được giải thích như sau:
name/value
cho phương thức lưu trữ localStorage
với name="lastname"
và value="Smith"
value
của "lastname" và chèn nó vào phần tử có id="result"
Ví dụ trên cũng có thể được viết như thế này:
// Lưu trữ localStorage.lastname = "Smith"; // Lấy lại document.getElementById("result").innerHTML = localStorage.lastname;
Cú pháp để xóa mục localStorage
"lastname" như sau:
localStorage.removeItem("lastname");
Ví dụ sau đây đếm số lần người dùng đã nhấp vào một button. Trong đoạn mã này, chuỗi giá trị được chuyển đổi thành một số để có thể tăng bộ đếm.
Ví dụ
<script> function clickCounter() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "Bạn đã Click vào button " + localStorage.clickcount + " lần."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; } } </script>
Đối tượng sessionStorage
này có chức năng tương đương với đối tượng localStorage
, ngoại trừ việc nó lưu trữ dữ liệu chỉ cho một phiên. Dữ liệu bị xóa khi người dùng đóng tab trình duyệt cụ thể.
Ví dụ sau đếm số lần người dùng đã nhấp vào button, trong phiên hiện tại.
Ví dụ
<script> function clickCounter() { if (typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "Bạn đã Click vào button " + sessionStorage.clickcount + " lần."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; } } </script>