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

核心：利用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. hdu 4832 Chess(dp)

    Chess Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. ggplot2颜色操作

    1.颜色列表

  3. Mac/Linux 定时运行命令行

    想要开机运行的话可以通过 mac 自带的 Automator 将要运行的命令打包成一个app,用后在用户组的“登录时启动”列表里加上那个app. 但是想要定时运行就不能这么做了,要用上一个叫cront ...

  4. Linux Commands intro1

    $((expression)) echo $(2+2) :wrong echo $((2+2))  : right echo Front-{A,B,C}-Back Front-A-Back Front ...

  5. [转]【HTTP】Fiddler（二） - 使用Fiddler做抓包分析

    本文转自:http://blog.csdn.net/ohmygirl/article/details/17849983 上文( http://blog.csdn.net/ohmygirl/articl ...

  6. Programming ActionScript 3.0 for Flash

    http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7ec ...

  7. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

  8. 转: CentOS 6.4安装pip，CentOS安装python包管理安装工具pip的方法

    from: http://www.linuxde.net/2014/05/15576.html CentOS 6.4安装pip,CentOS安装python包管理安装工具pip的方法 2014/05/ ...

  9. 修改sqlserver2008默认的数据库文件保存路径

    在SSMS(SQL Server Management Studio)中,右键服务器,然后选择属性. 然后数据库设置,再配置数据库默认位置 方法二,直接使用sql语句修改 USE [master] G ...

  10. unity触发器和碰撞器

    Unity中检测碰撞的方法有两种,一种是触发器一种是碰撞器,现在我来解释一下两种的区别. 触发器:有三种方法,分别是OnTriggerEnter,OnTriggerStay,OnTriggerExit ...