html5--Sync Shopping Cart

<! DOCTYPE Html>"Utf-8">"Text/javascript">window.onload=function () {varAinput=document.getelementsbytagname ('input');  for(varI=0; 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 is the JS binding event notationWindow.addeventlistener ('Storage', function (EV) {//events on the current page do not trigger this event (storage)     if(ev.key=='sel'){          for(varI=0; i<ainput.length;i++){             if(ev.newvalue==ainput[i].value) {Ainput[i].checked=true; }         }     }Else if(ev.key=='Onsel'){               for(varI=0; i<ainput.length;i++){             if(ev.newvalue==ainput[i].value) {Ainput[i].checked=false; }         }          }    });}</script>"checkbox"Value="Banana"/> Banana <br/><input type="checkbox"Value="Apple"/> Apple <br/><input type="checkbox"Value="Orange"/> Orange <br/><input type="checkbox"Value="Sugar"/> Sugar <br/><input type="checkbox"Value="Watermelon"/> Watermelon <br/><input type="checkbox"Value="glucose"/> Glucose <br/></body>

Sync your shopping cart, and open two or more screens, and choose to sync when shopping, so that the content is consistent so that you don't have to buy errors.

Core: Implemented with storage events and localstorage local storage

Picture Simple display:

The code is as follows:

html5--Sync Shopping Cart