LocalStorage là gì? 7 thực hiện cơ bản sở hữu LocalStorage

Có siêu nhiều phương pháp để lưu trữ dữ liệu, bên cạnh cookies và session, chúng ta sẽ có thêm 2 khái niệm new là LocalStorage và sessionStorage. Vậy LocalStorage là gì? Và LocalStorage khác gì so sở hữu sessionStorage? Trong bài viết này, TinoHost sẽ giải đáp giúp bạn.

LocalStorage là gì?

LocalStorage là hoạt động lưu dữ liệu ngay trên trình thông qua của người mua. Bạn có thể hiểu rằng, LocalStorage là 1 phần mềm được tích hợp sẵn vào trình thông qua giúp bạn có thể lưu trữ và truy vấn những dữ liệu đấy 1 phương pháp vô thời hạn vào trình thông qua của người mua. Lượng dữ liệu có thể lưu trữ của LocalStorage là tương đối lớn lên tới 5MB (cookies chỉ khoản 4kb).

Thời kì dữ liệu LocalStorage là vô thời hạn, tuy nhiên, người mua vẫn có thể xóa những dữ liệu LocalStorage bằng lệnh clear (TinoHost sẽ chỉ dẫn trong phần tiếp theo).

LocalStorage có ưu điểm và nhược điểm thế nào?

Ưu điểm của LocalStorage

  • LocalStorage là 1 JavaScript thuần, có thể giúp bạn tạo ra 1 internet web page độc lập ngay trên trình thông qua của người mua.
  • LocalStorage phân phối tới 5MB lưu trữ cho gần như những trình thông qua!
  • Nên dùng LocalStorage để chứa những thông tin ko nhạy cảm.

Nhược điểm của LocalStorage

  • LocalStorage ko thể lưu trữ những loại knowledge phức tạp, bạn chỉ có thể lưu trữ cao nhất} trên dạng string.
  • Dung lượng cao nhất} bạn có thể lưu trữ là 5MB cho những trình thông qua, trường hợp bạn dựng những ứng dụng cần nên lưu trữ, xử lí knowledge lớn mà dùng lcs sẽ ko hay nhiều.
  • LocalStorage hoạt động đồng bộ và chỉ hoạt động 1 lần trong 1 thời điểm lúc native storage operation.
  • Ví dụ bạn có dự định dựng 1 app để tận dụng quy trình nền nhằm nâng cao hiệu suất, những Chrome Extension,… Bạn sẽ ko thể làm cho được vì LocalStorage ko hoạt động sở hữu internet server.
  • Bảo mật siêu kém! Bất kỳ 1 JavaScript nào của bạn cũng có thể truy cập vào LocalStorage. 1 phương pháp nói khác: LocalStorage hoàn toàn ko có 1 phương pháp gì để bảo vệ knowledge!
Xem Thêm  Bí quyết đăng ký bán hàng trên GrabFood – “Cách” khiến giàu cho chủ nhà hàng, quán ăn

SessionStorage là gì?

Về tính năng, API và gần như những thứ khác sessionStorage tương tự động như LocalStorage, chỉ duy nhất 1 điểm về thời kì tồn tại của dữ liệu là khác nhau, trong đấy:

  • LocalStorage: lưu dữ liệu vĩnh viễn cho tới lúc người mua xóa dữ liệu.
  • sessionStorage: lưu dữ liệu tạm thời cho tới lúc người mua đóng trình thông qua

sessionStorage lưu trữ dữ liệu biệt lập cho từng tab khác nhau, lúc bạn mở 1 tab và tiếp tục mở 1 tab new lên. 2 tab này sẽ có dữ liệu hoàn toàn biệt lập và ko thể dùng chung dữ liệu.

Trình thông qua nào tương trợ LocalStorage?

Ko nên bất cứ 1 trình thông qua nào cũng tương trợ LocalStorage, bạn có thể tham khảo những phiên bản trình thông qua có tương trợ toàn bộ cho LocalStorage tại đây:

  • Chrome tương trợ toàn bộ cho phiên bản: 4 trở lên.
  • Edge tương trợ toàn bộ cho phiên bản: 12 trở lên.
  • Firefox tương trợ toàn bộ cho phiên bản: 3.5 trở lên.
  • Web Explorer tương trợ toàn bộ cho phiên bản: 8 trở lên.
  • Opera tương trợ toàn bộ cho phiên bản: 10.5 trở lên.
  • Safari tương trợ toàn bộ cho phiên bản: 4 trở lên.
  • WebView Android tương trợ toàn bộ cho phiên bản: 37 trở lên.
  • Chrome Android tương trợ toàn bộ cho phiên bản: 18 trở lên.
  • Firefox for Android tương trợ toàn bộ cho phiên bản: 4 trở lên.
  • Opera Android tương trợ toàn bộ cho phiên bản: 11 trở lên.
  • Safari trên iOS tương trợ toàn bộ cho phiên bản: 3.2 trở lên.
  • Samsung Web tương trợ toàn bộ cho phiên bản: 1.0 trở lên.
Xem Thêm  Bí quyết thiết kế Mockup on-line miễn chi phí bằng những web site tương trợ 5 2023

Thực hành thực hiện sở hữu LocalStorage

Đánh giá trình thông qua có tương trợ LocalStorage hay ko – typeof()

Thực hành thực hiện sở hữu LocalStorage sẽ có 2 thực hiện chính bao gồm gán và lấy dữ liệu. Để đảm bảo rằng trình thông qua của bạn có tương trợ LocalStorage hay ko, bạn chỉ cần so sánh phiên bản trình thông qua của mình sở hữu phiên bản tương trợ bên trên.

Hoặc bạn dùng đoạn code sau để đánh giá xem trình thông qua hiện tại của bạn có tương trợ LocalStorage hay ko:

if (typeof(Storage) !== “undefined”) { // Có tương trợ LocalStorage } else { // Ko tương trợ LocalStorage }

Thực hành xem LocalStorage bằng trình thông qua

Phương pháp thực hành này khá đơn giản, bạn chỉ cần thực hành những bước như sau để xem LocalStorage bằng trình thông qua:

  1. Nhấn tổ hợp Ctrl + shift + i hoặc F12 (1 số máy tính sẽ là Fn + F12 new có thể thực hành chức năng nút F12).
  2. Truy cập vào Tab Software.
  3. Trên bên thanh menu của Tab Software bạn tìm Native Storage.

Thêm dữ liệu vào LocalStorage – setItem()

Bạn có thể thêm new dữ liệu vào LocalStorage bằng setItem() sở hữu cú pháp như sau:

LocalStorage.setItem($key, $worth);

Trong đấy:

  • $key là tên key của dữ liệu bạn cần thêm vào.
  • $worth là giá trị của key.

Lúc bạn tạo 1 key new và key đấy đã tồn tại trong LocalStorage, worth của key sẽ bị ghi đè.

Dí dụ: key meomeo tôi sẽ gán giá trị là Tiếng của con mèo.

Xem Thêm  ITAM sport là gì? Tìm hiểu chi tiết về ITAM sport

if (typeof(Storage) !== ‘undefined’) { LocalStorage.setItem(‘meomeo’, ‘Tiếng của con mèo’); } else { alert(‘LocalStorage ko tương trợ trên trình thông qua này!!’); }

Lấy 1 dữ liệu trong LocalStorage – getItem()

Muốn lấy dữ liệu trong LocalStorage, bạn có thể dùng getItem() sở hữu cú pháp như sau:

LocalStorage.getItem($key);

Giá trị $key trên đây là tên key lcs bạn muốn lấy.

Dí dụ lấy giá trị của key meomeo:

if ( typeof(Storage) !== “undefined”) { var knowledge = LocalStorage.getItem(‘meomeo’); alert(knowledge); } else { alert(LocalStorage ko tương trợ trên trình thông qua này!!’); }

Đánh giá số lượng LocalStorage đã lưu trên trình duyệt- size()

Để đánh giá số lượng LocalStorage đã lưu trên trình thông qua bạn có thể dùng size() sở hữu cú pháp như sau:

LocalStorage.size;

Dí dụ để đếm số lượng:

if ( typeof(Storage) !== “undefined”) { var knowledge = LocalStorage.size; alert(knowledge); } else { alert(LocalStorage ko tương trợ trên trình thông qua này!!’); }

Xóa dữ liệu trong LocalStorage – removeItem()

Để xóa duy nhất 1 giá trị, bạn chỉ cần dùng removeItem() sở hữu cú pháp như sau:

LocalStorage.removeItem($key);

Trong đấy, $key là giá trị mà bạn muốn xóa đi, chúng ta chỉ tạo duy nhất 1 key meomeo. Dí dụ xóa key meomeo:

if ( typeof(Storage) !== “undefined”) { LocalStorage.removeItem(‘meomeo’) alert(‘Đã xóa thành công’); } else { alert(‘LocalStorage ko tương trợ trên trình thông qua này!!’); }

Xóa toàn bộ dữ liệu trong LocalStorage – clear()

Bạn muốn xóa toàn bộ LocalStorage có mặt trong trình thông qua? Bạn chỉ cần dùng clear() để đánh bay toàn bộ dữ liệu LocalStorage trên trình thông qua. Cú pháp như sau:

LocalStorage.clear()

Dí dụ:

if ( typeof(Storage) !== “undefined”) { LocalStorage.clear(); alert(‘Đã xóa thành công’); } else { alert(‘LocalStorage ko tương trợ trên trình thông qua này!!’); }

Bạn đã nắm được LocalStorage là gì, cùng sở hữu những thực hiện thực hành cơ bản sở hữu LocalStorage rồi đúng chứ? Ví dụ bạn đang muốn xây dựng 1 web site và thực hành “quậy phá” sở hữu trang internet của mình, bạn hãy liên lạc ngay sở hữu TinoHost để có được Internet hosting sở hữu giá sinh viên cùng đội ngũ tương trợ 24/7 nhé! Chúc bạn thành công trên con đường lập trình internet!

Bài viết có tham khảo từ ToiDiCode.

Những câu hỏi thường gặp

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Middle, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn chi phí: 1800 6734
  • E mail: gross [email protected]
  • Web site: www.tino.org