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

核心：利用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. POJ 2823 Sliding Window

    Sliding Window Time Limit: 12000MSMemory Limit: 65536K Case Time Limit: 5000MS Description An array ...

  2. xargs -n1 -t

    杀掉删除没有释放空间的进程 可以用如下命令,当然也可以写一个循环,不过这一条命令比循环简单 lsof  |grep  deleted  |awk '{print $2}' |xargs  -n1 -t ...

  3. codevs 2822 爱在心中

    codevs 2822 爱在心中  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description “每个人都拥有一个梦,即使彼此不相同, ...

  4. 如何用ZBrush雕刻出栩栩如生的头发（二）

     之前的ZBrush教程教大家使用SubTool为模型添加了杂乱头发效果的两种雕刻手法,今天将继续介绍其他方法对模型头发雕刻技巧和细节进行讲解.文章内容仅以fisker老师讲述为例,您也可以按照自己的 ...

  5. 该怎样提高ZBrush的创作效率

     ZBrush是一款数字雕刻和绘画软件,以强大的功能和直观的工作流程改变了整个三维行业,相信使用ZBrush的人都希望加快雕刻速度提高ZBrush技能,很多雕刻专家也都试图证明加快雕刻速度是否真的能提 ...

  6. [翻译]为你的服务器选择正确的.NET

    英文原文 By Daniel Roth ASP.NET 5 is based on the .NET Execution Environment (DNX), which supports runni ...

  7. POJ 2449 Remmarguts' Date --K短路

    题意就是要求第K短的路的长度(S->T). 对于K短路,朴素想法是bfs,使用优先队列从源点s进行bfs,当第K次遍历到T的时候,就是K短路的长度. 但是这种方法效率太低,会扩展出很多状态,所以 ...

  8. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  9. 介绍linux下利用编译bash设置root账号共用的权限审计设置

    在日常运维工作中,公司不同人员(一般是运维人员)共用root账号登录linux服务器进行维护管理,在不健全的账户权限审计制度下,一旦出现问题,就很难找出源头,甚是麻烦!在此,介绍下利用编译bash使不 ...

  10. result默认返回action中的所有数据，要想返回指定的数据怎么做呢

    result默认返回action中的所有数据,要想返回指定的数据怎么做呢?