Làm thế nào để html lưu trữ dữ liệu trong bộ nhớ cục bộ?

Trong những ngày đầu của web, dữ liệu chỉ có thể tồn tại với một máy chủ. Ngày nay, thông qua việc sử dụng LocalStorage, chúng tôi có thể lưu trữ dữ liệu trên các ứng dụng khách như trình duyệt và ứng dụng dành cho thiết bị di động mà không cần giao tiếp với ứng dụng phụ trợ

Trong bài viết này, chúng tôi sẽ thảo luận về cách nhà phát triển có thể lưu trữ dữ liệu trên máy khách bằng cookie và cách LocalStorage cải thiện trải nghiệm đó. Sau đó, chúng ta sẽ xem xét các chức năng lưu trữ và truy xuất dữ liệu từ LocalStorage. Cuối cùng, chúng ta sẽ thảo luận về thời điểm thích hợp để sử dụng LocalStorage

Lưu trữ dữ liệu trong trình duyệt bằng cookie

Cookies là dữ liệu văn bản được lưu trữ trong máy khách. Theo truyền thống, chúng được đặt bởi máy chủ, tuy nhiên, chúng cũng có thể được tạo bằng mã JavaScript trong trình duyệt. Dữ liệu trong cookie được lưu trữ dưới dạng các cặp chuỗi khóa/giá trị

Tất cả cookie được gửi đến máy chủ khi yêu cầu HTTP được thực hiện. Các cookie bạn tạo bằng JavaScript cũng sẽ được gửi đến máy chủ khi yêu cầu HTTP được thực hiện. Điều này có nghĩa là ứng dụng máy chủ có thể vô tình sửa đổi cookie, khiến ứng dụng khách của bạn hoạt động không mong muốn

Với cookie, bạn chỉ có thể lưu trữ tối đa 4KB dữ liệu trên máy khách. Đối với các ứng dụng front-end hiện đại, điều này có thể là không đủ

Hãy xem cách LocalStorage cho phép chúng tôi tạo và giữ dữ liệu ở phía máy khách, với nhiều không gian lưu trữ hơn so với cookie cung cấp

Lưu trữ cục bộ là gì?

LocalStorage là kho dữ liệu khóa/giá trị có sẵn trên trình duyệt của người dùng. Giống như cookie, LocalStorage chỉ có thể lưu trữ dữ liệu chuỗi cho các khóa và giá trị của nó. Kho dữ liệu chỉ có thể truy cập được bằng JavaScript trong miền đó

Ghi chú. Mỗi miền có quyền truy cập vào kho dữ liệu LocalStorage của nó. Ví dụ: LocalStorage được sử dụng bởi

let techStack = localStorage.getItem["tech"];
console.log[techStack];

1 tách biệt với LocalStorage được sử dụng bởi

let techStack = localStorage.getItem["tech"];
console.log[techStack];

2

Tên miền phụ và các giao thức HTTP khác nhau [HTTP và HTTPS] đều có kho dữ liệu độc lập. Ví dụ: LocalStorage được sử dụng bởi

let techStack = localStorage.getItem["tech"];
console.log[techStack];

3 hoàn toàn tách biệt với

let techStack = localStorage.getItem["tech"];
console.log[techStack];

4. Tương tự, LocalStorage của

let techStack = localStorage.getItem["tech"];
console.log[techStack];

5 tách biệt với

let techStack = localStorage.getItem["tech"];
console.log[techStack];

6

Việc có sẵn LocalStorage trên mỗi miền sẽ ngăn không cho JavaScript độc hại được lưu trữ trên các trang web khác thao túng hoặc đọc dữ liệu khách hàng được miền của chúng tôi sử dụng

Mỗi miền có thể lưu trữ tối đa 5MB dữ liệu trong LocalStorage. Ngoài ra, dữ liệu của chúng tôi không được gửi đến máy chủ khi yêu cầu HTTP được thực hiện

Dữ liệu trong LocalStorage không có thời gian hết hạn. Nó có thể được gỡ bỏ thông qua JavaScript hoặc bằng cách xóa bộ nhớ cache của trình duyệt

Bây giờ chúng ta đã biết LocalStorage là gì, hãy sử dụng API của nó để quản lý dữ liệu trên trình duyệt

Cách sử dụng Lưu trữ cục bộ

Chúng ta có thể sử dụng các phương thức sau trên đối tượng toàn cầu

let techStack = localStorage.getItem["tech"];
console.log[techStack];

7 để quản lý dữ liệu phía máy khách

Phương thức Mô tả

let techStack = localStorage.getItem["tech"];
console.log[techStack];

8Thêm khóa/giá trị trong LocalStorage

let techStack = localStorage.getItem["tech"];
console.log[techStack];

9Nhận giá trị từ LocalStorage

localStorage.removeItem["tech"];

0Xóa mục theo khóa của nó

localStorage.removeItem["tech"];

1Xóa tất cả mục khỏi LocalStorage

localStorage.removeItem["tech"];

2Nhận khóa của mục từ LocalStorage

thiết lập các mục[]

Sử dụng chức năng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

8 để lưu trữ một mục trong LocalStorage. Hàm này lấy một khóa làm đối số đầu tiên và một giá trị làm đối số thứ hai. Như đã đề cập trước đó, cả hai phải là chuỗi

Trong bảng điều khiển trình duyệt của bạn, hãy thêm một mục vào

let techStack = localStorage.getItem["tech"];
console.log[techStack];

7 của chúng tôi

let techStack = localStorage.getItem["tech"];
console.log[techStack];

4

getItem[]

Sử dụng hàm

let techStack = localStorage.getItem["tech"];
console.log[techStack];

9 để lấy dữ liệu từ LocalStorage. Hàm này lấy khóa đã được sử dụng trong khi lưu dữ liệu làm đối số

Trong bảng điều khiển của bạn, hãy truy xuất và in giá trị đã được lưu trước đó với

let techStack = localStorage.getItem["tech"];
console.log[techStack];

8

let techStack = localStorage.getItem["tech"];
console.log[techStack];

Bảng điều khiển của bạn sẽ in "JavaScript"

loại bỏ mục[]

Sử dụng chức năng

localStorage.removeItem["tech"];

0 để xóa một mục khỏi LocalStorage. Bạn cần cung cấp khóa của mục bạn muốn xóa làm đối số

Hãy thử điều này trong bảng điều khiển của bạn để xóa dữ liệu được lưu bằng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

8

localStorage.removeItem["tech"];

Để xác nhận nó đã bị xóa, hãy thử truy xuất nó một lần nữa

let techStack = localStorage.getItem["tech"];
console.log[techStack];

1

Bảng điều khiển sẽ xuất "null" khi

let techStack = localStorage.getItem["tech"];
console.log[techStack];

9 trả về

let techStack = localStorage.getItem["tech"];
console.log[techStack];

10 bất cứ khi nào nó không thể truy xuất một mục

thông thoáng[]

Để xóa tất cả dữ liệu được lưu trữ trong LocalStorage, hãy sử dụng chức năng

localStorage.removeItem["tech"];

1

let techStack = localStorage.getItem["tech"];
console.log[techStack];

5

Chìa khóa[]

Hàm

localStorage.removeItem["tech"];

2 cho phép chúng tôi lấy khóa của một mục được lưu trong LocalStorage theo chỉ mục của nó. Trình duyệt tạo chỉ mục số nguyên cho mỗi mục được thêm vào LocalStorage

Vì chúng tôi không tạo chỉ mục này, chúng tôi không nên sử dụng chỉ mục để truy xuất khóa trực tiếp. Tuy nhiên, chúng ta có thể sử dụng chức năng này để lấy tất cả các khóa được lưu trữ trong LocalStorage

let techStack = localStorage.getItem["tech"];
console.log[techStack];

7

Bằng cách sử dụng thuộc tính

let techStack = localStorage.getItem["tech"];
console.log[techStack];

13 của LocalStorage, chúng tôi lặp lại mọi chỉ mục được tạo để in tất cả các khóa chúng tôi đã lưu trong LocalStorage. Sau đó, chúng tôi có thể sử dụng các khóa này với

let techStack = localStorage.getItem["tech"];
console.log[techStack];

9 để truy xuất tất cả dữ liệu được lưu trữ

Bây giờ chúng tôi đã trình bày tất cả các chức năng để quản lý dữ liệu trong trình duyệt của người dùng, hãy xem xét trường hợp đặc biệt lưu các đối tượng phức tạp thay vì dữ liệu chuỗi

Lưu trữ các đối tượng trong LocalStorage

LocalStorage chỉ có thể sử dụng chuỗi cho các khóa và giá trị của nó. Nếu chúng tôi cố gắng lưu trữ bất kỳ loại dữ liệu nào khác, nó sẽ chuyển đổi nó thành một chuỗi trước khi lưu trữ. Điều này có thể mang lại một số hành vi không mong muốn khi chúng tôi muốn lưu các đối tượng JavaScript

Hãy tạo một đối tượng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

15 trong bảng điều khiển trình duyệt của bạn và lưu nó vào LocalStorage

let techStack = localStorage.getItem["tech"];
console.log[techStack];

1

Bây giờ,

let techStack = localStorage.getItem["tech"];
console.log[techStack];

8 sẽ chuyển đổi đối tượng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

15 thành một chuỗi. Khi chúng tôi truy xuất

let techStack = localStorage.getItem["tech"];
console.log[techStack];

15 như thế này

let techStack = localStorage.getItem["tech"];
console.log[techStack];

5

Hãy xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, tiêu chuẩn được ngành chấp nhận và bao gồm bảng gian lận. Dừng các lệnh Git trên Google và thực sự tìm hiểu nó

Bảng điều khiển trình duyệt của chúng tôi sẽ hiển thị điều này

Chuyển đổi đối tượng thành chuỗi của JavaScript tạo ra

let techStack = localStorage.getItem["tech"];
console.log[techStack];

19. Phải thừa nhận rằng việc lấy lại một chuỗi chỉ cho biết một đối tượng đã được lưu trữ là không hữu ích

Để lưu trữ chính xác các đối tượng JavaScript trong LocalStorage, trước tiên chúng ta cần chuyển đổi đối tượng của mình thành chuỗi JSON

Chúng tôi sử dụng hàm

let techStack = localStorage.getItem["tech"];
console.log[techStack];

50 tích hợp cho việc này. Chuỗi kết quả của hàm đó sẽ chứa tất cả các thuộc tính của đối tượng JSON của chúng tôi. Chúng tôi lưu đầu ra của chức năng đó khi chúng tôi sử dụng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

8

Hãy lưu đối tượng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

15 sau khi xâu chuỗi nó

let techStack = localStorage.getItem["tech"];
console.log[techStack];

0

Để truy xuất dữ liệu này dưới dạng một đối tượng, chúng ta cần thực hiện hai việc. Trước tiên, chúng tôi cần sử dụng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

9 để lấy nó từ LocalStorage. Sau đó, chúng ta cần chuyển đổi chuỗi JSON thành một đối tượng JavaScript

Hãy bắt đầu bằng cách lấy mục từ LocalStorage

let techStack = localStorage.getItem["tech"];
console.log[techStack];

2

Bây giờ, hãy chuyển đổi chuỗi LocalStorage thành một đối tượng bằng

let techStack = localStorage.getItem["tech"];
console.log[techStack];

54 và đăng nhập nó vào bảng điều khiển của trình duyệt

let techStack = localStorage.getItem["tech"];
console.log[techStack];

0

Chạy mã này sẽ cung cấp cho bạn đầu ra sau

Lưu ý sự khác biệt về màu sắc trong bảng điều khiển khi chúng tôi đăng nhập chuỗi lần đầu tiên khi chúng tôi đăng nhập đối tượng. Chúng tôi cũng đăng nhập thuộc tính

let techStack = localStorage.getItem["tech"];
console.log[techStack];

55 của

let techStack = localStorage.getItem["tech"];
console.log[techStack];

15 để đảm bảo rằng các thuộc tính của đối tượng vẫn có thể truy cập được

Bây giờ chúng ta đã có một chiến lược để mở rộng việc sử dụng LocalStorage ngoài các chuỗi, hãy thảo luận về các phương pháp hay nhất khi sử dụng nó

Khi nào nên sử dụng LocalStorage

LocalStorage cho phép duy trì cơ bản trên trang web của bạn. Nó thường được sử dụng để giữ dữ liệu thuận tiện cho người dùng xem ngay cả khi trình duyệt được làm mới. Ví dụ: nhiều biểu mẫu lưu đầu vào của người dùng trong LocalStorage cho đến khi nó được gửi

Các trang web tĩnh thường sử dụng LocalStorage để lưu trữ các tùy chọn của người dùng, chẳng hạn như chủ đề giao diện người dùng. Không có máy chủ web và cơ sở dữ liệu để lưu tùy chọn người dùng, LocalStorage cho phép họ tiếp tục sử dụng trang web của bạn với các tùy chỉnh của họ

Tuy nhiên, không nên sử dụng LocalStorage cho lượng dữ liệu lớn. Ngoài giới hạn 5 MB có thể không đủ cho các ứng dụng sử dụng nhiều dữ liệu, dữ liệu lớn còn làm giảm hiệu năng khi sử dụng LocalStorage

Tất cả các chức năng của LocalStorage đều là hoạt động đồng bộ. Do đó, nếu bạn đang lưu hoặc truy xuất một khối dữ liệu lớn, JavaScript phải hoàn thành thao tác LocalStorage đó trước khi có thể thực thi mã khác

Hãy lưu ý rằng chi phí hiệu suất tăng lên khi lưu các đối tượng JSON lớn. Các hàm

let techStack = localStorage.getItem["tech"];
console.log[techStack];

50 và

let techStack = localStorage.getItem["tech"];
console.log[techStack];

54 cũng đồng bộ. Họ sẽ chặn thực thi JavaScript cho đến khi hoàn tất

Không bao giờ lưu trữ thông tin nhạy cảm trong LocalStorage. Điều này bao gồm mật khẩu, Khóa API, mã thông báo xác thực như JWT và thông tin tài chính như số thẻ tín dụng, v.v.

Hãy nhớ rằng mọi tệp JavaScript được tải trên miền của bạn đều có quyền truy cập vào LocalStorage. Nếu mã JavaScript độc hại được thêm bởi bạn hoặc những người phụ thuộc của bạn, họ có thể truy xuất dữ liệu người dùng hoặc mã thông báo mà bạn sử dụng để xác thực bằng API

Luôn giữ dữ liệu nhạy cảm ở back-end

Phần kết luận

LocalStorage là kho dữ liệu có sẵn trên các trình duyệt. Dữ liệu được lưu trữ dưới dạng các cặp chuỗi khóa/giá trị và mỗi miền có quyền truy cập vào LocalStorage của nó

Khi lưu trữ các đối tượng JavaScript, hãy đảm bảo chuyển đổi chính xác chúng thành một chuỗi có

let techStack = localStorage.getItem["tech"];
console.log[techStack];

50 trước khi lưu. Khi bạn truy xuất dữ liệu, hãy chuyển đổi chúng thành một đối tượng với

let techStack = localStorage.getItem["tech"];
console.log[techStack];

54

Khi sử dụng LocalStorage, tránh xử lý lượng lớn dữ liệu vì nó có thể làm giảm hiệu suất do các chức năng của nó là đồng bộ. Quan trọng nhất, hãy chắc chắn rằng không có dữ liệu ứng dụng hoặc người dùng nhạy cảm nào được lưu trữ trong LocalStorage

Dữ liệu được lưu trữ trong tệp HTML như thế nào?

Dữ liệu lưu trữ cục bộ HTML là gì?

Dữ liệu được lưu trữ trong localStorage như thế nào?

HTML5 có bộ nhớ cục bộ không?