Lưu trữ dữ liệu javascript trên máy chủ

Khi nào và như thế nào bạn nên sử dụng LocalStorage, SessionStorage, IndexedDB, Cookies, Thư viện bên thứ ba hoặc Phía máy chủ

Properly store data using JavaScript: 6 questions you need to ask yourself

Ảnh của Adam Nieścioruk trên Bapt

Một trong những vấn đề chính mà bạn sẽ gặp phải trong sự nghiệp phát triển của mình là cách lưu trữ dữ liệu và quan trọng nhất là lưu trữ dữ liệu một cách an toàn

Vài năm trước, bạn chỉ có một vài lựa chọn. cookie hoặc có thể là giải pháp phía máy chủ có thể yêu cầu bạn thiết lập và duy trì cơ sở dữ liệu, quan hệ, cơ sở tài liệu hoặc thậm chí chỉ là một tệp phẳng có quy ước để lưu trữ và truy xuất thông tin

Ngày nay, bạn có thể thêm vào các tùy chọn này linh hoạt hơn nữa. Cơ sở dữ liệu LocalStorage, SessionStorage, IndexedDB, NoSQL, cơ sở dữ liệu trong bộ nhớ (chẳng hạn như Redis hoặc Memcache) hoặc có thể là một bộ chứa dữ liệu giao diện người dùng đơn giản sẽ xóa sạch dữ liệu sau khi người dùng làm mới trình duyệt (hãy nghĩ đến Redux, MobX). Thêm Giải pháp lưu trữ đám mây vào hỗn hợp và bạn sẽ có rất nhiều tuyến đường mà bạn có thể thực hiện

Điều này thúc đẩy một số nhà phát triển (đặc biệt là những người mới bắt đầu) chuyển sang “vui vẻ với công nghệ” và kết hợp các giải pháp không nên được sử dụng cho các trường hợp sử dụng của họ

Vì vậy, làm thế nào để bạn đánh giá một cách có trách nhiệm, an toàn và đúng đắn nên sử dụng giải pháp nào?

Các câu hỏi bạn cần trả lời trước khi thiết lập kiến ​​trúc lưu trữ dữ liệu Front-End của mình

  1. độ trễ. Bạn muốn truy xuất dữ liệu này bao lâu một lần?
  2. Sự riêng tư. Dữ liệu này có thể được công khai mà không bao gồm quyền riêng tư của người dùng không?
  3. Vòng đời. Khi nào thì dữ liệu này hết hạn?
  4. Kích thước. Dữ liệu này lớn đến mức nào?
  5. Dễ sử dụng. Bạn có thể sử dụng giải pháp này ngay lập tức bằng cách sử dụng JavaScript đơn giản không?
  6. Với tới. Tỷ lệ chấp nhận của công nghệ này là gì?

Hãy xem qua một số tùy chọn của chúng tôi và xem xét việc triển khai chúng. Ngoài ra, ở cuối bài viết này, tôi sẽ cung cấp cho bạn một ví dụ về cách triển khai an toàn chiến lược logic lưu trữ nhạy cảm phía máy khách kết hợp với các công cụ phía máy chủ

Lưu trữ cục bộ

Đây là tính khả dụng cao, được lưu trữ trên trình duyệt, dung lượng lưu trữ trung bình, hơi bền

Bạn không muốn lưu trữ bất kỳ dữ liệu riêng tư nào ở đây. không có thông tin thẻ tín dụng, dữ liệu phiên hoặc thông tin mà bạn không muốn có khả năng bị mất

Ngoài ra, hãy xem xét rằng dữ liệu được lưu ở đây sẽ chỉ khả dụng trên mỗi trình duyệt. Có nghĩa là nếu bạn cố truy xuất thông tin này trên một thiết bị khác hoặc thậm chí trong một trình duyệt khác trong cùng một máy tính, bạn sẽ không nhận được thông tin tương tự

Tương tự như vậy, nếu người dùng dọn dẹp kho lưu trữ LocalStorage của mình theo cách thủ công, tất cả dữ liệu được lưu trữ sẽ biến mất

Một trong những nhược điểm của cả Local và SessionStorage là chúng chỉ có thể lưu chuỗi, nghĩa là bạn sẽ không thể lưu dữ liệu phức tạp (đối tượng, JSON, mảng)

Mặt khác, cả hai (Cục bộ và Phiên) đều có tỷ lệ chấp nhận cao, vì phần lớn tất cả các trình duyệt hiện đại đều hỗ trợ chúng và có thể được truy cập bằng vanilla javascript

PhiênStorage

Tương tự như LocalStorage, nó khá giống ngoại trừ thông tin dễ bay hơi hơn, nó sẽ tồn tại cho đến khi người dùng đóng trình duyệt hoặc tab của mình, đây là lý do tại sao nó được gọi là dữ liệu phiên trang

Có khả năng, và không ngạc nhiên, bạn sẽ lưu trữ dữ liệu liên quan đến phiên, chẳng hạn như các mục giao diện người dùng, có thể là lựa chọn sắp xếp mà người dùng đã thực hiện, bộ lọc từ biểu mẫu tìm kiếm

Nói cách khác, thông tin mà bạn sẽ không cần vào lần tiếp theo khi người dùng cụ thể này quay lại trang web của bạn — trừ khi bạn muốn trải nghiệm người dùng luôn nhất quán, trong trường hợp đó, bạn sẽ truy cập LocalStorage hoặc một số loại hồ sơ được lưu trữ

được lập chỉ mụcDB

Một người mới đến, cái này đang thu hút khá nhiều gần đây. Và vì một lý do chính đáng, vì nó tránh được một số cạm bẫy của cả Local và SessionStorage

Trước hết, nó có API kiểu cơ sở dữ liệu sẽ giúp bạn duy trì tính nhất quán khi lưu trữ và truy xuất dữ liệu. Thực hiện lập chỉ mục (bao gồm cả khóa chính), giao dịch và các tính năng tiện lợi khác

Một điểm có lợi khác là nó có thể lưu trữ các loại dữ liệu phức tạp hơn. Vì vậy, không chỉ các chuỗi mà cả các đối tượng, JSON, v.v.

Việc áp dụng cho IndexedDB là tuyệt vời, theo trình duyệt và thiết bị hiện đại, vì vậy bạn có thể yên tâm sử dụng nó

Nếu ứng dụng của bạn cần tận dụng các tình huống khó khăn như kết nối internet kém từ người dùng của bạn, thậm chí hoạt động ngoại tuyến (nghĩ rằng PWA, nhân viên dịch vụ), thì IndexedDB là công cụ phù hợp với bạn

Giới hạn lưu trữ của các mục lớn hơn rất nhiều so với Local và SessionStorage. Tuy nhiên, hãy cân nhắc rằng tải trọng của bạn càng lớn thì sẽ bị phạt về tốc độ và tất nhiên là cả độ phức tạp cho ứng dụng của bạn

Với tất cả những ưu điểm của IndexedDB, chúng ta cũng cần xem xét một số thiếu sót. Đặc biệt, bạn không được quên rằng nó vẫn sẽ lưu trữ thông tin phía máy khách. Nó có vẻ giống như một cơ sở dữ liệu quan hệ thông thường, nhưng dữ liệu không được lưu trữ an toàn. Ngẫu nhiên, có một số lo ngại về việc mã hóa dữ liệu

Bánh quy

Các cookie cũ tốt… Chúng đã xuất hiện từ đầu những năm 90 và cho đến nay, là những cookie có mức độ hỗ trợ lớn nhất trên tất cả các thiết bị và trình duyệt. Cookie bị đánh giá rất thấp, đồng thời, chúng là một trong những mối quan tâm chính khi xem xét các kết quả không ổn định đối với bảo mật trang web

Hạn chế của Cookies bắt đầu với kích thước của chúng. Chúng bị giới hạn ở dung lượng lưu trữ chỉ 4Kb. Ràng buộc này sẽ buộc bạn phải sáng tạo và cân nhắc về cách thức và những gì bạn sẽ lưu trong Cookie

Đồng thời, cookie vẫn được lưu trữ ở phía máy khách và tại bất kỳ thời điểm nào, người dùng máy tính — ngay cả những người không hiểu biết — có thể dễ dàng xóa sạch chúng bằng cách sử dụng cài đặt trình duyệt. Vì vậy, chúng khá dễ bay hơi

Bộ chứa dữ liệu Front-End (Redux, MobX)

Tại thời điểm này, chúng tôi bắt đầu xem xét các giải pháp liên quan đến thư viện của bên thứ ba và bạn sẽ không thể sử dụng chúng nếu không triển khai phần mềm bổ sung

Các giải pháp này cho phép bạn triển khai loại tương tác API mạnh mẽ giữa dữ liệu và chế độ xem ứng dụng của bạn. Các thuật ngữ như “cửa hàng”, “giảm tốc”, “hành động” sẽ tấn công chúng tôi tại đây

Việc sử dụng các khung giao diện người dùng phổ biến như React, Vue, Angular đã thúc đẩy sự phổ biến của các bộ chứa dữ liệu này, mặc dù bạn có thể sử dụng các bộ chứa này mà không cần khung ở giữa. Và điều này mang lại cho chúng ta một lợi thế lớn. họ có tài liệu tuyệt vời, được cập nhật thường xuyên với thế giới thực, không có ứng dụng vô nghĩa

Tất nhiên, một lần nữa, dữ liệu được lưu trữ trong các vùng chứa này rất dễ bay hơi và trừ khi được kết hợp với một kiến ​​trúc khác để liên kết dữ liệu với bộ lưu trữ lâu dài hơn, thì bạn bị hạn chế lưu và truy cập thông tin cho đến khi người dùng làm mới trang hoặc đóng tab

Phải nói rằng, cùng với sự phổ biến của các khung sử dụng chúng, có rất nhiều thư viện của bên thứ ba sẽ giúp bạn lưu trữ dữ liệu này trong bộ lưu trữ của máy khách hoặc cơ sở dữ liệu phía máy chủ

Hạn chế của điều này là, trong số những thứ khác, phần lớn các phụ thuộc mà bạn đang thêm vào dự án của mình, bao gồm cả việc các nhà phát triển đang học các công cụ này tăng tốc và cuối cùng, sự phức tạp ngày càng tăng của toàn bộ dự án của bạn

Công bằng mà nói, điều này sẽ không cản trở việc sử dụng các cửa hàng này. Đôi khi bạn muốn sự phức tạp này. Chúng là những công nghệ đã được sử dụng và đã được chứng minh giúp tận dụng các trang web trị giá hàng triệu đô la với hàng tỷ lượt truy cập hàng năm

Giải pháp phía máy chủ. cơ sở dữ liệu

Những điều này (và mục tiếp theo, Giải pháp đám mây) có thể nằm ngoài phạm vi của bài viết này, nhưng không nên tránh đề cập đến. Trên thực tế, nhiều giải pháp đã nêu ở trên sẽ được trao quyền đáng kinh ngạc khi được kết hợp với các giải pháp phía máy chủ

Một lợi thế lớn của điều này và Giải pháp lưu trữ đám mây là kích thước lưu trữ. bạn có thể lưu trữ một lượng lớn dữ liệu một cách an toàn. hình ảnh, video, âm thanh, tài liệu, nhật ký. Nếu bạn cần có khả năng này, thì bạn muốn đi theo con đường này

Cơ sở dữ liệu quan hệ đã trở thành một tiêu chuẩn công nghiệp trong những thập kỷ qua. Cụ thể, bạn có thể tìm thấy những người chơi lớn ở đây, với các giải pháp trả phí như Oracle, SQL Server, DB2 cho đến các sản phẩm miễn phí và miễn phí (tùy thuộc vào giấy phép) như MySQL, PostgreSQL, SQLite

Cơ sở dữ liệu NoSQL khá mới và rất phổ biến hiện nay. MongoDB, CouchDB, Cassandra là một số tên tuổi lớn nhất trong danh mục này

Các tùy chọn này là tốt nhất nếu bạn cần dữ liệu ổn định đầy đủ, tuy nhiên, nếu đó không phải là mục tiêu kinh doanh chính của bạn, thì bạn có thể xem xét các hệ thống cơ sở dữ liệu trong bộ nhớ. Tất nhiên, các hệ thống này dựa vào bộ nhớ lưu trữ để có sẵn và truy xuất nhanh như chớp. Bộ nhớ đệm là một trong những cách sử dụng chính của cơ sở dữ liệu trong bộ nhớ. Các lựa chọn phổ biến cho danh mục này là Redis hoặc Memcache đã nói ở trên

Tại thời điểm này, tất nhiên, mức độ phức tạp của ứng dụng của bạn tăng vọt và bạn sẽ ràng buộc trang web của mình một cách hiệu quả bằng một công nghệ, điều đó có nghĩa là bạn phải rất chắc chắn và cẩn thận rằng khoản đầu tư này sẽ là tốt nhất cho trường hợp cụ thể của bạn

Với cơ sở dữ liệu phía máy chủ, các mối quan tâm khác phát sinh, chẳng hạn như chính sách bảo mật, sao lưu, bảo trì nói chung, điều này chắc chắn sẽ làm tăng thời gian và chi phí cho trang web của bạn

Giải pháp lưu trữ đám mây

Lưu trữ dữ liệu đã trở nên siêu hợp lý trong những năm gần đây và một trong những lý do chính cho điều này là sự ra đời của Giải pháp đám mây. Cho đến nay, AWS của Amazon, Azure của Microsoft và GCP của Google là những nhà cung cấp hàng đầu các dịch vụ này. Nhưng chúng không phải là thứ duy nhất bạn có thể sử dụng, vì có nhiều tùy chọn cỡ trung bình và độ tin cậy cao hơn cho giá rẻ bèo

Với Giải pháp lưu trữ đám mây, thật công bằng khi đề cập đến các công nghệ không có máy chủ. Các loại hệ thống này sẽ cho phép bạn sử dụng cơ sở dữ liệu theo nhu cầu, nghĩa là bạn trả tiền cho những gì bạn sử dụng. Các yếu tố chính phải được công nhận ở đây, yếu tố quan trọng nhất là giá cả. Hầu hết các Giải pháp đám mây sẽ cung cấp cho khách hàng một tùy chọn để mô phỏng mức sử dụng của bạn và ước tính chi phí của bạn, để bạn có thể đánh giá xem có nên sử dụng serverless hay không

Tôi có một loạt bài về GCP của Google. Tìm các liên kết ở cuối bài viết này

Các chính sách bảo mật, khi sử dụng Giải pháp đám mây, có thể sẽ phụ thuộc vào hợp đồng dịch vụ mà bạn mua, điều này sẽ giúp bạn không phải tập trung vào các vấn đề khác. Tuy nhiên, điều quan trọng là phải tìm hiểu và hiểu cách thức hoạt động của các chính sách này và điều chỉnh chúng nếu cần

Sau đó, làm cách nào để lưu trữ an toàn thông tin nhạy cảm của bạn ở phía máy khách?

Vào cuối ngày, bạn muốn tránh bằng mọi giá lưu trữ thông tin riêng tư, nhạy cảm ở phía máy khách. Tuy nhiên, đôi khi bạn cần giữ một điểm neo giữa dữ liệu được lưu trữ phía máy chủ của bạn và người dùng đang duyệt dữ liệu của bạn. Bạn có thể làm điều này một cách an toàn. Đây là cách

Luôn mã hóa dữ liệu được lưu trữ ở phía máy khách. Mặc dù điều này không có nghĩa là chống đạn, nhưng nó sẽ làm giảm lỗ hổng thông tin của bạn

Tạo id phiên duy nhất cho mỗi khách truy cập (không phải cho mỗi người dùng) và lưu trữ giá trị này ở phía máy khách. Id phiên này phải có vòng đời ngắn. Tùy thuộc vào loại hình kinh doanh của bạn, lý tưởng nhất là giá trị này sẽ có hiệu lực trong khoảng thời gian từ vài phút đến vài giờ

Thích sử dụng Cookies để lưu trữ id phiên này. Một trong những lý do chính để làm như vậy là bạn có thể đặt cờ trong tiêu đề phản hồi của mình cho khách hàng sẽ cải thiện bảo mật

Ba giá trị quan trọng cần được định cấu hình khi đặt Cookie này. safe=true, httpOnly và SameSite=strict. Tất nhiên, điều này sẽ yêu cầu có thể sửa đổi các tiêu đề được gửi từ máy chủ đến trình duyệt

  • an toàn = đúng. Buộc trình duyệt không gửi thông tin cookie của bạn với dữ liệu HTTP không được mã hóa
  • httpOnly. Cờ này buộc trình duyệt không hiển thị nội dung Cookie thông qua các công cụ phía máy khách (chẳng hạn như JavaScript). Thực tế, điều này làm cho cookie chỉ khả dụng đối với máy chủ gốc ở phía máy chủ, sử dụng giao thức HTTP (hay đúng hơn là HTTPS, xem xét quy tắc bảo mật=true)
  • SameSite=nghiêm ngặt. Không còn nghi ngờ gì nữa, một lá cờ rất quan trọng. Cái này ngăn chặn Giả mạo yêu cầu chéo trang hoặc CSRF đáng sợ, hạn chế quyền truy cập nội dung Cookie của bạn vào cùng một trang đã gửi nó

Xem xét các tuyên bố từ chối trách nhiệm và sự đồng ý của Cookie. Về mặt pháp lý, một số quốc gia, đặc biệt là Hoa Kỳ và các thành viên của Liên minh Châu Âu buộc các trang web phải hiển thị cho người dùng thông báo này và mong người dùng thừa nhận (không có thông báo nhỏ về cỡ chữ 7pt sau chân trang của bạn), mà là người dùng chủ động chấp nhận hoặc từ chối việc sử dụng

Cân nhắc sử dụng trình tạo HTML tĩnh (Tiếp theo. JS, Gatsby). Các khung này sẽ cho phép bạn tập hợp tất cả các mã cần thiết để gửi lại cho người dùng một trang tĩnh, giảm thiểu vòng lặp từ máy khách đến bất kỳ API nào để truy xuất dữ liệu bên ngoài hoặc phía máy khách. Tôi đã viết một bài về tìm nạp và dưỡng ẩm Tiếp theo. Các ứng dụng JS, tìm liên kết ở cuối bài viết này

Bạn có thể lưu trữ dữ liệu trên máy chủ không?

Máy chủ lưu trữ là một loại máy chủ được sử dụng để lưu trữ, truy cập, bảo mật và quản lý dữ liệu, tệp và dịch vụ kỹ thuật số . Nó là một máy chủ được xây dựng có mục đích được sử dụng để lưu trữ và truy cập lượng dữ liệu từ nhỏ đến lớn qua mạng chia sẻ hoặc qua Internet. Máy chủ lưu trữ cũng có thể được gọi là máy chủ tệp.

JavaScript có thể lưu trữ dữ liệu không?

JavaScript cho phép chúng tôi lưu trữ dữ liệu trong trình duyệt bằng API lưu trữ cục bộ . Tại đây, bạn có thể sử dụng LocalStorage và SessionStorage. Các đối tượng cho phép chúng tôi lưu trữ dữ liệu (theo cặp khóa/giá trị) và cập nhật dữ liệu đó từ bộ lưu trữ của trình duyệt. Để xem dữ liệu, hãy mở trình duyệt của bạn.

Máy chủ lưu trữ dữ liệu ở đâu?

Tất cả dữ liệu (i. e. dữ liệu CỦA BẠN) được lưu trữ trên mảng ổ cứng trong các máy chủ dễ mắc phải nhiều lỗi giống như bộ nhớ trong máy tính xách tay hoặc máy tính để bàn của bạn. Ngoài ra, tùy thuộc vào nhà cung cấp bạn sử dụng, trung tâm dữ liệu có thể được đặt tại một quốc gia khác hoặc thậm chí có thể là một lục địa khác.

Làm thế nào để nút js lưu trữ dữ liệu trên máy chủ?

Lưu trữ Nút của bạn. dữ liệu cấu hình của ứng dụng js khá đơn giản - mọi đối tượng trong JavaScript có thể dễ dàng hiển thị dưới dạng JSON, do đó chỉ là dữ liệu chuỗi có thể được gửi hoặc lưu theo bất kỳ cách nào bạn muốn. Cách đơn giản nhất để thực hiện việc này bao gồm JSON tích hợp sẵn. phân tích cú pháp() và JSON .