原生javaScript利用loaclStorage实现简单购物车
商品页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>商品页</title><style>td{border: 1px solid black;text-align: center;}img{width: 100px;}</style>
</head>
<body>
<table><tr><td>商品图片</td><td>商品名</td><td>价格</td><td style="width: 60px;text-align: center">操作</td></tr><tr><td><input type="hidden"value="0"><img src="./img/0.jpg" alt="iphone12"></td><td>iphone12</td><td>6299￥</td><td><a href="javascript:;">购买</a></td></tr><tr><td><input type="hidden"value="1"><img src="./img/1.jpg" alt="华为折叠屏手机"></td><td>HUAWEI</td><td>16999￥</td><td><a href="javascript:;">购买</a></td></tr><tr><td><input type="hidden"value="2"><img src="./img/2.jpg" alt="小米alpha"></td><td>mi</td><td>12999￥</td><td><a href="javascript:;">购买</a></td></tr><tr><td><input type="hidden"value="3"><img src="./img/3.jpg" alt="三星手机"></td><td>SAMSUNG</td><td>20999￥</td><td><a href="javascript:;">购买</a></td></tr>
</table>
<button>前往购物车</button>
<script>class product{constructor() {this.buy_btn = document.querySelectorAll('a')this.btn = document.querySelector('button')this.addEvent()}addEvent(){this.btn.onclick = function () {location.href = './cart.html'}for (let i = 0;i<this.buy_btn.length;i++){this.buy_btn[i].num = 0this.buy_btn[i].onclick = function () {let sp_coding = this.parentNode.parentNode.firstElementChild.firstElementChild.valuelet sp_img = this.parentNode.parentNode.firstElementChild.lastElementChild.srclet sp_name = this.parentNode.parentNode.firstElementChild.nextElementSibling.innerTextlet sp_price = this.parentNode.previousElementSibling.innerTextthis.num++let storage = window.localStoragestorage.setItem(`product_${sp_coding}`,`{"sp_coding":"${sp_coding}","sp_img":"${sp_img}","sp_name":"${sp_name}","sp_price":"${sp_price}","sp_num":"${this.num}"}`)}}}}new product()
</script>
</body>
</html>
购物车页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>购物车页</title><style>td{border: 1px solid black;text-align: center;}img{width: 100px;}</style>
</head>
<body>
<table><tr><td>商品图片</td><td>商品编码</td><td>商品名称</td><td>商品价格</td><td>商品数量</td></tr>
</table>
<script>class cart{constructor() {this.table = document.querySelector('table')this.addEvent()}addEvent(){let storage = window.localStoragefor(let i = 0;i<storage.length;i++){let key = storage.key(i)let sp =JSON.parse(storage.getItem(key))let _tr = this.table.insertRow()let _td = _tr.insertCell()let img = document.createElement('img')img.src = sp.sp_img_td.appendChild(img)_td = _tr.insertCell()_td.innerText = sp.sp_coding_td = _tr.insertCell()_td.innerText = sp.sp_name_td = _tr.insertCell()_td.innerText = sp.sp_price_td = _tr.insertCell()_td.innerText = sp.sp_num}}
}
new cart()
</script>
</body>
</html>
原生javaScript利用loaclStorage实现简单购物车相关推荐
- 手把手教你原生JavaScript打造丝滑流畅的轮播图，让你的网站瞬间提升用户体验
简介 轮播图是网页设计中常见的交互组件之一,用于展示多张图片或内容,让用户能够方便地浏览.切换和选择.本文将介绍如何使用原生 JavaScript 手写一个简单的轮播图,并且通过代码解释实现细节. 目 ...
- php简单的购物车,利用PHP实现一个简单购物车的demo示例代码
利用PHP实现一个简单购物车的demo示例代码 数据结构跟关于PHP写购物车大体差不多,这里站长主要就购物车的主要业务逻辑进行一下说明: 1.用户未登陆时只能浏览商品,不能将其加入购物车 2.当未登陆 ...
- 根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
- js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
- 为什么说要学习全新的原生 JavaScript？
JavaScript 是前端开发工程师最重要的技能,没有之一.在 Vue.js.React.js.Koa.Echarts 等框架风靡一时的背景下,原生的 JavaScript 就可以被抛弃了吗?答案是 ...
- 使用 Vanilla JavaScript 框架创建一个简单的天气应用
大家好,不知道大家听说过 Vanilla JavaScript 这款框架吗?最近我在浏览国外的一些技术网站时,这个词出现的频率实在是太高了,好多框架都宣称自己是基于 Vanilla JavaScrip ...
- 原生JavaScript抒写——贪吃蛇小游戏
原生JavaScript抒写--贪吃蛇小游戏 文章目录 原生JavaScript抒写--贪吃蛇小游戏 前言 一.需求分析 二.效果展示 三.具体逻辑代码分析 1.首先创建一个html文件,然后我们利用 ...
- 使用原生javascript实现ajax提交form表单
使用原生javascript实现ajax提交form表单 ============================ 1 准备表单 首先我们需要编写一个html代码,这里我是采用nodej ...
- 原生JavaScript实现jQuery中的slideUp和slideDown滑动效果
参考文章:用原生JavaScript写出类似jQuery中slideUp和slideDown效果_johnworks的博客-CSDN博客 作者:johnworks 目录 一.前言 二.第一次尝试 ...
最新文章
- NA-NP-IE系列实验35：标准ACL
- 解决fstream不能打开带有中文路径文件的问题
- tomcat启动时一闪而过的几种原因
- feignRequest$Options错误
- 这是一份编程宝典，请查收！
- 统计剩余字数（jq版）
- UITableViewCell 添加 checkbox 多选
- 高斯计工作原理和高斯计使用方法图解
- Win7系统能用一键装机的方式安装win10吗？
- RestSharp.RestClient
- 三种Web服务交互方案
- 家庭宽带搭建个人服务器
- w ndows读音,汉字读音及音标 - 51windows.Net
- 与亲哥决裂20年，董明珠被踢出族谱：帮你是情分，不帮你是本分
- 【网易】网易2018实习生招聘笔试题-测试开发实习生
- SpringBoot小程序推送信息
- 苹果cms(mac cms)安装和避雷
- 【算法讲26：特征方程】求齐次线性一阶递推与二阶递推通项公式 | HDU 2021多校一 Pass!
- C语言将一个十进制数转化为二进制
- 智能内容安全平台的运营维护与分享