图书购买系统，本地添加购物车(不需要登录一样可以添加购物车，结算时需要登录)

1.category.html页面：显示书籍信息页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>
        <script src="../../js/bootstrap/js/bootstrap.js"></script>
        <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />
        <!--导入category.js文件-->
        <script src="category.js"></script>
        <title></title>
    </head>
    <body>
        <div class="container">
            <ol class="breadcrumb">
              <li><a href="home.html">首页</a></li>
              <li><a  id="navpath" href="#">全部商品</a></li>
            </ol>
        </div>

        <div class="container">
            <div style="margin-left: 100px;margin-right: 100px;background: red;">
                <img src="../../img/otherimages/productlist.gif" style="width: 100%;height: 40px;" />
                <div class="thumbnail text-center pull-left" style="margin: 15px;">
                    <img src="../../img/bookimage/20285763-1_b.jpg" />
                    <p>书名:JAVA模式</p>
                    <p>售价:21.5</p>
                    <input type="image" onclick="addCart('10000','Java模式','21.5','100')" src="../../img/otherimages/buybutton.gif"/>
                </div>
                <div class="thumbnail text-center pull-left" style="margin: 15px;">
                    <img src="../../img/bookimage/20412979-1_b.jpg" />
                    <p>书名:javascript</p>
                    <p>售价:18.5</p>
                    <input type="image" onclick="addCart('10001','javascript','18.5','100')" src="../../img/otherimages/buybutton.gif"/>
                </div>
            </div>
        </div>

        <div class="container">
            <nav class="text-center">
              <ul class="pagination text-center" >
                <li><a href="#"><span>&laquo;首页</span> </a></li>
                <li><a href="#">上一页</a></li>
                <li><a href="#">下一页</a></li>
                <li><a href="#"> <span>末页&raquo;</span></a></li>
                <span  style="line-height: 30px;margin-left: 10px;">3/15</span>
              </ul>
            </nav>
        </div>

    </body>
</html>

2.category.js文件，实现添加购物车功能

//截取url
//动态改变路径导航的信息
$(function(){
    var url = window.location.search;
    url = decodeURI(url);
    var subs = url.substr(url.indexOf("category=")+9);
    $("#navpath").html(subs);
})
//购物车思路：
//1、本地购物车    京东   不要登录一样可以加购物车，结算的时候才需要登录
//2、服务器购物车   淘宝   一定要登录才能添加购物车

//本地购物车:把添加到购物车的数据保存到浏览器中(localStorage)
//方法传参：书的id，书名，书售价，书的库存

//在保存到localStorage的时候，需要先把js对象转换为字符串再保存(localStorage只能够保存字符串)

function addCart(id,name,price,num){
    //1.创建一个js对象
    var book = {
        "product_id":id,   //书的id
        "name":name,       //书名
        "price":price,     //售价
        "num":num,         //库存
        "buynum":1         //购买数量
    }
    //2.获取已经保存的 数据
    var storebooks = localStorage.getItem("carts");
    //将已经获取到的字符串数据转换成数组
    var bookArr = JSON.parse(storebooks);

    //2-1 如果购物车里面数据为空，说明从来没有保存过数据
    if(bookArr==null){
        //创建一个数组
        var books = new Array();
        //把要保存的数据存到数组中
        books.push(book);
        //将数组转换成字符串
        var bookstr = JSON.stringify(books);
        alert(bookstr);
        //将字符串保存到localStorge中
        localStorage.setItem("carts",bookstr);
    }
    //2-2 说明已经保存过数据了
    else{
        //1.判断我们将要保存的书籍是否已经存在购物车了，如果存在，则让购买数量+1
        var isfind = false;
        for(var i=0;i<bookArr.length;i++){
            var b = bookArr[i];
            if(b.product_id==book.product_id){
                b.buynum++;
                isfind = true;
                break;
            }
        }

        //2.如果不存在，则将该书添加到购物车列表中
        if(isfind == false){
            bookArr.push(book);
        }

        //3.把bookArr重新转换成字符串保存
        var s = JSON.stringify(bookArr);
        localStorage.setItem("carts",s);
    }
    alert("添加成功");
}

3.cart.html页面，购物车页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"><br />
        <script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>
        <script src="../../js/bootstrap/js/bootstrap.js"></script>
        <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="../common/head.css"/>
        <script src="../common/head.js"></script>
        <script src="cart.js"></script>
        <title></title>
    </head>
    <body>
        <div class="container">
            <!--正文内容-->
            <div style="margin-left: 100px;margin-right: 100px;">
                <img src="../../img/otherimages/buy1.gif" />

                <div class="panel panel-info table-responsive" style="margin-top: 30px;">
                  <div class="panel-heading text-center"><h4><strong>购物车列表</strong></h4></div>

                  <div id="carttable"><!--这里动态添加购物车数据--></div>
                  <div class="panel-footer" style="padding-left: 90%;">总计：40</div>
                </div>
                <form class="form-horizontal">
                  <div class="form-group">
                    <label for="receiverAddress" class="col-md-1 control-label">地址</label>
                    <div class="col-md-4">
                      <input type="email" class="form-control" name="receiverAddress" id="receiverAddress" placeholder="请输入收货地址">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="receiverName" class="col-md-1 control-label">收货人</label>
                    <div class="col-md-4">
                      <input type="text" class="form-control" id="receiverName" name="receiverName" placeholder="请输入收货人姓名">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="receiverPhone" class="col-md-1 control-label">电话</label>
                    <div class="col-md-4">
                      <input type="text" class="form-control" id="receiverPhone" name="receiverPhone" placeholder="请输入收货人电话">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-12 text-right">
                      <a href="../book/home.html"><img src="../../img/otherimages/gwc_jx.gif"/></a>
                      <a href="#"><img src="../../img/otherimages/gwc_buy.gif"/></a>
                    </div>
                  </div>
                 </form>
            </div>
        </div>
    </body>
</html>

4.cart.js页面 实现购物车动态添加数据功能

//购物车表格动态加载本地购物车的信息
$(function(){
    //1.从localstorge获取所存的购物车的信息
    var books = localStorage.getItem("carts");
    var bookArr = JSON.parse(books);

    //2.声明一个html用来拼接页面
    var html = "";
    html += "<table class='table table-hover text-center'>";
    html += "                <tr class='danger'>";
    html += "                   <th class='text-center'>序号</th>";
    html += "                   <th class='text-center'>商品名称</th>";
    html += "                   <th class='text-center'>价格</th>";
    html += "                   <th class='text-center'>购买数量</th>";
    html += "                   <th class='text-center'>库存</th>";
    html += "                   <th class='text-center'>小计</th>";
    html += "                </tr>";
    //3.遍历数组
    for(var i=0;i<bookArr.length;i++){
        //获取到一本书
        var abook = bookArr[i];

        html += "<tr>";
        html += "<td>"+i+"</td>";
        html += "<td>"+abook.name+"</td>";
        html += "<td>"+abook.price+"</td>";
        html += "<td>"+abook.buynum+"</td>";
        html += "<td>"+abook.num+"</td>";
        html += "<td>"+abook.price*abook.buynum +"</td>";
        html += "</tr>";
    }

    html += "                </table>";

    $("#carttable").html(html);
})

5.效果显示