目标需求
实现网上商城的购物车功能，将物品添加到购物车，并能一直保持商品在购物车内的状态。
分析
首先，页面传值和数组存储信息怕是不行了，则例我们选择使用cookie来实现，毕竟大佬如是说：
JS实现Cookie的设置与读取可以参考一下我的上篇文章：JS随手记——Cookie的设置与读取。
具体实现
购物车功能，首先肯定就是添加到购物车了，添加事件如下：
function addbuycar(){
//获取当前路径并切割ID
var url = window.location.href;
var phoneid = url.split("?")[1];
//获取当前ID的手机信息字符串
phoneid = phoneid.replace("id=","").trim();
setCookie(phoneid,"是");
// window.location.href="addok.html?id="+phoneid;
}
这里是接上午的界面传值的效果继续写的，所以切割了路径获得id，你也可以直接存入一个id和值。
后面可以跟上你点击之后需要跳转的路径。
接下来就是购物车页面加载时的事件了，通过循环判断每一个id的cookie值来决定是否将该条信息动态添加至table中，下面是代码：
for(var i =0 ;i<=10;i++)
{
if(getCookie(i)=="是")
{
//获取手机名称
var phonename = phones[i].split(" ")[0];
//获取手机价格
var Price = phones[i].split(" ")[2];
//获取手机图片相对路径
var phonesrc = "./img/"+phonename.replace(/_/g," ")+".png";
//获取table表格
var tab = document.getElementById("tab");
//生成新的tr行
var tr = document.createElement("tr");
//将tr行动态加入表格
tab.appendChild(tr);
//生成第一个td，用来存放全选的复选框，并将td添加到tr中
var t0 = document.createElement("td");
var che = document.createElement("input");
che.type = "checkbox";
che.name = "buy";
che.className = "tdchenck";
t0.appendChild(che);
tr.appendChild(t0);
//生成第二个td，用来存放手机的名称和展示手机的图片，并将td添加到tr中
var t1 = document.createElement("td");
var t1img = document.createElement("img");
t1img.src = phonesrc;
t1img.className = "tdimg";
var t1p = document.createElement("p");
t1p.innerHTML = phonename.replace(/_/g," ");
t1p.className = "tdp";
t1.appendChild(t1img);
t1.appendChild(t1p);
tr.appendChild(t1);
//生成第三个td，用来存放手机的价格，并将td添加到tr中
var t2 = document.createElement("td");
var t2p = document.createElement("p");
t2p.innerHTML = Price;
t2p.className = "tdPrice";
t2.appendChild(t2p);
tr.appendChild(t2);
//生成第四个td，用来存放手机购买数量（这里为了省事，直接给了“1台”，可以改成input允许用户输入）
var t3 = document.createElement("td");
var t3p = document.createElement("p");
t3p.innerHTML = "1台";
t3p.className = "tdPrice";
t3.appendChild(t3p);
tr.appendChild(t3);
}
}
因为我的数组长度为11，所以这里就直接定义为i=0;i<=10了，你可以更改为你的数组长度。
此时基本完工，但是会出现这样的情况：
非常难看，兄弟，当所有的项都不符合时，便都不会添加，列表就显得奇奇怪怪。这里可以在循环前var一个变量为0，当有符合的项时，变量++，最后判断一下变量的值，如果依然为0，说明购物车是空的，可以将列表隐藏，将一个“购物车为空的图片显示出来”，大概如下图所示：
这样看起来就舒服多了，附上隐藏表格，显示图片的代码：
function showall(){
var show = 0;
for(var i =0 ;i<=10;i++)
{
if(getCookie(i)=="是")
{
//上述动态添加代码
show++;
}
}
if(show == 0)
{
var have = document.getElementById("have");
have.style.display = "none";
var nohave = document.getElementById("nohave");
nohave.style.display = "block";
}
}
其中动态添加的部分上面已经贴过了，而且篇幅较大，就不再贴了。这里初始时，"have"即表格是显示的，"nohave"即购物车为空的图片是隐藏的，窗体加载时执行该方法，若遍历后变量show仍为0，则隐藏"have"表格，显示"nohave"图片，以达到效果。
最后再附一张购物车内有内容的图（表格很丑，你可以美化一下）：
结语：
全篇内容仅供参考，只是我这种小白能用这种方法实现，但不代表这种方法或这样使用的行为就是正确的。
如果你觉得对你有帮助就请点个赞，关注更好，嘿嘿，谢谢。如有描述错误或不足，还望指正。
