HTML5——同步购物车
同步购物车，及打开两个或多个界面，选择购物时同步，让显示的内容一致，这样不至于购买出错。
核心：利用storage事件和localStorage本地存储实现
图片简单展示:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>同步购物车</title>
<script type="text/javascript">
window.onload=function(){
var aInput=document.getElementsByTagName('input');
for(var i=;i<aInput.length;i++){
aInput[i].onclick=function(){
if(this.checked){
window.localStorage.setItem('sel',this.value);
}else{
window.localStorage.setItem('onSel',this.value);
}
};
}
//addEventListener是JS绑定事件写法
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发此事件（storage）
if(ev.key=='sel'){
for(var i=;i<aInput.length;i++){
if(ev.newValue==aInput[i].value){
aInput[i].checked=true;
}
}
}else if(ev.key=='onSel'){
for(var i=;i<aInput.length;i++){
if(ev.newValue==aInput[i].value){
aInput[i].checked=false;
}
}
}
});
} </script>
</head>
<body>
<input type="checkbox" value="香蕉"/>香蕉<br/>
<input type="checkbox" value="苹果"/>苹果<br/>
<input type="checkbox" value="橘子"/>橘子<br/>
<input type="checkbox" value="糖"/>糖<br/>
<input type="checkbox" value="西瓜"/>西瓜<br/>
<input type="checkbox" value="葡糖"/>葡糖<br/>
</body>
</html>
HTML5——同步购物车的更多相关文章
- 基于jQuery+HTML5加入购物车代码
基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- html5 拖放购物车
1.本例中模仿了购物车添加的功能 主要运用了ondragstart / ondragover/ ondrag 功能 功能比较简单 遗留问题:火狐下图片拖进会被打开 <!doctype html& ...
- taotao购物车2 解决购物车本地cookie和服务器redis不同步的问题
下面的思路逻辑一定要理清楚,比较绕 思路; 前面已经实现了在cookie本地维护购物车的功能, 这次加入和服务器同步功能, 因为 购物车 操作比较频繁,所以,后台服务器 用redis存储用户的购物车信 ...
- HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
- Web前端总结（小伙伴的）
以下总结是我工作室的小伙伴的心得,可以参考一下 html+css知识点总结 HTMl+CSS知识点收集 1.letter-spacing和word-spacing的区别 letter-spacing: ...
- taotao订单系统
taotao订单系统需求分析.注意点.代码 需要注意的地方: 1.下订单功能一定要使用关系型数据库,因为其设计到钱,而noSql数据库相比来说丢失数据的风险更大. 但是查看订单列表.查看订单详情等功能 ...
- Redis进阶知识一览
Redis的持久化机制 RDB: Redis DataBase 什么是RDB RDB∶每隔一段时间,把内存中的数据写入磁盘的临时文件,作为快照,恢复的时候把快照文件读进内存.如果宕机重启,那么内存里的 ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- localStorage实现购物车数量单价和结算页面的实时同步
While there is life there is hope.一息若存,希望不灭 用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步: 购物车页面:实时更新页面,在i ...
随机推荐
- poj 2391 Ombrophobic Bovines(最大流+floyd+二分)
Ombrophobic Bovines Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 14519Accepted: 3170 De ...
- Libfilth(一个滤波器C库)使用
Libfilth使用说明 winshton 2009年2月 (*本文大部分翻译自libfilth,还有一部分是个人使用实践 *时间水平均有限,翻译的不完整,尤其第二章可以忽略) 版本历史修改记录 版本 ...
- 边工作边刷题：70天一遍leetcode: day 80
Palindrome Permutation I/II 要点: oddCount to increase/decrease count II: chars: 先统计,再得到一半的c,相同的在一起,所以 ...
- 2014 Super Training #1 B Fix 状压DP
原题: HDU 3362 http://acm.hdu.edu.cn/showproblem.php?pid=3362 开始准备贪心搞,结果发现太难了,一直都没做出来.后来才知道要用状压DP. 题意: ...
- POJ 1836 Alignment --LIS&LDS
题意:n个士兵站成一排,求去掉最少的人数,使剩下的这排士兵的身高形成“峰形”分布,即求前面部分的LIS加上后面部分的LDS的最大值. 做法:分别求出LIS和LDS,枚举中点,求LIS+LDS的最大值. ...
- java11-4 字符串的遍历以及字符串中各类字符的统计
1.需求:获取字符串中的每一个字符 分析: A:如何能够拿到每一个字符呢? char charAt(int index) B:我怎么知道字符到底有多少个呢? int length() publi ...
- 使用PDO进行sql的预处理和操作结果集
- Linux下利用CGroup控制CPU、内存以及IO的操作记录
CGroup及其子系统的介绍在这里就不赘述了,可以参考:Linux下CGroup使用说明梳理废话不多说,这里记录下利用CGroup控制CPU.内存以及IO的操作记录: libcgroup工具安装这里以 ...
- 【转】WCF与Web API 区别(应用场景)
Web api 主要功能: 支持基于Http verb (GET, POST, PUT, DELETE)的CRUD (create, retrieve, update, delete)操作 请求的回 ...
- openresty 前端开发进阶一之http后端
做前端开发,大多数情况下,都需要跟后端打交道,而最常见的方式则是通过http请求,进行通信. 在openresty中,通过http跟后端整合通信的方式又很多种,各有各的好处,可以根据情况交叉使用 1. ...