Hướng dẫn localstorage nodejs - localstorage nodejs
Show
Đã đăng vào thg 9 20, 2019 9:12 SA 3 phút đọc 3 phút đọc Local Storage là gì?Tương tự như cookie, HTML5 hỗ trợ LocalStorage là một loại lưu trữ web cho phép các trang web và ứng dụng Javascript lưu trữ và truy cập dữ liệu ngay trong trình duyệt mà không có ngày hết hạn. Hay dữ liệu được lưu trữ trong trình duyệt sẽ tồn tại ngay cả sau khi cửa sổ trình duyệt đã bị đóng, Dữ liệu chỉ mất khi bạn sử dụng chức năng clear history của trình duyệt, hoặc bạn sử dụng localStorage API để xóa Hạn chế của LocalStorage
5MBKiểm tra LocalStorage Thông qua dev tool ta có thể vào tab Application và kiểm tra Local Storage của trang hiện tại ( Chrome)
Để sử dụng LocalStorage, ta sẽ có 4 method chính: setItem(): Gán dữ liệu vào LocalStorage getItem(): Lấy ra dữ liệu từ LocalStorage removeItem(): Xóa dữ liệu khỏi LocalStorage clear(): Xóa toàn bộ dữ liệu của LocalStorage
Khi cần sử dụng chỉ cần JSON.parse() để convert về giá trị ban đầu.
Để lấy ra được dữ liệu trong localStorage của trình duyệt ta dùng method: localStorage.setItem('list_departments', JSON.stringify([1,2])) 6
Để xóa 1 item khỏi localStorage ta sẽ sử dụng method: removeItem()
Để xóa toàn bộ các dữ liệu trong LocalStorage của domain hiện tại.Tổng kết: Thông qua bài viết mình mong rằng mọi người có thể có cái nhìn tổng quát về Local Storage cũng như các kiến thức cơ bản để có thể sử dụng Locak Storage đúng cách. M.n nếu thắc mắc, góp ý hoặc chia sẽ thêm những kiến thức liên quan có thể comment bên dưới nhé. Cảm ơn các bạn đã đọc. Api LocalStorage cho phép web dev lưu dữ liệu dưới dạng key-value trên máy của user. Việc lưu dữ liệu như vậy sẽ giúp cải thiện performance khi mà số lượng request database phía server được giảm đi, từ đó giảm chi phí hạ tầng server. Trước khi có sự ra đời của LocalStorage, các dev khi muốn lưu dữ liệu trên client thường cần đến cookies của trình duyệt. Cách làm này có một số nhược điểm, cụ thể như cookie chỉ có thể lưu tối đa 4,096 bytes dữ liệu và cookie luôn được gửi đến server khi client gửi request dẫn đến tăng kích thước của request, lượng băng thông sử dụng cao, thời gian request lâu hơn. Trong bài viết này, chúng ta sẽ cũng tìm hiểu về việc ứng dụng LocalStorage trong việc lưu dữ liệu của web app. 1. Kiểm tra xem trình duyệt có hỗ trợ LocalStorage hay khôngViệc đầu tiên là kiểm tra xem liệu trình duyệt web mục tiêu có hỗ trợ LocalStorage hay không, nếu không, ta cần cung cấp fallbacks. Đoạn code bên dưới giúp chúng ta xác định điều này
Trường hợp trình duyệt không hỗ trợ LocalStorage bạn có thể lưu dữ liệu bằng cookie hoặc gửi dữ liệu đó lên server và lưu tại server. 2. Lưu dữ liệu vào datastoreĐể lưu dữ liệu, ta dùng hàm setItem() với 2 parameter key và value.
Bây giờ chúng ta thử dùng localStorage để lưu thông tin mà người dùng nhập vào form trong ví dụ dưới đây.
Chúng ta có thể listent event form submit và lưu tên người dùng vào datastore. 3. Lấy dữ liệu ra từ datastoreĐể lấy dữ liệu ta dùng hàm getItem() với parameter duy nhất là key dùng khi lưu dữ liệu đó.
Ví dụ dưới đây lấy tên user từ datastore và hiển thị lên webpage.
4. Xóa dữ liệu khỏi datastoreĐể xóa dữ liệu ta dùng hàm removeItem() với parameter duy nhất là key dùng khi lưu dữ liệu đó. 0Để xóa toàn bộ dữ liệu đã lưu ta dùng hàm clear() 15. Lấy ra keyĐể lấy ra key của dữ liệu trong datastore ta dùng hàm key() với parameter là index của dữ liệu đó trong datastore. Ví dụ sau in ra toàn bộ key, value của item được lưu trong datastore: 26. Sandboxing và giới hạn của storageDữ liệu được lưu trong localStorage được sandbox theo domain name của ứng dụng web. Do đó, ứng dụng web A không thể truy xuất dữ liệu trong datastore của ứng dụng web B và ngược lại. Đây là một tính năng bảo mật quan trọng. Ngay cả sub-domain cũng được coi như một domain name riêng rẽ và tương ứng với nó cũng là một datastore riêng rẽ. Limit của LocalStorage là khác nhau giữa các trình duyệt khác nhau. Để an toàn nhất, ta có thể giả định mỗi webapp có khoảng 2.5 MB bộ nhớ. Vì LocalStorage chỉ dùng lưu data dưới dạng cặp key-value, nên với kích thước bộ nhớ như vậy là quá đủ với một web app thông thường. 7. SessionStorageDữ liệu lưu bằng LocalStorage sẽ luôn tồn tại trên trình duyệt và có thể lấy ra trong tương lai. Trường hợp, dữ liệu chỉ cần lưu trong khoảng thời gian session làm việc của user thì ta có thể lưu nó bằng interface sessionStorage. sessionStorage có đầy đủ đặc điểm của localStorage ngoại trừ việc dữ liệu lưu bằng sessionStorage sẽ tự động bị xóa đi khi user đóng tab của web. 38. Kết luậnCó thể thấy LocalStorage đặc biệt hữu dụng khi cung cấp datastore để lưu trữ dữ liệu ở client. Hi vọng thông qua bài viết các bạn đã có cái nhìn sơ lược về việc sử dụng LocalStorage và có ứng dụng vào trong công việc phát triển web app của mình. Tham khảo Storing Data on The Client with LocalStorage http://blog.teamtreehouse.com/storing-data-on-the-client-with-localstorage |