Để quản lý dữ liệu được ứng dụng web của bạn xử lý, bạn không nhất thiết cần có cơ sở dữ liệu. Các tính năng Bộ nhớ trình duyệt tương ứng được Chrome (phiên bản 4 trở lên), Mozilla Firefox (phiên bản 3.5 trở lên) và Internet Explorer (phiên bản 8 trở lên) và một loạt trình duyệt khác hỗ trợ, bao gồm cả iOS và Android.
Có hai khả năng chính để lưu trữ trình duyệt:localStorage và sessionStorage.
Mọi nội dung/dữ liệu được lưu vào localStorage đối tượng sẽ khả dụng sau khi trình duyệt được khởi động lại (đóng và mở lại). Để lưu một mục tới localStorage , bạn có thể sử dụng phương thức setItem() . Phương thức này phải được trao một khóa và một giá trị.
Example: localStorage.setItem("mykey","myvalue");
Để truy xuất mục từ localStorage , phương thức getItem phải được sử dụng. getItem phương thức phải được trao chìa khóa của dữ liệu bạn muốn truy xuất:
Example: localStorage.getItem("mykey");
Bạn có thể xóa một mục khỏi localStorage bằng cách sử dụng removeItem() phương pháp. Phương pháp này phải được trao chìa khóa của mục cần loại bỏ:
Example: localStorage.removeItem("mykey");
Để xóa toàn bộ localStorage , bạn nên sử dụng clear() phương pháp trên localStorage đối tượng:
Example: localStorage.clear();
Bộ nhớ phiên
Các mục được lưu trong sessionStorage đối tượng sẽ vẫn còn cho đến khi người dùng đóng trình duyệt. Sau đó, bộ nhớ sẽ bị xóa.
Bạn có thể lưu một mục vào sessionStorage , vui lòng sử dụng phương thức setItem() trên sessionStorage đối tượng:
Example: sessionStorage.setItem("mykey","myvalue");
Để truy xuất mục từ sessionStorage , phương thức getItem phải được sử dụng. getItem phương thức phải được trao chìa khóa của dữ liệu bạn muốn truy xuất:
Example: sessionStorage.getItem("mykey");
Bạn có thể xóa một mục khỏi sessionStorage bằng cách sử dụng removeItem() phương pháp. Phương pháp này phải được trao chìa khóa của mục cần loại bỏ:
Example: sessionStorage.removeItem("mykey");
Để xóa toàn bộ sessionStorage , bạn nên sử dụng clear() phương pháp trên sessionStorage đối tượng:
Example: sessionStorage.clear();
Lưu mảng vào localStorage và sessionStorage
Bạn không thể chỉ lưu các giá trị đơn lẻ vào localStorage và sessionStorage , nhưng bạn cũng có thể lưu nội dung của một mảng.
Trong ví dụ này, chúng ta có một mảng chứa các số:
var ourArray =[1,2,3,4,5];
Bây giờ chúng ta có thể lưu nó vào localStorage hoặc sessionStorage sử dụng setItem() phương pháp:
localStorage.setItem("ourarraykey",JSON.stringify(ourArray));
hoặc, cho sessionStorage :
sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));
Để được lưu, trước tiên mảng phải được chuyển đổi thành chuỗi. Trong ví dụ hiển thị ở trên, chúng tôi đang sử dụng JSON.stringify phương pháp để thực hiện điều này.
Khi truy xuất dữ liệu của chúng tôi từ localStorage hoặc sessionStorage , chuyển đổi nó trở lại thành một mảng:
var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);
hoặc, cho sessionStorage :
var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu