Web前端开发学习之路——网页存储Web Storage（三）
程序员文章站
2022-04-22 18:04:49
...
购物车项目
下面是用户登陆界面的代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="color.css">
<script type="text/javascript">
function sendok() {
if (userid.value != "&&userpwd.value!=") {
localStorage.userid = userid.value;
sessionStorage.userpwd = userpwd.value;
return true;
} else
{
alert("请输入账号：");
return false;
}
}
function isload() {
if(localStorage.userid)
{
userid.value=localStorage.userid;
}
}
</script>
</head>
<body onload="isload()">
<img src="images"/>
<form method="post" action="ch05_05.html" onsubmit="return sendok();">
请输入你的账号：<br/>
<input type="text" id="userid" value="" autofocus><br/>
请输入你的密码：<br/>
<input type="password" id="userpwd" value=""><br/><font style="font-size: 12px;">
{测试账号:guest 密码：12345}
</font><br/>
<input id="btn_send" type="submit" value="登陆"/><br/>
</form>
</body>
</html>下面是购物篮界面部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html"; charset="UTF-8" http-equiv="Content-Type">
<title>水果购物网</title>
<link rel="stylesheet" type="text/css" href="cart_color.css">
<script type="text/javascript">
//检测账号、密码
if(localStorage.userid!="guest"||sessionStorage.userpwd!="12345")
{
alert("账号密码错误，请回首页重新登陆！");
sessionStorage.removeItem('userpwd');
document.location ="ch05_04.html";
}
function isLoad() {
//显示用户账号
document.getElementById("showuserid").innerHTML=localStorage.userid;
var div_list="";
//将商品信息存储在数组中
var sale_item=new Array("水果蛋糕","葡萄","奇异果","菠萝",
"柠檬","苹果派","苹果","水果茶");
//显示商品
for (i in sale_item)
{
div_list=div_list+"<div class='fruit'>";
div_list=div_list+"<img class='img_fruit' src='images/fruit"+i+".png'/><br/>";
div_list=div_list+"<font style='color:#ff0000'>"+sale_item[i]+"</font><br/>";
div_list=div_list+"<input type='checkbox' name='chkitem' value='"+sale_item[i]+"'>"
div_list=div_list+"我要选购</div>"
}
document.getElementById("div_sale").insertAdjacentHTML("beforeend",div_list);
//检查CartList是否仍有数据，有则加载
if(localStorage.Cartlist)
shopping_list.value="你的购买列表："+localStorage.Cartlist;
else
shopping_list.value="你的购买列表：";
//创建按钮的监听事件
clearButton.addEventListener("click",clearCart);
cartButton.addEventListener("click",addtoCart);
}
/****清空购物车*****/
function clearCart() {
shopping_list.value="你的购买列表：";
localStorage.removeItem("Cartslist"); /*清空localStorage*/
}
/****加入购物车****/
function addtoCart(){
var checkselect="";
var checkBoxList = document.getElementsByName('chkitem');
for (i in checkBoxList)
{
if (checkBoxList[i].checked)
{
checkselect = checkselect+"\n"+checkBoxList[i].value;
}
}
/****localStorage.Carlist是空的，表示首次新增，就把选择商品存入localStorage.Carlist;
如果localStorage.Carlist有值，表示已经新增过商品，新选择商品继续存入localStorage.Carlist*****/
if (!localStorage.Carlist)
localStorage.Carlist=checkselect;
else
localStorage.Carlist=localStorage.Carlist+checkselect;
shopping_list.value = "你的购买列表："+localStorage.Carlist;
}
//注销
function logout() {
localStorage.removeItem('userid');
sessionStorage.clear();
document.location='ch05_04.html';
}
</script>
</head>
<body onload="isLoad()">
<div id="main">
<header>欢 迎 光 临 水 果 购 物 网 <input type="button" value="注销" onclick="logout();"></header>
<span id="showuserid">aaa</span>你好<br/>请选择要购买的商品！<br/>
<button id="clearButton">清除购物车</button><br>
<button id="cartButton">放入购物车</button>
<textarea id="shopping_list" rows="15" cols="30"></textarea>
<div id="div_sale"></div>
</div>
</body>
<footer>
门市营业时间：周一~周五8：30~20：30<br/>
服务信箱:[email protected]<br/>
电话：12345-4651
</footer>
</html>由于本例程目前还是存在一些BUG，在清除购物车后，再使用添加购物车会发现之前的localStorage依旧存在，而我们在代码中依旧将其删除，而本人在仔细分析后仍然无法解决，故先不放上展示图，之后会重新修改完善。
上一篇： 传阿里巴巴制定A股上市计划
下一篇： netty4源码分析-accept