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——同步购物车

最新文章

热门文章