在电子商务网站中使用 localStorage API 传递页面间数据

javascript

2024-03-08 00:15:02

在不同页面间传递数据：电子商务网站的常见挑战

在电子商务网站开发中，一个常见的挑战是如何将数据从购物车的页面传递到订单确认页面。为了解决这一问题，我们将探讨使用 JavaScript 的 localStorage API，它允许我们在不同的页面之间存储和检索数据。

localStorage API：跨页面数据存储

localStorage API 是一个浏览器内置的 API，它允许我们存储和检索数据，即使在关闭浏览器窗口或选项卡后数据也能保留。它使用键值对系统，其中键是一个字符串，而值是一个字符串。

步骤：从购物车页面传递数据

使用 localStorage.setItem() 存储数据：
- 将商品信息、用户详细信息和运费等数据作为 JavaScript 对象存储。
- 使用 JSON.stringify() 将对象转换为字符串，因为 localStorage 只能存储字符串。
设置键值对：
- 指定一个键来标识存储的数据，例如 "cartData"。
- 使用 localStorage.setItem(key, value) 将键值对存储在 localStorage 中。

步骤：在订单确认页面检索数据

使用 localStorage.getItem() 检索数据：
- 使用与购物车页面中设置的相同键，例如 "cartData"。
- 使用 localStorage.getItem(key) 检索存储的值。
将字符串解析回对象：
- 使用 JSON.parse() 将从 localStorage 检索到的字符串解析回 JavaScript 对象。
访问已检索的数据：
- 现在可以访问对象中的商品信息、用户详细信息和运费。

代码示例

购物车页面：

const cartData = {
  items: [...],
  userDetails: {...},
  shippingFee: ...
};

localStorage.setItem("cartData", JSON.stringify(cartData));
window.location.href = "order-confirmation.html";

订单确认页面：

const cartData = JSON.parse(localStorage.getItem("cartData"));

// 访问商品信息、用户详细信息和运费
console.log(cartData.items);
console.log(cartData.userDetails);
console.log(cartData.shippingFee);