Local Storage là gì? Các thao tác cơ bản với Local Storage

Local Storage là gì? Đây là một kỹ thuật client - side caching được sử dụng rộng rãi trong các trang web HTML5, giúp lưu trữ dữ liệu dưới dạng cặp key-value trực tiếp trên trình duyệt của người dùng. Cùng FPT Shop tìm hiểu sâu hơn về nền tảng này cũng như các thao tác thực hiện lệnh trên Local Storage cho người mới bắt đầu nhé!

Local Storage là gì?

Định nghĩa về Local Storage là gì đối với các tín đồ công nghệ ắt hẳn không còn quá xa lạ. Tuy nhiên, với những ai mới tìm hiểu về dữ liệu hay cách lưu trữ dữ liệu thì có lẽ vẫn còn lạ lẫm với cụm từ này. Thực tế, đây là một tính năng được tích hợp sẵn trong trình duyệt web, cho phép lưu trữ và truy cập dữ liệu trực tiếp trên máy tính của người dùng. Hệ thống cũng cung cấp một kho lưu trữ dữ liệu với dung lượng lớn, lên đến 5MB, so với dung lượng của Cookies - một dạng file văn bản nhỏ được lưu trữ trên máy tính của người dùng chỉ rơi vào khoảng 4KB.

Dữ liệu được lưu trữ trong Local Storage là vĩnh viễn, tức là thông tin sẽ không bị xóa sau khi trình duyệt đóng. Tuy nhiên, người dùng vẫn có thể xóa dữ liệu trong Local Storage bằng cách sử dụng lệnh Clear.

Local storage la gi - Hinh 1

Đặc điểm của Local Storage

Khi mới tìm hiểu, việc nhầm lẫn giữa khái niệm Local Storage là gì và Cookies thường xảy ra vì trông cả hai tập tin này không khác nhau là bao. Tuy nhiên, thực chất, đặc điểm của Local Storage có sự khác biệt cực kỳ rõ rệt đối với Cookies như sau:

Về kích thước: Cookie có giới hạn dung lượng lưu trữ chỉ khoảng 4KB, trong khi Local Storage cho phép lưu trữ đến 5MB. Điều này khiến Local Storage giúp người dùng lưu trữ nhiều dữ liệu hơn và hữu ích hơn cho caching dữ liệu.
Về phạm vi: Cookie được gửi đến máy chủ mỗi khi yêu cầu được thực hiện, trong khi Local Storage chỉ lưu trữ dữ liệu trên trình duyệt của người dùng và không cần di chuyển đi xa.
Về thời gian: Cookie được đặt thời gian hết hạn nhưng Local Storage không cung cấp tính năng tự động hủy dữ liệu khi hết hạn.
Về tính đồng bộ: Local Storage hoạt động đồng bộ, nghĩa là hệ thống xử lý các yêu cầu một cách tuần tự và không thể truy cập song song. Trong khi đó, Cookie có thể được truy cập và sử dụng đồng thời từ nhiều yêu cầu khác nhau.

Local storage là gì - hình 3

Ưu, nhược điểm của Local Storage là gì?

Bên cạnh tìm hiểu Local Storage là gì, việc biết được ưu, nhược điểm của tập tin này cũng rất cần thiết để quá trình sử dụng hệ thống cho việc lưu trữ không gặp bất kỳ gián đoạn nào.

Ưu điểm của Local Storage

Local Storage là một API đơn giản, dễ sử dụng để lưu trữ và truy xuất dữ liệu.
Local Storage cho phép lưu trữ đến 5MB dữ liệu, khá lớn so với dung lượng của Cookie. Điều này khá hữu ích cho các ứng dụng web phức tạp.
Dữ liệu trong Local Storage không bị xóa khi trình duyệt đóng mà sẽ được lưu trữ lâu dài trên trình duyệt của người dùng. Dữ liệu sau đó còn có thể được truy cập ở các phiên làm việc khác nhau.
Local Storage cho phép bạn tạo ra các ứng dụng web độc lập mà không cần kết nối mạng. Các dữ liệu và tài nguyên cần thiết có thể được lưu trữ trên trình duyệt và truy cập mà không cần kết nối internet.
Dữ liệu được lưu trữ trên trình duyệt, khiến việc truy xuất trở nên nhanh chóng và không cần phải truy vấn máy chủ. Điều này giúp cải thiện hiệu suất và tốc độ của ứng dụng web.

Nhược điểm của Local Storage

Chỉ hỗ trợ lưu trữ dữ liệu dưới dạng chuỗi (string): Điều này có nghĩa là nếu bạn muốn lưu trữ dữ liệu phức tạp như đối tượng JavaScript, bạn phải chuyển đổi dữ liệu thành chuỗi trước và chuyển đổi trở lại khi truy xuất.
Hoạt động đồng bộ, chỉ có thể thực hiện một thao tác tại một thời điểm: Nếu có nhiều yêu cầu cùng truy cập Local Storage thì sẽ được thực hiện tuần tự. Điều này khiến hiệu suất làm việc bị ảnh hưởng theo hướng tiêu cực.
Chỉ hoạt động trên trình duyệt và không có khả năng tương tác với máy chủ: Nếu bạn muốn tận dụng các tính năng như quá trình nền hoặc thông báo đẩy, Local Storage không thể hỗ trợ.
Không cung cấp bất kỳ cơ chế bảo mật nào. Do đó, bất kỳ mã JavaScript nào trong trang web cũng có thể truy cập và sửa đổi dữ liệu trong Local Storage. Vì vậy, nếu bạn cần lưu trữ thông tin nhạy cảm hoặc quan trọng, Local Storage không phải là một lựa chọn an toàn.

Trình duyệt nào hỗ trợ Local Storage?

Nếu bạn đang thắc mắc về các trang web hỗ trợ Local Storage là gì thì trên thực tế, tập tin này được hỗ trợ bởi hầu hết các trình duyệt hiện nay. Cụ thể như sau:

Local storage là gì - Hinh 2

Chrome: Hỗ trợ đầy đủ từ phiên bản 4 trở lên.
Internet Explorer: Hỗ trợ đầy đủ từ phiên bản 8 trở lên. (Lưu ý: IE8 hỗ trợ Local Storage, nhưng có một số vấn đề về hiệu suất).
Safari: Hỗ trợ đầy đủ từ phiên bản 4 trở lên.
Edge: Hỗ trợ đầy đủ từ phiên bản 12 trở lên.
Firefox: Hỗ trợ đầy đủ từ phiên bản 3.5 trở lên.
Chrome Android: Hỗ trợ đầy đủ từ phiên bản 18 trở lên.
Safari trên iOS: Hỗ trợ đầy đủ từ phiên bản 3.2 trở lên.
Samsung Internet: Hỗ trợ đầy đủ từ phiên bản 1.0 trở lên.
Firefox for Android: Hỗ trợ đầy đủ từ phiên bản 4 trở lên.
WebView Android: Hỗ trợ đầy đủ từ phiên bản 37 trở lên.

Tuy nhiên, vẫn có một số phiên bản trình duyệt cũ hơn hoặc phiên bản di động không hỗ trợ Local Storage hoặc bị hạn chế. Vì vậy, trước khi sử dụng, bạn cần kiểm tra tính tương thích của trình duyệt mục tiêu.

Thực hành thao tác với Local Storage

Các thao tác với Local Storage không quá khó như bạn nghĩ. Dưới đây là một số lệnh cơ bản trên ứng dụng mà bạn có thể tham khảo thực hiện để lưu trữ dữ liệu hiệu quả.

Kiểm tra trình duyệt có hỗ trợ Local Storage hay không bằng mã typeof()

Để kiểm tra xem trình duyệt hiện tại có hỗ trợ Local Storage hay không, bạn có thể sử dụng đoạn mã JavaScript sau:

Local storage là gì - Hình 5

Khi bạn chạy đoạn mã này trong trình duyệt, hệ thống sẽ kiểm tra xem đối tượng Storage có được định nghĩa trong trình duyệt hay không. Nếu được định nghĩa, điều đó có nghĩa là trình duyệt hiện tại có hỗ trợ Local Storage. Ngược lại, nếu không được định nghĩa thì cũng đồng nghĩa với việc trình duyệt không tương thích với Local Storage.

Thực hành xem Local Storage bằng trình duyệt

Bạn cũng có thể sử dụng DevTools trong trình duyệt để xem và thao tác với Local Storage. Dưới đây là các bước để truy cập vào DevTools đơn giản:

Bước 1: Nhấn tổ hợp phím Ctrl + Shift + I (hoặc F12) để mở DevTools. Một cách khác là bạn có thể nhấp chuột phải và chọn Inspect từ menu.
Bước 2: Trong DevTools, chuyển đến tab Application (hoặc Storage trong một số trình duyệt).
Bước 3: Trên thanh bên trái của tab Application (hoặc Storage), bạn sẽ thấy một danh sách các mục, bao gồm Local Storage.
Bước 4: Nhấp vào mục Local Storage để xem danh sách các key - value pairs được lưu trữ trong Local Storage. Bạn có thể thêm, sửa đổi hoặc xóa các mục trong Local Storage từ giao diện DevTools

Lưu ý rằng, giao diện và vị trí của tab Application và Local Storage có thể khác nhau đối với từng trình duyệt.

Thêm dữ liệu vào Local Storage bằng setItem()

Để thêm dữ liệu mới vào Local Storage, bạn có thể sử dụng phương thức setItem() với cú pháp như sau:

local storage là gì - hình 6

Với ví dụ trên, chúng ta kiểm tra xem trình duyệt có hỗ trợ Local Storage hay không. Nếu có, chúng ta sử dụng phương thức setItem() để thêm một cặp key - value mới vào Local Storage. Key là 'meomeo' và value là 'Tiếng của con mèo'. Nếu trình duyệt không hỗ trợ Local Storage, một thông báo sẽ hiển thị để thông tin đến người dùng.

Lấy một dữ liệu trong Local Storage bằng getItem()

Nếu muốn lấy một dữ liệu trong Local Storage, bạn có thể sử dụng phương thức getItem() với lệnh như sau:

local storage là gì - hình 7

Trong ví dụ được nêu ra, chúng ta cũng sẽ tiến hành kiểm tra xem trình duyệt có hỗ trợ Local Storage hay không trước. Nếu có, phương thức getItem() sẽ được sử dụng để lấy giá trị của key 'meomeo' từ Local Storage và gán vào biến data. Sau đó, chúng ta hiển thị giá trị đó trong một thông báo. Nếu trình duyệt không hỗ trợ Local Storage, thông tin tự động hiển thị cho người dùng.

Xóa dữ liệu trong LocalStorage bằng removeItem()

Trong trường hợp muốn xóa một giá trị duy nhất từ Local Storage, bạn có thể sử dụng phương thức removeItem() như sau:

local storage là gì - hình 8

Lời kết

Hy vọng bài viết này đã đem đến cho bạn những thông tin hữu ích về Local Storage là gì, ưu, nhược điểm và các thao tác đơn giản trên ứng dụng này. Dù Local Storage vẫn còn tồn tại nhiều nhược điểm và không có tính bảo mật cao nhưng tập tin này vẫn rất hữu dụng cho những ai muốn lưu trữ dữ liệu ở dung lượng lớn và muốn tối ưu hóa hiệu suất làm việc.

Xem thêm:

Bạn cần tìm các sản phẩm của Apple như điện thoại, máy tính, hãy ghé FPT Shop nhé, nơi đây luôn cung cấp đầy đủ các thiết bị điện tử với chất lượng và giá cả hợp lý, phục vụ mọi nhu cầu của bạn.

Iphone