同步购物车，及打开两个或多个界面，选择购物时同步，让显示的内容一致，这样不至于购买出错。

核心：利用storage事件和localStorage本地存储实现

图片简单展示:

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5.     <title>同步购物车</title>
  6. <script type="text/javascript">
  7. window.onload=function(){
  8.     var aInput=document.getElementsByTagName('input');
  9.     for(var i=;i<aInput.length;i++){
  10.         aInput[i].onclick=function(){
  11.             if(this.checked){
  12.     window.localStorage.setItem('sel',this.value);
  13.             }else{
  14.     window.localStorage.setItem('onSel',this.value);
  15.             }
  16.         };
  17.     }
  18.     //addEventListener是JS绑定事件写法
  19.     window.addEventListener('storage',function(ev){ //当前页面的事件不会触发此事件（storage）
  20.      if(ev.key=='sel'){
  21.          for(var i=;i<aInput.length;i++){
  22.              if(ev.newValue==aInput[i].value){
  23.                  aInput[i].checked=true;
  24.              }
  25.          }
  26.      }else if(ev.key=='onSel'){
  27.          for(var i=;i<aInput.length;i++){
  28.              if(ev.newValue==aInput[i].value){
  29.                  aInput[i].checked=false;
  30.              }
  31.          }
  32.      }
  33.     });
  34. }
  35.  
  36. </script>
  37. </head>
  38. <body>
  39. <input type="checkbox" value="香蕉"/>香蕉<br/>
  40. <input type="checkbox" value="苹果"/>苹果<br/>
  41. <input type="checkbox" value="橘子"/>橘子<br/>
  42. <input type="checkbox" value="糖"/>糖<br/>
  43. <input type="checkbox" value="西瓜"/>西瓜<br/>
  44. <input type="checkbox" value="葡糖"/>葡糖<br/>
  45. </body>
  46. </html>

HTML5——同步购物车的更多相关文章

  1. 基于jQuery+HTML5加入购物车代码

    基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. html5 拖放购物车

    1.本例中模仿了购物车添加的功能 主要运用了ondragstart / ondragover/ ondrag 功能 功能比较简单 遗留问题:火狐下图片拖进会被打开 <!doctype html& ...

  3. taotao购物车2 解决购物车本地cookie和服务器redis不同步的问题

    下面的思路逻辑一定要理清楚,比较绕 思路; 前面已经实现了在cookie本地维护购物车的功能, 这次加入和服务器同步功能, 因为 购物车 操作比较频繁,所以,后台服务器 用redis存储用户的购物车信 ...

  4. HTML5客户端数据存储机制Web Storage和Web SQL Database

    引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...

  5. Web前端总结（小伙伴的）

    以下总结是我工作室的小伙伴的心得,可以参考一下 html+css知识点总结 HTMl+CSS知识点收集 1.letter-spacing和word-spacing的区别 letter-spacing: ...

  6. taotao订单系统

    taotao订单系统需求分析.注意点.代码 需要注意的地方: 1.下订单功能一定要使用关系型数据库,因为其设计到钱,而noSql数据库相比来说丢失数据的风险更大. 但是查看订单列表.查看订单详情等功能 ...

  7. Redis进阶知识一览

    Redis的持久化机制 RDB: Redis DataBase 什么是RDB RDB∶每隔一段时间,把内存中的数据写入磁盘的临时文件,作为快照,恢复的时候把快照文件读进内存.如果宕机重启,那么内存里的 ...

  8. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  9. localStorage实现购物车数量单价和结算页面的实时同步

    While there is life there is hope.一息若存,希望不灭 用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步: 购物车页面:实时更新页面,在i ...

随机推荐

  1. hdu 2874 Connections between cities [LCA] (lca->rmq)

    Connections between cities Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  2. Azure 自动化里添加ResourceManager模块

    最近想尝试通过Azure里的自动化功能来控制VM的定时开关机,找到网上的一篇文章,  按照文章操作到"Import Azure Resource manager module"的第 ...

  3. HTML5与触摸界面

    习惯了开发典型的面向电脑端浏览器的网站在开发手机端网站或者移动App的时候面对很多新的问题,这些新的问题,在我看来或多或少会给浏览者在使用网站或App的时候带来不好的用户体验,对于一个产品级应用,用户 ...

  4. Hadoop could not find or load main class

    Error: Could not find or load main class <class_name> 我在尝试使用hadoop definitive guide的代码做练习时,遇到一 ...

  5. 合工大OJ 1330 种树

    Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2, ...

  6. POJ 2773 Happy 2006【GCD/欧拉函数】

    根据欧几里德算法,gcd(a,b)=gcd(a+b*t,b) 如果a和b互质,则a+b*t和b也互质,即与a互质的数对a取模具有周期性. 所以只要求出小于n且与n互质的元素即可. #include&l ...

  7. MySQL数据库学习笔记（十一）----DAO设计模式实现数据库的增删改查（进一步封装JDBC工具类）

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  8. Unity-WIKI 之 DrawArrow

    组件作用 Unity画方向箭头类库,在Scene视图或在Game视图打开Gizmos查看效果 效果预览   wiki地址 http://wiki.unity3d.com/index.php/DrawA ...

  9. java 20 - 5 字节输出流写出数据的一些方法

    首先回顾下 字节输出流操作步骤:  A:创建字节输出流对象  B:调用write()方法  C:释放资源 创建字节流输出对象 FileOutputStream fos = new FileOutput ...

  10. ViewPager -- Fragment 切换卡顿 性能优化

    当ViewPager切换到当前的Fragment时,Fragment会加载布局并显示内容,如果用户这时快速切换ViewPager,即 Fragment需要加载UI内容,而又频繁地切换Fragment, ...