HTML5——同步购物车
同步购物车，及打开两个或多个界面，选择购物时同步，让显示的内容一致，这样不至于购买出错。
核心：利用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——同步购物车的更多相关文章
- 基于jQuery+HTML5加入购物车代码
基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- html5 拖放购物车
1.本例中模仿了购物车添加的功能 主要运用了ondragstart / ondragover/ ondrag 功能 功能比较简单 遗留问题:火狐下图片拖进会被打开 <!doctype html& ...
- taotao购物车2 解决购物车本地cookie和服务器redis不同步的问题
下面的思路逻辑一定要理清楚,比较绕 思路; 前面已经实现了在cookie本地维护购物车的功能, 这次加入和服务器同步功能, 因为 购物车 操作比较频繁,所以,后台服务器 用redis存储用户的购物车信 ...
- HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
- Web前端总结（小伙伴的）
以下总结是我工作室的小伙伴的心得,可以参考一下 html+css知识点总结 HTMl+CSS知识点收集 1.letter-spacing和word-spacing的区别 letter-spacing: ...
- taotao订单系统
taotao订单系统需求分析.注意点.代码 需要注意的地方: 1.下订单功能一定要使用关系型数据库,因为其设计到钱,而noSql数据库相比来说丢失数据的风险更大. 但是查看订单列表.查看订单详情等功能 ...
- Redis进阶知识一览
Redis的持久化机制 RDB: Redis DataBase 什么是RDB RDB∶每隔一段时间,把内存中的数据写入磁盘的临时文件,作为快照,恢复的时候把快照文件读进内存.如果宕机重启,那么内存里的 ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- localStorage实现购物车数量单价和结算页面的实时同步
While there is life there is hope.一息若存,希望不灭 用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步: 购物车页面:实时更新页面,在i ...
随机推荐
- ubuntu 添加启动器
终于搞定了安卓开发环境,不知道折腾了多少次,多少个IDE,解决了一个问题,又冒出一个问题.烦死了,最后关头,都快放弃了,重启电脑,打开 android stuio 编译运行居然陈宫了,没有报错,why ...
- LessonFifth Redis的持久化功能
#验证redis的快照和AOF功能 1.先验证RDB快照功能,由于AOF优先级高,先关闭,然后测试,截图如下 2.设置打开AOF 然后进行实验,截图如下: ...
- NUL 与 NULL
NUL 与 NULL 在C语言中,字符串表示为字符的数组.字符串最后一个字符为空字符 ('\0'),官方将其定义为 NUL ,而 NULL 是一个宏,其定义如下: #define NULL ((voi ...
- JavaWeb学习----JSTL标签库
一.JSTL简介: JSTL全名为JavaServer Pages Standard Tag Library,中文名称为JSP标准标签函数库,目前最新的版本为1.2.JSTL是由JCP(Java Co ...
- Highlighting System
Highlighting System 法线贴图漫反射着色器 Unity论坛:http://forum.unity3d.com/threads/143043-Highlighting-System-R ...
- Android Studio系列教程四--Gradle基础
Android Studio系列教程四--Gradle基础 2014 年 12 月 18 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang ...
- 错误异常 （1）Android Studio错误提示：Gradle project sync failed. Basic functionality (eg. editing, debugging) will not work properly
[已解决]Android Studio错误提示:Gradle project sync failed. Basic functionality (eg. editing, debugging) wil ...
- sqlzoo.net刷题3
Find the continents where all countries have a population <= 25000000. Then find the names of the ...
- HttpServletRequest 中 getRequestURL和getRequestURI的区别
比如说有这样的一个页面 test1.jsp======================= <a href ="test.jsp?name=wf">跳转到test2.js ...
- 装系统提示缺少所需的CD/DVD驱动器设备驱动程序
昨晚用ultraISO和win7 旗舰版(ultimate)的镜像做了个启动U盘,插在自己新电脑上安装过程中提示“缺少所需的CD/DVD驱动器设备驱动程序”,用网上的很多办法都不行,最后找官网的客服问 ...