Local Storage là gì đang là câu hỏi đang được quan tâm của nhiều người dùng. Lưu trữ cục bộ là một trong những kỹ thuật lưu trữ ứng dụng khách thú vị được sử dụng tương đối phổ biến trong các trang web HTML5. Trong bài đăng hôm nay, tôi sẽ hướng dẫn bạn quy trình giải mã kỹ thuật này, cùng với những điều bạn cần biết để sử dụng bộ nhớ cục bộ một cách an toàn.
Mục lục
Local storage là gì?
Hãy cùng đi tìm hiểu định nghĩa của local storage là gì nhé! Lưu trữ cục bộ hay còn gọi là local storage là một tính năng mới được giới thiệu cho HTML5, cho phép bạn lưu trữ dữ liệu cục bộ trên máy khách thông qua JavaScript.
Dữ liệu được lưu trữ trong Bộ nhớ cục bộ được lưu trữ theo cặp khóa-giá trị và không có ngày hết hạn, nghĩa là mọi thứ sẽ được giữ lại ngay cả sau khi đóng cửa sổ trình duyệt.
Các tính năng của máy khách Local Storage là gì? Bộ nhớ cục bộ được tạo ra để tăng hiệu suất trang web, vì dữ liệu người dùng không cần phải tải lại liên tục từ máy chủ trong quá trình duyệt web.
![local storage là gì](https://fstorage.vn/wp-content/uploads/2022/12/local-storage-la-gi-2-300x169.webp)
Đặc điểm của Local Storage
Thoạt nhìn vào định nghĩa Local Storage là gì, có thể dễ dàng cho rằng bộ nhớ cục bộ trông không khác lắm so với Cookie, tuy nhiên có một vài điểm khác biệt chính giữa Cookie và Bộ nhớ cục bộ:
- Về kích thước: Cookie chỉ cho phép lưu trữ tối đa 4KB dữ liệu, nghĩa là chỉ những thông tin cơ bản như tên người dùng mới phù hợp. Trong khi đó, Local Storage cho phép tiết kiệm tới 5MB, gấp hàng nghìn lần và do đó cũng có nhiều không gian hơn để lưu trữ dữ liệu.
- Về phạm vi: Local Storage chỉ lưu trữ dữ liệu cục bộ và không chuyển dữ liệu đó trở lại các máy chủ như cookie.
- Về thời lượng: Bộ nhớ cục bộ không cung cấp tính năng tự động hủy dữ liệu đã hết hạn theo mặc định, trong khi bạn có thể đặt thời lượng cho cookie.
Bộ nhớ cục bộ là đồng bộ, nghĩa là nó không thể được truy cập song song, nhưng nó sẽ đáp ứng từng lệnh gọi thực thi theo thứ tự.
![local storage là gì](https://fstorage.vn/wp-content/uploads/2022/12/local-storage-la-gi-3-300x197.png)
Một điểm trừ lớn khác của Local Storage là nó không có phương pháp bảo vệ dữ liệu được lưu trữ trên trình duyệt. Bất kỳ mã javascript nào trong trang web đều có thể truy cập các giá trị được lưu trữ trong bộ nhớ cục bộ.
Về tính năng Local Storage là gì, API và hầu hết những thứ khác Session Storage tương tự như Local Storage, chỉ khác một điểm về thời gian tồn tại của dữ liệu, trong đó:
- Local Storage: lưu dữ liệu vĩnh viễn cho đến khi người dùng xóa dữ liệu.
- Session Storage: lưu trữ dữ liệu tạm thời cho đến khi người dùng đóng trình duyệt
Session Storage lưu trữ dữ liệu riêng biệt cho từng tab khác nhau, khi bạn mở một tab và tiếp tục mở một tab mới. Hai tab này sẽ có dữ liệu cục bố hoàn toàn riêng biệt và không thể sử dụng chung dữ liệu của Local Storage.
Các phương thức chính trong Local Storage
Kiểm tra xem trình duyệt có hỗ trợ LocalStorage không – typeof()
Thực hành với Local Storage sẽ có 2 thao tác chính là gán và lấy dữ liệu. Để đảm bảo rằng trình duyệt của bạn hỗ trợ Local Storage, chỉ cần so sánh phiên bản trình duyệt của bạn với phiên bản được hỗ trợ ở trên.
Thực hành xem Local Storage bằng trình duyệt
Cách này khá đơn giản, bạn chỉ cần thực hiện các bước sau để xem LocalStorage trên trình duyệt:
Nhấn tổ hợp Ctrl + shift + i hoặc F12 (một số laptop sẽ là Fn + F12 để có thể thực hiện chức năng nút F12).
Truy cập tab Ứng dụng.
Trên thanh menu của Tab Ứng dụng, bạn tìm thấy Bộ nhớ cục bộ.
![local storage là gì](https://fstorage.vn/wp-content/uploads/2022/12/local-storage-la-gi-4-300x161.png)
Thêm dữ liệu vào LocalStorage – setItem()
Trong đó:
$key là tên khóa của dữ liệu bạn cần thêm vào.
$value là giá trị của khóa.
Khi bạn tạo một khóa mới và khóa đó đã tồn tại trong LocalStorage, giá trị của khóa sẽ bị ghi đè.
Ví dụ phím meomeo mình sẽ gán là Cat’s Voice.
Nhận dữ liệu trong LocalStorage – getItem()
Giá trị $key ở đây là tên của khóa lcs mà bạn muốn lấy.
![Nhận dữ liệu trong LocalStorage – getItem()](https://fstorage.vn/wp-content/uploads/2022/12/local-storage-la-gi-5-300x169.png)
Kiểm tra số lượng LocalStorage đã lưu trong trình duyệt- length()
Xóa dữ liệu trong LocalStorage – removeItem()
Xóa tất cả dữ liệu trong LocalStorage – clear()
Bạn muốn xóa tất cả LocalStorage có trong trình duyệt? Bạn chỉ cần sử dụng clear() để thổi bay mọi dữ liệu LocalStorage trên trình duyệt. Cú pháp như sau:
LocalStorage.clear()
Có nên sử dụng Local storage?
Local Storage là một tính năng thú vị của HTML5, nhưng có một số lưu ý khi sử dụng nó. Để có cái nhìn tổng quan hơn về Local Storage, hãy cùng điểm qua một số ưu nhược điểm của Local Storage là gì ngay dưới đây:
Ưu điểm
- Dữ liệu do Local Storage thu thập được lưu trữ trong trình duyệt với giới hạn lưu trữ là 5MB, cao hơn cookie (4MB)
- Dữ liệu được lưu trữ bởi bộ nhớ cục bố sẽ không có ngày hết hạn
- Với một dòng mã clear(), bạn có thể xóa tất cả các mục localStorage một cách nhanh chóng
- Dữ liệu Local Storage vẫn tồn tại ngay cả khi đóng cửa sổ trình duyệt, chẳng hạn như các mặt hàng trong giỏ hàng
- Local Storage cũng có lợi thế hơn cookie ở chỗ nó có thể lưu trữ nhiều dữ liệu hơn
Nhược điểm
- Local Storage không nên được sử dụng để lưu trữ thông tin nhạy cảm như tên người dùng và mật khẩu
- Local Storage không bảo mật dữ liệu và nó có thể được truy cập bằng bất kỳ mã nào, vì vậy localStorage không an toàn.
- Sử dụng Local Storage, bạn chỉ có thể lưu trữ tối đa 5MB dữ liệu trên trình duyệt
- Local Storage chỉ lưu trữ dữ liệu trong trình duyệt, không lưu trữ trong cơ sở dữ liệu dựa trên máy chủ
- Local Storage hoạt động đồng bộ, mỗi thao tác trong localStorage thực thi lần lượt, vì vậy không thể cung cấp đồng thời các yêu cầu dữ liệu.
![Có nên sử dụng Local storage?](https://fstorage.vn/wp-content/uploads/2022/12/local-storage-la-gi-7-300x169.jpg)
Một số lưu ý khi sử dụng Local Storage
Không lưu trữ dữ liệu nhạy cảm trên Bộ nhớ cục bộ vì không có biện pháp bảo mật nào được áp dụng. Mặc dù các miền không thể truy cập chéo vào Bộ nhớ cục bộ của nhau, nhưng các cuộc tấn công kịch bản chéo trang vẫn có thể làm lộ mật khẩu hoặc những thứ nhạy cảm khác trong Bộ nhớ cục bộ.
Local Storage không phải là giải pháp thay thế cho cơ sở dữ liệu tại máy chủ vì nó chỉ lưu trữ dữ liệu trên trình duyệt dưới dạng chuỗi, với kích thước giới hạn. Giới hạn 5 MB có thể lớn so với cookie, nhưng để lưu trữ toàn bộ ứng dụng web chạy mà không có máy chủ vẫn còn khá hạn chế. Bộ nhớ cục bộ là đồng bộ, vì vậy không thể cung cấp đồng thời các yêu cầu dữ liệu.
Một trong những đặc điểm của Local Storage là gì. Đó là nó sẽ không tự xóa khi đóng trình duyệt. Vì vậy, nếu bạn muốn hủy dữ liệu sau mỗi phiên, HTML5 cung cấp một phương thức khác gọi là Lưu trữ phiên bản.
![local storage là gì](https://fstorage.vn/wp-content/uploads/2022/12/local-storage-la-gi-8-300x225.jpg)
Session Storage về cơ bản giống như Local Storage nhưng nó chỉ lưu trữ dữ liệu cho một phiên, khiến chúng trở thành những khái niệm hoàn toàn khác nhau và có những cách sử dụng khác nhau.
Bộ nhớ cục bộ là một tính năng hay của HTML5, giúp lưu trữ dữ liệu trong bộ nhớ cache trong trình duyệt dễ dàng hơn và có nhiều không gian hơn cho nhiều mục đích sử dụng. Tuy nhiên, không nên lạm dụng Bộ nhớ cục bộ để lưu trữ thông tin nhạy cảm do những hạn chế về bảo mật.
Kết luận
Hi vọng bài viết đã mang đến cho bạn những thông tin về Local Storage là gì, những đặc điểm, cũng như một số lưu ý khi sử dụng. Hãy tiếp tục theo dõi để cập nhật những công nghệ mới nhất cùng chúng tôi mỗi ngày nhé!
Để tìm hiểu thêm về dịch vụ FStorage, vui lòng liên hệ đến:
Fanpage: https://www.facebook.com/fstorage
Email: [email protected]