Localstorage Real-time synchronization of the unit Price and settlement page of the shopping cart

Source: Internet
Author: User

Tag: Cal uses data to calculate on () type Tor tag oca

While there are life there is hope.
If one interest is saved, hope is not extinguished.

Use Localstorage to achieve a simple shopping cart quantity unit price and settlement page two pages of real-time synchronization:

Shopping Cart Page:
Updates the page in real time, storing localstorage when the value of input changes

<script>
Window.onload=function () {
var onum=document.getelementbyid (' num ');

Onum.onchange=function () {
Localstorage.apple=onum.value;
};
};
</script>
<body>
Apple: <input type= "number" id= "num" max= "ten" min= "0" required step= "2"/>
Unit Price: 20 RMB/each
</body>

Billing page:
Use the Onstorage event to get real-time data stored in the shopping cart page and calculate the total price of the display in real-time, of course we can continue to refine this page

<script>
Window.onload=function () {
var odiv=document.getelementsbytagname (' div ') [0];

Window.onstorage=function (EV) {
Odiv.innerhtml= ' total consumption ¥ ' +localstorage.apple*20+ ' yuan ';
};
};
</script>
<body>
<div> total consumption ¥ RMB </div>
</body>

Localstorage Real-time synchronization of the unit Price and settlement page of the shopping cart

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.