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

核心：利用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. NetBIOS

    NetBIOS是Network Basic Input/Output System的缩写,严格来说它不是一个网络协议,而是一套API,为局域网内应用程序通信提供会话层(OSI七层参考模型)的支持. N ...

  2. 详解apache的allow和deny

    今天看了一篇关于apache allow,deny的文章收获匪浅,防止被删,我直接摘过来了,原文地址!!! !http://www.cnblogs.com/top5/archive/2009/09/2 ...

  3. const 用法总结

    在编程中我们常常会使用敞亮的概念,除了使用#define定义的宏之外,我们还有更好的选择,就是使用const关键字. 1.const关键字的意义 当我们定义一个变量,并且希望这个变量不再改变(编译器会 ...

  4. readonly与const

    readonly与const 在C#中,readonly 与 const 都是定义常量,但不同之处在于:readonly 是运行时常量,而 const 是编译时常量. ; public void Te ...

  5. js计算系统当前日期是星期几的几种方法

    方法一: // 计算系统当前是星期几 var str = "今天是星期" + "日一二三四五六".charat(new date().getday()); 方法 ...

  6. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  7. Dvwa writeup

    DVWA(Dam vulnerable Web Application)是使用PHP+Mysql编写的一套用于常规漏洞教学和漏洞挖掘的一个测试学习程序,在此程序中包含了常见的web方面的漏洞,如命令行 ...

  8. Volley（五）—— 自定义Request

    详细解读Volley(四)—— 自定义Request Volley中提供了几个Request,如果我们有特殊的需求,完全可以自定义Request的,自定义Request自然要继承Request,那么本 ...

  9. Java虚拟机工作原理详解 ( 二 )

    首先这里澄清两个概念:JVM实例和JVM执行引擎实例,JVM实例对应了一个独立运行的Java程序,而JVM执行引擎实例则对应了属于用户运行程序的线程:也就是JVM实例是进程级别,而执行引擎是线程级别的 ...

  10. 判断变量是否为json对象

    var m ={a:'A'}; if(typeof m == 'object' && JSON.stringify(m).indexOf('{') == 0){//判断变量m是不是js ...