- 12 phút đọc
- Thương mại điện tử, HTML5
Cập nhật [27,29 AUG] Biên tập viên Lưu ý: Chúng tôi đã cập nhật các ví dụ để giải quyết các vấn đề về khả năng truy cập trong HTML.: We have updated the examples to address accessibility issues in the HTML.
Với sự ra đời của HTML5, nhiều trang web đã có thể thay thế plugin và mã JavaScript bằng các mã HTML hiệu quả hơn như âm thanh, video, định vị địa lý, v.v. Các thẻ HTML5 giúp công việc của các nhà phát triển dễ dàng hơn nhiều trong khi tăng cường thời gian tải trang và hiệu suất trang web. Cụ thể, lưu trữ web HTML5 là một công cụ thay đổi trò chơi vì chúng cho phép người dùng trình duyệt lưu trữ dữ liệu người dùng mà không cần sử dụng máy chủ. Vì vậy, việc tạo lưu trữ web, cho phép các nhà phát triển mặt trước hoàn thành nhiều hơn trên trang web của họ mà không biết hoặc sử dụng mã hóa phía máy chủ hoặc cơ sở dữ liệu.
Các trang web thương mại điện tử trực tuyến chủ yếu sử dụng các ngôn ngữ phía máy chủ như PHP để lưu trữ dữ liệu của người dùng và truyền chúng từ trang này sang trang khác. Sử dụng các khung back-end JavaScript như Node.js, chúng ta có thể đạt được mục tiêu tương tự. Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn từng bước làm thế nào để chế tạo giỏ hàng với HTML5 và một số mã JavaScript nhỏ. Các ứng dụng khác của các kỹ thuật trong hướng dẫn này sẽ là lưu trữ tùy chọn người dùng, nội dung yêu thích của người dùng, danh sách mong muốn và cài đặt người dùng như tên và mật khẩu trên các trang web và ứng dụng di động gốc mà không cần sử dụng cơ sở dữ liệu.
Nhiều trang web lưu lượng truy cập cao dựa vào các kỹ thuật phức tạp như phân cụm máy chủ, bộ cân bằng tải DNS, bộ nhớ đệm phía máy khách và phía máy chủ, cơ sở dữ liệu phân tán và microservice để tối ưu hóa hiệu suất và tính khả dụng. Thật vậy, thách thức chính đối với các trang web động là tìm nạp dữ liệu từ cơ sở dữ liệu và sử dụng ngôn ngữ phía máy chủ như PHP để xử lý chúng. Tuy nhiên, lưu trữ cơ sở dữ liệu từ xa chỉ nên được sử dụng cho nội dung trang web thiết yếu, chẳng hạn như bài viết và thông tin đăng nhập của người dùng. Các tính năng như tùy chọn người dùng có thể được lưu trữ trong trình duyệt của người dùng, tương tự như cookie. Tương tự như vậy, khi bạn xây dựng một ứng dụng di động gốc, bạn có thể sử dụng lưu trữ web HTML5 kết hợp với cơ sở dữ liệu cục bộ để tăng tốc độ ứng dụng của bạn. Do đó, là các nhà phát triển mặt trước, chúng ta cần khám phá những cách mà chúng ta có thể khai thác sức mạnh của lưu trữ web HTML5 trong các ứng dụng của chúng ta trong giai đoạn đầu phát triển.
Tôi đã là một phần của một nhóm phát triển một trang web xã hội quy mô lớn và chúng tôi đã sử dụng lưu trữ web HTML5 rất nhiều. Chẳng hạn, khi người dùng đăng nhập, chúng tôi lưu trữ ID người dùng băm trong phiên HTML5 và sử dụng nó để xác thực người dùng trên các trang được bảo vệ. Chúng tôi cũng sử dụng tính năng này để lưu trữ tất cả các thông báo đẩy mới - chẳng hạn như tin nhắn trò chuyện mới, tin nhắn trang web và nguồn cấp dữ liệu mới - và chuyển chúng từ trang này sang trang khác. Khi một trang web xã hội có lưu lượng truy cập cao, tổng số sự phụ thuộc vào máy chủ để cân bằng tải có thể không hoạt động, vì vậy bạn phải xác định các tác vụ và dữ liệu có thể được xử lý bởi trình duyệt của người dùng thay vì máy chủ của bạn.
Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓
Bối cảnh dự án
Một giỏ hàng cho phép một khách truy cập trang web xem các trang sản phẩm và thêm các mặt hàng vào giỏ của họ. Khách truy cập có thể xem xét tất cả các mặt hàng của họ và cập nhật giỏ của họ [chẳng hạn như để thêm hoặc xóa các mục]. Để đạt được điều này, trang web cần lưu trữ dữ liệu của khách truy cập và chuyển chúng từ trang này sang trang khác, cho đến khi khách truy cập vào trang thanh toán và mua hàng. Lưu trữ dữ liệu có thể được thực hiện thông qua ngôn ngữ phía máy chủ hoặc một bên máy khách. Với ngôn ngữ phía máy chủ, máy chủ mang trọng lượng của lưu trữ dữ liệu, trong khi với ngôn ngữ phía máy khách, máy tính của khách truy cập [máy tính để bàn, máy tính bảng hoặc điện thoại thông minh] lưu trữ và xử lý dữ liệu. Mỗi cách tiếp cận có ưu và nhược điểm của nó. Trong hướng dẫn này, chúng tôi sẽ tập trung vào cách tiếp cận phía máy khách đơn giản, dựa trên HTML5 và JavaScript.
Lưu ý: Để có thể làm theo hướng dẫn này, kiến thức cơ bản về HTML5, CSS và JavaScript là bắt buộc.: In order to be able to follow this tutorial, basic knowledge of HTML5, CSS and JavaScript is required.
Tập tin dự án
Nhấn vào đây để tải xuống các tập tin nguồn dự án. Bạn cũng có thể thấy một bản demo trực tiếp.
Tổng quan về lưu trữ web HTML5
Lưu trữ web HTML5 cho phép các ứng dụng web lưu trữ các giá trị cục bộ trong trình duyệt có thể tồn tại phiên trình duyệt, giống như cookie. Không giống như cookie cần được gửi với mỗi yêu cầu HTTP, dữ liệu lưu trữ web không bao giờ được chuyển đến máy chủ; Do đó, lưu trữ web vượt trội so với cookie trong hiệu suất web. Hơn nữa, cookie cho phép bạn chỉ lưu trữ 4 kb dữ liệu cho mỗi tên miền, trong khi lưu trữ web cho phép ít nhất 5 MB mỗi miền. Lưu trữ web hoạt động giống như một mảng đơn giản, các khóa ánh xạ đến các giá trị và chúng có hai loại:
- Phiên Storagethis lưu trữ dữ liệu trong một phiên trình duyệt, khi nó có sẵn cho đến khi đóng trình duyệt hoặc tab trình duyệt được đóng. Các cửa sổ bật lên mở từ cùng một cửa sổ có thể thấy lưu trữ phiên và các iframe có thể bên trong cùng một cửa sổ. Tuy nhiên, nhiều cửa sổ từ cùng một nguồn gốc [URL] không thể thấy lưu trữ phiên khác nhau.
This stores data in one browser session, where it becomes available until the browser or browser tab is closed. Popup windows opened from the same window can see session storage, and so can iframes inside the same window. However, multiple windows from the same origin [URL] cannot see each other’s session storage. - Storagethis địa phương lưu trữ dữ liệu trong trình duyệt web không có ngày hết hạn. Dữ liệu có sẵn cho tất cả các cửa sổ có cùng nguồn gốc [miền], ngay cả khi trình duyệt hoặc tab trình duyệt được mở lại hoặc đóng.
This stores data in the web browser with no expiration date. The data is available to all windows with the same origin [domain], even when the browser or browser tabs are reopened or closed.
Cả hai loại lưu trữ hiện đang được hỗ trợ trong tất cả các trình duyệt web chính. Hãy nhớ rằng bạn không thể truyền dữ liệu lưu trữ từ trình duyệt này sang trình duyệt khác, ngay cả khi cả hai trình duyệt đều truy cập cùng một miền.
Để xây dựng giỏ hàng của chúng tôi, trước tiên chúng tôi tạo một trang HTML với một giỏ hàng đơn giản để hiển thị các mặt hàng và một hình thức đơn giản để thêm hoặc chỉnh sửa giỏ. Sau đó, chúng tôi thêm lưu trữ web HTML vào nó, tiếp theo là mã hóa JavaScript. Mặc dù chúng tôi đang sử dụng các thẻ lưu trữ cục bộ HTML5, tất cả các bước giống hệt với lưu trữ phiên HTML5 và có thể được áp dụng cho các thẻ lưu trữ phiên HTML5. Cuối cùng, chúng tôi sẽ xem qua một số mã jQuery, như một giải pháp thay thế cho mã JavaScript, cho những người quan tâm đến việc sử dụng jQuery.
Trang HTML của chúng tôi là một trang cơ bản, với các thẻ cho JavaScript bên ngoài và CSS được tham chiếu trong đầu.
HTML5 Local Storage Project
Dưới đây là nội dung HTML xuất hiện trong phần thân trang:
Shopping cart
Item:
Quantity:
Shopping List
* Delete all items
Chúng tôi sẽ tạo và gọi chức năng JavaScript
Ngoài ra, bạn có thể sử dụng sự kiện JavaScript Onload bằng cách thêm nó vào mã JavaScript:
window.load=doShowAll[];
Hoặc sử dụng cái này cho jQuery:
$[ window ].load[function[] {
doShowAll[];
}];
Trong hàm
/*
=====> Checking browser support.
//This step might not be required because most modern browsers do support HTML5.
*/
//Function below might be redundant.
function CheckBrowser[] {
if ['localStorage' in window && window['localStorage'] !== null] {
// We can use localStorage object to store data.
return true;
} else {
return false;
}
}
Bên trong
// Dynamically populate the table with shopping list items.
//Step below can be done via PHP and AJAX, too.
function doShowAll[] {
if [CheckBrowser[]] {
var key = "";
var list = "ItemValue \n";
var i = 0;
//For a more advanced feature, you can set a cap on max items in the cart.
for [i = 0; i Checking browser support.
//This step might not be required because most modern browsers do support HTML5.
*/
//Function below might be redundant.
function CheckBrowser[] {
if ['localStorage' in window && window['localStorage'] !== null] {
// We can use localStorage object to store data.
return true;
} else {
return false;
}
}
Vì lưu trữ web HTML5 chỉ hỗ trợ lưu trữ giá trị tên đơn, bạn phải sử dụng JSON hoặc một phương thức khác để chuyển đổi mảng hoặc đối tượng của bạn thành một chuỗi. Bạn có thể cần một mảng hoặc đối tượng nếu bạn có một danh mục và danh mục con của các mặt hàng hoặc nếu bạn có một giỏ hàng có nhiều dữ liệu, như thông tin khách hàng, thông tin mục, v.v. Để lưu trữ chúng trong bộ lưu trữ web, sau đó phát nổ [hoặc chia] chúng trở lại một mảng để hiển thị chúng trên một trang khác. Hãy cùng đi qua một ví dụ cơ bản về một giỏ hàng có ba bộ thông tin: thông tin khách hàng, thông tin vật phẩm và địa chỉ gửi thư tùy chỉnh. Đầu tiên, chúng tôi sử dụng JSON.Stringify để chuyển đổi đối tượng thành một chuỗi. Sau đó, chúng tôi sử dụng json.parse để đảo ngược nó lại.
Gợi ý: Hãy nhớ rằng tên khóa phải là duy nhất cho mỗi miền.: Keep in mind that the key-name should be unique for each domain.
Shopping cart
Item:
Quantity:
Shopping List
* Delete all items
Bản tóm tắt
Trong hướng dẫn này, chúng tôi đã học được cách xây dựng một giỏ hàng từng bước bằng cách sử dụng lưu trữ web HTML5 và JavaScript. Chúng tôi đã thấy cách sử dụng jQuery như một sự thay thế cho JavaScript. Chúng tôi cũng đã thảo luận về các chức năng của JSON như Stringify và Parse để xử lý các mảng và đối tượng trong giỏ hàng. Bạn có thể xây dựng trên hướng dẫn này bằng cách thêm nhiều tính năng hơn, như thêm các danh mục sản phẩm và danh mục con trong khi lưu trữ dữ liệu trong một mảng đa chiều JavaScript. Hơn nữa, bạn có thể thay thế toàn bộ mã JavaScript bằng jQuery.
Chúng tôi đã thấy những gì các nhà phát triển khác có thể thực hiện với lưu trữ web HTML5 và những tính năng khác mà họ có thể thêm vào trang web của họ. Ví dụ: bạn có thể sử dụng hướng dẫn này để lưu trữ tùy chọn người dùng, nội dung được yêu thích, danh sách mong muốn và cài đặt người dùng như tên và mật khẩu trên các trang web và ứng dụng di động gốc mà không cần sử dụng cơ sở dữ liệu.
Để kết luận, đây là một vài vấn đề cần xem xét khi triển khai lưu trữ web HTML5:
- Một số người dùng có thể có cài đặt quyền riêng tư ngăn trình duyệt lưu trữ dữ liệu.
- Một số người dùng có thể sử dụng trình duyệt của họ ở chế độ ẩn danh.
- Hãy nhận biết một vài vấn đề bảo mật, như các cuộc tấn công giả mạo DNS, các cuộc tấn công xuyên qua trực tiếp và thỏa hiệp dữ liệu nhạy cảm.
- Giới hạn lưu trữ và tiêu chí trục xuất của trình duyệt, tài liệu web MDN, Mozilla
- Lưu trữ web, tiêu chuẩn sống HTML,
- Tuần này trong HTML 5, blog Whatwg