Ví dụ javascript lưu trữ cục bộ

Với quá nhiều nhược điểm như vậy thì nên dùng cái nào thay thế đây. Dưới đây là một số phương pháp thay thế cho bạn

Cảm ứng dữ liệu

Nếu bạn cần lưu trữ định dạng này, thì bạn nên sử dụng phiên phía máy chủ. Nó bao gồm

Ví dụ javascript lưu trữ cục bộ
Ví dụ javascript lưu trữ cục bộ

  • ID người dùng
  • ID phiên
  • JWT
  • Thông tin cá nhân
  • Thông tin thẻ tín dụng
  • khóa API
  • Và những thứ bạn không muốn chia sẻ công khai trên Facebook

Nếu bạn cần lưu trữ thông tin cảm ứng, đây là cách bạn nên làm

  • Khi một người dùng đăng nhập vào trang web của bạn, hãy tạo một số nhận dạng phiên và lưu trữ nó trên một cookie. Nếu bạn đang sử dụng khung web, hãy tìm “cách tạo phiên người dùng bằng cookie” và làm theo hướng dẫn
  • Đảm bảo rằng bất kỳ thư viện cookie nào của web framework bạn sử dụng đều có httpOnly cờ cookie. Cờ này làm cho trình duyệt không thể đọc cookie, để sử dụng toàn bộ phiên phía máy chủ bằng cookie
  • Đảm bảo rằng thư viện cookie cũng có cờ cookie cài đặt SameSite=strict (để tránh bị tân công CSRF), như cờ secure=true ( đảm bảo cookie chỉ được cài đặt thông qua kết nối được mã hóa)
  • Cứ mỗi lần người dùng gửi yêu cầu đến trang web của bạn, sử dụng ID phiên của họ (trích xuất từ ​​​​cookie họ gửi) để lấy chi tiết tài khoản hoặc từ cơ sở dữ liệu hoặc từ bộ đệm (phụ thuộc vào mức độ lớn của trang web)
  • Một khi bạn lấy được thông tin tài khoản của người dùng, bạn có thể lấy bất kỳ dữ liệu kỳ lạ nào bằng nó

Mẫu này rất đơn giản, trực tiếp và quan trọng nhất là. chắc chắn. Và bạn vẫn có thể mở rộng quy mô trang web sử dụng mẫu này. Đừng nói rằng tôi các JWT “nhanh” và “độc lập” và bạn phải sử dụng bộ nhớ cục bộ để lưu trữ chúng. you sai rồi

Dữ liệu không phải chuỗi

Nếu bạn cần lưu trữ dữ liệu trong trình duyệt mà không có cảm ứng và không có chuỗi thuần, thì lựa chọn tốt nhất cho bạn là IndexedDB. Đây là một API để bạn làm việc với đối tượng thuộc cơ sở dữ liệu lưu trữ trong trình duyệt

Điều tuyệt vời về IndexedDB là có thể sử dụng nó để lưu trữ thông tin loại. số nguyên, float, v.v. Bạn có thể xác định các khóa chính, xử lý lập chỉ mục và tạo giao dịch để ngăn chặn sự cố hợp nhất dữ liệua

Bạn có thể xem nhiều hướng dẫn về IndexedDB trên hướng dẫn của Google này

Dữ liệu ngoại tuyến

Nếu bạn muốn ứng dụng chạy ngoại tuyến, tùy chọn tốt nhất đó là sử dụng kết hợp của IndexedDB và Cache API (một phần của Service worker)

Cache API allow you cache tài nguyên mạng mà ứng dụng cần tải

Bạn có thể xem nhiều hướng dẫn về Cache API trên hướng dẫn của Google này

cuối cùng

Ví dụ javascript lưu trữ cục bộ
Ví dụ javascript lưu trữ cục bộ

Bây giờ sau khi đã nói về bộ nhớ cục bộ, tôi hi vọng bạn đã hiểu tại sao bạn không nên sử dụng cái đó nữa

Bạn vẫn có thể sử dụng nó để lưu trữ thông tin công khai chắc chắn

  • Thông tin không quá cảm ứng
  • Không sử dụng cho các ứng dụng lớn
  • Không lớn hơn quá 5MB
  • như dữ liệu chuỗi

Còn lại thì làm ơn đừng sử dụng bộ nhớ cục bộ. Use tool true for each target

Và bất kể bạn làm gì, đừng lưu trữ thông tin phiên (như JSON Web Tokens) trong bộ nhớ cục bộ. Đây là một điều rất tồi tệ và sẽ đưa bạn đến hàng loạt cuộc tấn công có thể ảnh hưởng nghiêm trọng đến người dùng

Bộ nhớ cục bộ là một tính năng mới được trang bị cho HTML5, cho phép bạn lưu trữ bộ dữ liệu cục bộ trên máy khách thông qua JavaScript. Dữ liệu được lưu trong Bộ nhớ cục bộ được lưu theo cặp khóa-giá trị và không có thời hạn, có nghĩa là mọi thứ vẫn sẽ được lưu lại kể cả khi cửa sổ duyệt đã đóng

Các tính năng bộ nhớ đệm máy khách như Local Storage được tạo ra để tăng hiệu suất trang web, khi dữ liệu người dùng không cần phải tải xuống từ máy chủ liên tục trong quá trình duyệt web

Ví dụ javascript lưu trữ cục bộ

Bộ nhớ cục bộ là một tính năng mới được trang bị cho HTML5

Đặc điểm của Bộ nhớ cục bộ

Nhìn lướt qua định nghĩa, rất dễ để cho rằng Local Storage có vẻ không khác lắm so với Cookie, tuy nhiên có một vài điểm khác biệt lớn giữa Cookie và Local Storage

  • Về kích thước, Cookie chỉ cho phép lưu trữ đến 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 lưu tới 5MB, nhiều hơn hàng nghìn lần và do đó cũng có nhiều không gian hơn để lưu vào bộ nhớ đệm dữ liệu
  • Về phạm vi, Bộ nhớ cục bộ chỉ lưu bộ dữ liệu cục bộ mà không chuyển về các máy chủ dưới dạng cookie
  • Về thời hạn, Bộ nhớ cục bộ không cung cấp tính năng mặc định tự động hủy dữ liệu hết thời hạn, trong khi bạn có thể đặt thời hạn cho cookie

Bộ nhớ cục bộ có tính đồng bộ (đồng bộ), nghĩa là không thể truy cập bài hát mà nó sẽ trả lời từng lời gọi thực thi theo thứ tự

Một điểm trừ lớn khác của Local Storage là nó không có bất kỳ phương thức nào để bảo vệ dữ liệu đã lưu trên trình duyệt. Bất kỳ đoạn mã javascript nào trong trang web cũng có thể truy cập các giá trị được lưu trữ trong Bộ nhớ cục bộ

Ví dụ javascript lưu trữ cục bộ

Bộ nhớ cục bộ có tính đồng bộ (đồng bộ)

Bộ lưu trữ cục bộ hoạt động như thế nào?

Local Storage cung cấp 5 phương thức để quản lý việc lưu dữ liệu cho các ứng dụng web

thiết lập các mục()

Đây là phương thức để thêm cặp giá trị khóa-giá trị vào bộ nhớ cục bộ. Phần khóa là tên đối tượng được sử dụng để truy cập, trong khi giá trị chỉ có thể lưu trữ giá trị là một chuỗi. Ví dụ

cửa sổ. lưu trữ cục bộ. setItem('tên', 'Harry Potter');

Nếu muốn lưu trữ một đối tượng, bạn chỉ cần chuyển nó về dạng chuỗi JSON thông qua phương thức thuộc JSON. stringify() của JavaScript

const người = {

Tên. "Harry Potter",

vị trí. "Hogwarts",

}

cửa sổ. lưu trữ cục bộ. setItem('người dùng', JSON. stringify(người));

getItem()

getItem() nhận khóa và trả về giá trị tương ứng của đối tượng đã lưu trong Bộ nhớ cục bộ của trình duyệt. Ví dụ sau

cửa sổ. lưu trữ cục bộ. getItem('người dùng');

Will return string "{"name". "Harry Potter","địa điểm". "Hogwarts"}"

To convert this string about this object to use,ta has a command JSON. phân tích cú pháp ()

JSON. phân tích cú pháp (cửa sổ. lưu trữ cục bộ. getItem('người dùng'));

loại bỏ mục()

Lệnh removeItem() nhận tham số là khóa và nó sẽ xóa đối tượng tương ứng khỏi Bộ nhớ cục bộ. cú pháp

cửa sổ. lưu trữ cục bộ. removeItem('tên');

Sẽ xóa đối tượng có khóa là ‘tên’ khỏi bộ nhớ

thông thoáng()

Lệnh này sẽ xóa toàn bộ Bộ lưu trữ cục bộ được tạo bởi trang web hiện tại

Chìa khóa()

Lệnh này nhận tham số là chỉ mục và trả về tên khóa của đối tượng có chỉ mục tương ứng trong Bộ nhớ cục bộ. key() thường được sử dụng để duyệt qua toàn bộ đối tượng trong Bộ nhớ cục bộ

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

localStorage là một tính năng thú vị của HTML5, tuy nhiên cũng có một số lưu ý khi sử dụng. Để có cái nhìn tổng thể quan trọng hơn về localStorage, hãy điểm qua một số điểm ưu và nhược điểm của nó ngay dưới đây

Ưu điểm của localStorage

  • Dữ liệu do localStorage thu thập được lưu trữ trong trình duyệt với giới hạn lưu trữ 5MB, cao hơn cookie (4MB)
  • Dữ liệu được lưu trữ bởi localStorage không có ngày hết hạn
  • Với một dòng mã rõ ràng nhất (), bạn có thể xóa tất cả các mục localStorage nhanh chóng
  • LocalStorage data vẫn tồn tại lâu kể cả khi đóng cửa sổ duyệt, còn hạn như các mặt hàng trong thùng hàng
  • localStorage cũng có lợi hơn cookie ở chỗ nó có thể lưu trữ nhiều dữ liệu hơn

Un mode of localStorage

  • localStorage không nên sử dụng để lưu trữ thông tin cảm ứng như tên người dùng và mật khẩu
  • localStorage 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 localStorage, bạn chỉ có thể lưu trữ tối đa 5 MB dữ liệu trên trình duyệt
  • localStorage chỉ lưu trữ dữ liệu trong trình duyệt, không phải trong cơ sở dữ liệu dựa trên máy chủ
  • localStorage đồng bộ hoạt động, mỗi hoạt động trong localStorage thực hiện lần cuối, do đó không thể trả lời ứng dụng đồng thời các yêu cầu dữ liệu

Các trình duyệt hỗ trợ localStorage

Bộ nhớ cục bộ được hỗ trợ bởi một số trình duyệt. Dưới đây là danh sách các trình duyệt và các phiên bản hỗ trợ JavaScript localStorage

Ví dụ javascript lưu trữ cục bộ

Những 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ộ, không có phương thức bảo mật nào được áp dụng. Mặc dù các tên miền không thể truy cập chéo Local Storage của nhau, các cuộc tấn công cross-site scripting vẫn có thể tạo mật khẩu hoặc các cảm ứng phụ trong Local Storage bị lộ.
  • Bộ nhớ cục bộ không phải giải pháp thay thế Cơ sở dữ liệu tại máy chủ do nó chỉ lưu 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 5MB có thể lớn nếu có cookie nhưng để lưu vào bộ nhớ cache nguyên một ứng dụng web chạy không cần máy chủ thì vẫn khá giới hạn
  • Bộ nhớ cục bộ là đồng bộ, do đó không thể trả lời các yêu cầu dữ liệu đồng thời

Ví dụ javascript lưu trữ cục bộ

Những lưu ý khi sử dụng Local Storage

Bộ nhớ cục bộ so với Bộ nhớ phiên

Một trong những điểm đặc biệt của Bộ nhớ cục bộ là nó không tự động xóa khi đóng trình duyệt. Do đó, nếu muốn hủy dữ liệu sau mỗi phiên bản, HTML5 cung cấp một phương thức khác là Lưu trữ phiên. Về cơ bản Session Storage giống như Local Storage nhưng nó chỉ lưu dữ liệu cho một phiên làm việc, khiến chúng là những khái niệm hoàn toàn khác nhau và có mụ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 dữ liệu bộ đệm trên trình duyệt dễ dàng hơn và nhiều không gian hơn cho mục đích sử dụng đa dạng. Tuy nhiên, không nên sử dụng Local Storage để lưu trữ thông tin nhạy cảm do các giới hạn bảo mật

cửa sổ. lưu trữ cục bộ. setItem('tên', 'Harry Potter');

Hi vọng bài viết đã đến cho bạn những thông tin hữu ích, hãy tiếp tục theo dõi BizFly Cloud để cập nhật những công nghệ mới nhất cùng chúng tôi mỗi ngày