Tài Liệu: Chức Năng Giỏ Hàng trong HTML5 sử dụng JSON, Session Storage và Local Storage
1. Khái Niệm Cơ Bản về Dạng Key-Value
1.1 Key-Value là Gì?

Trong lập trình, dạng key-value là cách lưu trữ và truy xuất dữ liệu thông qua cặp giá trị, gồm một khóa (key) và một giá trị (value). HTML5 cung cấp các cơ chế như JSON, Session Storage, và Local Storage để quản lý dữ liệu theo mô hình này.
2. Khái Niệm Cơ Bản về JSON
2.1 JSON là Gì?

JSON (JavaScript Object Notation) là một định dạng dữ liệu dựa trên văn bản giúp truyền tải và lưu trữ dữ liệu dễ dàng. Nó sử dụng cặp key-value và có thể lưu trữ các loại dữ liệu như số, chuỗi, đối tượng, mảng, boolean.
3. Session Storage và Local Storage trong HTML5
3.1 Session Storage

Session Storage là một cơ chế lưu trữ dữ liệu trên trình duyệt cho mỗi phiên làm việc (session). Dữ liệu trong Session Storage tồn tại cho đến khi phiên làm việc kết thúc (trình duyệt được đóng).

Code Mẫu:

// Tạo mới một session storage
sessionStorage.setItem("username", "john_doe");

// Đọc giá trị từ session storage
let username = sessionStorage.getItem("username");
console.log(username); // Output: john_doe

// Cập nhật giá trị trong session storage
sessionStorage.setItem("username", "new_john");

Giải Thích:

setItem(key, value): Tạo hoặc cập nhật giá trị của key trong Session Storage.
getItem(key): Đọc giá trị của key từ Session Storage.

3.2 Local Storage

Local Storage cũng lưu trữ dữ liệu trên trình duyệt, nhưng dữ liệu trong Local Storage vẫn tồn tại sau khi trình duyệt được đóng và mở lại.

Code Mẫu:

// Tạo mới một local storage
localStorage.setItem("user_id", "123");

// Đọc giá trị từ local storage
let userId = localStorage.getItem("user_id");
console.log(userId); // Output: 123

// Xóa giá trị khỏi local storage
localStorage.removeItem("user_id");

Giải Thích:

setItem(key, value): Tạo hoặc cập nhật giá trị của key trong Local Storage.
getItem(key): Đọc giá trị của key từ Local Storage.
removeItem(key): Xóa giá trị của key từ Local Storage.

Việc sử dụng Session Storage và Local Storage giúp lưu trữ thông tin phiên làm việc hoặc dữ liệu vĩnh viễn trên trình duyệt, giúp duy trì trạng thái dữ liệu quan trọng cho người dùng khi họ tương tác với trang web.
Hàm JSON.stringify và JSON.parse trong JavaScript
1. JSON.stringify

Mục Đích:

Chuyển đổi một đối tượng JavaScript thành chuỗi JSON.

Sử Dụng:

const user = { id: 1, name: "John", age: 30 };
const jsonString = JSON.stringify(user);
console.log(jsonString);
// Output: '{"id":1,"name":"John","age":30}'

Giải Thích:

JSON.stringify(object): Chuyển đối tượng JavaScript thành chuỗi JSON.
Chuỗi JSON có thể được lưu trữ hoặc truyền tải qua mạng.

2. JSON.parse

Mục Đích:

Chuyển đổi một chuỗi JSON thành đối tượng JavaScript.

Sử Dụng:

const jsonString = '{"id":1,"name":"John","age":30}';
const user = JSON.parse(jsonString);
console.log(user);
// Output: { id: 1, name: "John", age: 30 }

Giải Thích:

JSON.parse(jsonString): Chuyển chuỗi JSON thành đối tượng JavaScript.

Sử Dụng JSON.stringify và JSON.parse với Session/Local Storage
Sử Dụng với Session Storage

Lưu Trữ Đối Tượng vào Session Storage:

const user = { id: 1, name: "John", age: 30 };
const jsonString = JSON.stringify(user);
sessionStorage.setItem("user", jsonString);

Đọc Đối Tượng từ Session Storage:

const jsonString = sessionStorage.getItem("user");
const user = JSON.parse(jsonString);
console.log(user);
// Output: { id: 1, name: "John", age: 30 }

Sử Dụng với Local Storage

Lưu Trữ Đối Tượng vào Local Storage:

const user = { id: 1, name: "John", age: 30 };
const jsonString = JSON.stringify(user);
localStorage.setItem("user", jsonString);

Đọc Đối Tượng từ Local Storage:

const jsonString = localStorage.getItem("user");
const user = JSON.parse(jsonString);
console.log(user);
// Output: { id: 1, name: "John", age: 30 }

Tóm Lược

JSON.stringify chuyển đối tượng JavaScript thành chuỗi JSON.
JSON.parse chuyển chuỗi JSON thành đối tượng JavaScript.
Khi sử dụng với Session Storage hoặc Local Storage, ta có thể chuyển đổi đối tượng thành chuỗi JSON để lưu trữ, và sau đó, khi cần, ta có thể đọc chuỗi JSON và chuyển đổi nó thành đối tượng JavaScript. Điều này giúp duy trì dữ liệu phức tạp trong các cơ chế lưu trữ trình duyệt.

4. CRUD với Session Storage và Local Storage ở Dạng Object
4.1 CRUD với Session Storage

Create (Tạo): sessionStorage.setItem(key, value)
Read (Đọc): sessionStorage.getItem(key)
Update (Cập nhật): sessionStorage.setItem(key, newValue)
Delete (Xóa): sessionStorage.removeItem(key)

4.2 CRUD với Local Storage

Tương tự như Session Storage, nhưng sử dụng localStorage thay vì sessionStorage.
5. Giải Thuật Chức Năng Giỏ Hàng trong HTML5
5.1 Add Một Sản Phẩm vào Giỏ Hàng

Kiểm tra nếu sản phẩm đã tồn tại trong giỏ hàng.
Nếu chưa tồn tại, thêm sản phẩm vào giỏ hàng với số lượng là 1.
Nếu đã tồn tại, tăng số lượng sản phẩm lên.

5.2 Thêm Sản Phẩm Đã Trùng vào Giỏ Hàng

Khi sản phẩm đã tồn tại, có thể cập nhật số lượng hoặc áp dụng các chức năng khác như giảm giá, ghi chú.
5.3 Xóa Sản Phẩm Khỏi Giỏ Hàng

Xác định sản phẩm cần xóa.
Xóa sản phẩm khỏi danh sách giỏ hàng.

5.4 Tính Tổng Giỏ Hàng

Lấy danh sách sản phẩm trong giỏ hàng.
Duyệt qua từng sản phẩm, tính tổng số lượng và giá thành.

Kết Luận

HTML5 cung cấp nhiều công cụ mạnh mẽ để quản lý dữ liệu key-value và chúng có thể được sử dụng hiệu quả cho các chức năng như giỏ hàng trong website. Sử dụng Session Storage và Local Storage kết hợp với JSON giúp tạo ra trải nghiệm mua sắm linh hoạt và thoải mái cho người dùng.