将一个页面中的项目添加到购物车中，该购物车将仅使用 JS/CSS/HTML 显示在另一个页面中答案

【问题标题】：Adding Items in one page to the shopping cart which will be displayed in another page using only JS/CSS/HTML将一个页面中的项目添加到购物车中，该购物车将仅使用 JS/CSS/HTML 显示在另一个页面中
【发布时间】：2018-07-05 22:55:06
【问题描述】：

既然不允许我使用任何后端代码，我应该如何完成这个功能？我搜索了很多教程，但通常商品和购物车在同一页面中。有人说这里可以使用 Jquery.load()，但是我不知道怎么做

任何帮助将不胜感激！谢谢

【问题讨论】：

你有没有想过用JS设置cookie？
Cookie 或 localStorage ......（但没有任何形式的后端，谁会处理我最终放入购物车的东西......？）
将项目编码为查询字符串参数并使用该参数通过url打开新页面，然后从打开的页面位置url读取参数
尝试使用developers.google.com/web/ilt/pwa/working-with-indexeddb
localStorage 是您最好的选择。请注意，localStorage 在Incognito 中被清除。

标签： javascript jquery html css ajax

【解决方案1】：

我会使用 LocalStorage 功能。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

在商品页面上：

var cartItems = localStorage.getItem('cartItems');

cartItems.push(newItem);

localStorage.setItem('cartItems', cartItems);

然后在购物车页面上：

var cartItems = localStorage.getItem('cartItems');
//Do whatever you're going to do with the contents of the cart.

从应用程序设计的角度来看，如果您真的要构建店面应用程序，一个更好的解决方案可能是与在应用程序的服务器端工作的任何人合作，以添加可以存储购物车的服务器端会话功能内容。

【讨论】：

谢谢你，我明白你的意思了，但是你将如何使用 localStorage.getItem() 存储 HTML 元素？我应该将该元素的 id 放在括号内吗？
@ZihanChen 只是存储数据（项目、数量等）。然后只需要一个函数来获取数据对象并构建 html 元素的字符串，然后使用 jquery append 附加到父控件