LocalStorage là một loại lưu trữ dữ liệu của web storage. Điều này cho phép các trang web và ứng dụng JavaScript lưu trữ và truy cập dữ liệu mà không có bất kỳ ngày hết hạn nào. Điều này có nghĩa là dữ liệu sẽ luôn được duy trì và sẽ không hết hạn. Vì vậy, dữ liệu được lưu trữ trong trình duyệt sẽ khả dụng ngay cả sau khi đóng cửa sổ trình duyệt
Nói tóm lại, tất cả những gì chúng ta có thể nói là localStorage chứa dữ liệu không có ngày hết hạn, dữ liệu này có sẵn cho người dùng ngay cả sau khi đóng cửa sổ trình duyệt. Nó hữu ích theo nhiều cách khác nhau, chẳng hạn như ghi nhớ dữ liệu giỏ hàng hoặc đăng nhập của người dùng trên bất kỳ trang web nào
Trước đây, cookie là tùy chọn duy nhất để ghi nhớ loại thông tin cục bộ và tạm thời này, nhưng giờ đây chúng tôi cũng có localStorage. Bộ nhớ cục bộ có giới hạn lưu trữ cao hơn cookie [5MB so với 4MB]. Nó cũng không được gửi với mọi yêu cầu HTTP. Vì vậy, bây giờ nó là một lựa chọn tốt hơn cho lưu trữ phía máy khách. Một số điểm cần thiết của localStorage cần lưu ý
- localStorage không an toàn để lưu trữ dữ liệu nhạy cảm và có thể được truy cập bằng bất kỳ mã nào. Vì vậy, nó khá không an toàn
- Lợi thế của localStorage so với cookie là nó có thể lưu trữ nhiều dữ liệu hơn cookie. Bạn có thể lưu trữ 5 MB dữ liệu trên trình duyệt bằng localStorage
- localStorage chỉ lưu trữ thông tin trên trình duyệt thay vì trong cơ sở dữ liệu. Do đó, localStorage không thể thay thế cho cơ sở dữ liệu dựa trên máy chủ
- localStorage là đồng bộ, có nghĩa là mỗi thao tác thực hiện lần lượt
Phương pháp lưu trữ cục bộ
LocalStorage cung cấp một số phương pháp để sử dụng nó. Chúng tôi sẽ thảo luận về tất cả các phương thức localStorage này với các ví dụ. Trước đó, tổng quan cơ bản về các phương pháp này như sau
MethodsDescriptionsetItem[] Phương thức này được sử dụng để thêm dữ liệu thông qua khóa và giá trị vào localStorage. getItem[] Nó được sử dụng để tìm nạp hoặc truy xuất giá trị từ bộ lưu trữ bằng khóa. removeItem[] Nó xóa một mục khỏi bộ lưu trữ bằng cách sử dụng phím. clear[] Nó được sử dụng để xóa tất cả bộ nhớMỗi phương thức này được sử dụng với từ khóa localStorage kết nối với dấu chấm [. ] nhân vật. Ví dụ. lưu trữ cục bộ. thiết lập các mục[]
Làm theo một số mã đã cho, được sử dụng để thêm, truy xuất, xóa và xóa dữ liệu trong localStorage. Sử dụng chúng trong mã của bạn cho phù hợp bất cứ khi nào cần thiết. Bạn cần một cặp khóa-giá trị để thêm một số dữ liệu vào localStorage. Vì vậy, đặt khóa là thành phố và giá trị của nó là Noida, tôi. e. , Chìa khóa. giá trị = thành phố. noida
Thêm dữ liệu
Để thêm dữ liệu vào localStorage, cả khóa và giá trị đều được yêu cầu chuyển vào hàm setItem[]
Khôi phục dữ liệu
Nó chỉ yêu cầu khóa để truy xuất dữ liệu từ bộ lưu trữ và một biến JavaScript để lưu trữ dữ liệu được trả về
Xóa dữ liệu
Nó cũng chỉ yêu cầu khóa để xóa giá trị được đính kèm với nó
Xóa bộ nhớ cục bộ
Đây là một hàm clear[] đơn giản của localStorage, được sử dụng để xóa tất cả dữ liệu localStorage
Giới hạn của localStorage
Vì localStorage cho phép lưu trữ dữ liệu cục bộ, tạm thời, dữ liệu này vẫn còn ngay cả sau khi đóng cửa sổ trình duyệt, nhưng nó cũng có một số hạn chế. Dưới đây là một số hạn chế của localStorage được đưa ra
- Không lưu trữ thông tin nhạy cảm như tên người dùng và mật khẩu trong localStorage
- localStorage không có bảo vệ dữ liệu và có thể được truy cập bằng bất kỳ mã nào. Vì vậy, nó khá không an toàn
- Bạn chỉ có thể lưu trữ tối đa 5 MB dữ liệu trên trình duyệt bằng localStorage
- localStorage chỉ lưu trữ thông tin trên trình duyệt không có trong cơ sở dữ liệu dựa trên máy chủ
- localStorage là đồng bộ, có nghĩa là mỗi thao tác thực hiện lần lượt
Lợi thế của localStorage
LocalStorage đã đi kèm với một số lợi thế. Ưu điểm đầu tiên và thiết yếu của localStorage là nó có thể lưu trữ dữ liệu tạm thời nhưng hữu ích trong trình duyệt, dữ liệu này vẫn còn ngay cả sau khi đóng cửa sổ trình duyệt. Dưới đây là danh sách một số ưu điểm
- Dữ liệu do localStorage thu thập được lưu trữ trong trình duyệt. Bạn có thể lưu trữ 5 MB dữ liệu trong trình duyệt
- Không có ngày hết hạn của dữ liệu được lưu trữ bởi localStorage
- Bạn có thể xóa tất cả mục localStorage bằng một mã dòng duy nhất, tôi. e. , thông thoáng[]
- Dữ liệu localStorage vẫn tồn tại ngay cả sau khi đóng cửa sổ trình duyệt, chẳng hạn như các mặt hàng trong giỏ hàng
- Nó cũng có lợi thế hơn cookie vì nó có thể lưu trữ nhiều dữ liệu hơn cookie
Tính tương thích của trình duyệt web
LocalStorage đã chỉ định trong HTML 5, được hỗ trợ bởi một số trình duyệt, như Chrome. Dưới đây là danh sách các trình duyệt khác nhau và các phiên bản của chúng hỗ trợ JavaScript localStorage
Trình duyệtMã JavaScript để kiểm tra tính tương thích của trình duyệt
Với sự trợ giúp của ví dụ mã bên dưới, bạn có thể kiểm tra khả năng tương thích của trình duyệt. Sử dụng mã này trong mọi chương trình localStorage của bạn để kiểm tra tính tương thích của trình duyệt trước khi thêm hoặc xóa thứ gì đó khỏi localStorage
đầu ra
Thí dụ
Đây là một ví dụ cơ bản về việc thêm khóa và giá trị vào localStorage và truy xuất lại bằng khóa. Xem mã bên dưới cách hoạt động của các phương thức localStorage
Kiểm tra nó ngay bây giờđầu ra
Thêm ví dụ
Đó là một ví dụ để đếm số lần nhấp vào nút có nghĩa là nó sẽ đếm số lần người dùng nhấp vào nút. Trong ví dụ này, chúng tôi sẽ tạo hai nút, một nút để đếm số lần nhấp của người dùng và một nút khác để xóa dữ liệu lần nhấp đó
Kiểm tra nó ngay bây giờĐầu ra 1
Trong kết quả bên dưới, bạn có thể thấy rằng chúng tôi đã nhấp vào nút Nhấp để đếm 9 lần
Đầu ra 2
Bây giờ hãy đóng tab cửa sổ và mở lại để chạy lại mã. Một lần nữa, nhấp vào nút Click to Count, nó sẽ bắt đầu đếm từ 10 nơi bạn rời đi
Đầu ra 3
Bây giờ, hãy nhấp vào nút Clear Count để xóa dữ liệu được lưu trữ. Khi bạn bấm lại vào nút Bấm để đếm, nó sẽ lại bắt đầu bằng 1
Xóa tất cả hồ sơ
Phương thức Clear[] của localStorage dùng để xóa toàn bộ dữ liệu lưu trữ. Khi phương thức này gọi, nó sẽ xóa tất cả các bản ghi cho miền đó khỏi bộ lưu trữ. Nó không chứa bất kỳ tham số nào. Xem cú pháp để xóa localStorage
Hoặc là
Chúng tôi sẽ sử dụng mã rõ ràng này trong ví dụ dưới đây
Kiểm tra localStorage
Trên bảng điều khiển JavaScript, bạn có thể kiểm tra xem có gì trong bộ nhớ cục bộ bằng cách nhập lệnh localStorage trên đó. Ngay cả khi không có gì trong localStorage, nó vẫn có độ dài = 0 bên trong nó