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

核心：利用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——同步购物车的更多相关文章

  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. Super A^B mod C

    Given A,B,C, You should quickly calculate the result of A^B mod C. (1<=A,C<=1000000000,1<=B ...

  2. 记一次linux服务器问题处理过程

    本周二的时候,涛哥找我,说明了一件事,在安装ganglia的时候,发生的一个问题. 在一台suse 10 sp1的服务器上,安装ganglia的一个依赖包,libconfuse.rpm,安装完成之后, ...

  3. 2.NopCommerce中文语言包

    由于NopCommerce是纯英语环境,给英语不好的管理人员带来诸多不便. NopCommerce支持多语言环境,所以我们只要安装中文语言包,让NopCommerce支持后台中文操作环境. 首先先下载 ...

  4. 【读书笔记《Android游戏编程之从零开始》】3.Android 游戏开发常用的系统控件（Button、Layout、ImageButton）

    3.1 Button Button这控件不用多说,就是一个按钮,主要是点击后进行相应事件的响应. 给组件添加ID属性:定义格式为 android:id="@+id/name",这里 ...

  5. 拓扑排序 codevs 4040 cojs 438

    codevs 4040 EZ系列之奖金  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 钻石 Diamond 题目描述 Description 由于无敌的WRN在2015年世界英 ...

  6. [转]微服务（Microservice）那点事

    WHAT – 什么是微服务 微服务简介 这次参加JavaOne2015最大的困难就是听Microservice相关的session,无论内容多么水,只要题目带microservice,必定报不上名,可 ...

  7. java 21-13 合并

    SequenceInputStream(Enumeration<? extends InputStream> e)           通过记住参数来初始化新创建的 SequenceInp ...

  8. HTML5-WebSocket技术学习(2)

    上一篇介绍了websocket的基本用法.这篇介绍websocket的一个框架: socket.io socket.io是一个既可以用在客户端又可以用在服务器端的框架. 本篇介绍socket.io在客 ...

  9. Android_firstClass

    一个Project 创建后,大概的文件目录如下:在Android Studio每个Project,相当于Eclipse 的WorkSpace:每个Module(上图的app 目录)相当于Eclipse ...

  10. [服务]ftp主动模式和被动模式

    经常忘记这个东西.于是总结下这东西感受下这个协议. FTP连接方式 控制连接:标准端口为21,用于发送FTP命令信息 数据连接:标准端口为20,用于上传.下载数据 数据连接的建立类型: 主动模式:服务 ...