学习前端以来，一直很好奇像京东，淘宝这种大型网站的购物车是怎么做到统一的，就去搜索了一些资料吧！大致的看了一下，自己实战了下，俗话说的好，读万卷书不如行万里路！购物车只是一个很小的案例，但也可以去动手做一做，感受下过程！积少成多！

这案例主要是通过本地储存来实现的，我用了两种方法，一种是cookie，另一种是localStorage。cookie会跟随http发送给服务器，并且有时间限制，在没有设置时间时，默认过期时间是关闭浏览器就过期；localStorage是本地的，永久的，储存的数据也更大！这是cookie和localStorage的区别！

！！！敲重点，我所写的都是基于原生，没有使用jQuery！

就先用cookie来实现下效果吧！

1. 目前没有后端，那就先自己模拟下后端传输数据；准备一个json文件，里面存放的就是数据！类似下图这样！
2. 引入之前封装好的ajax和cookie的js文件，也可引入jQuery，但jQuery没有提供cookie的方法，只有插件，网上下一个即可！
     下面是封装ajax的代码

   function ajax(options){
       var {type,url,success,data,error,timeout}=options;
       data=data||{};
       type=type||"get";
       timeout=timeout||2000;
       var str="";
       for(var i in data){
           str+=`${i}=${data[i]}&`;
       }
       if(type=="get"){
           var d=new Date();
           url=url+"?"+str+"_yjyt="+d.getTime();
       }
       var xhr=new XMLHttpRequest();
       xhr.open(type,url);
       // console.log(url);
       xhr.onreadystatechange=function(){
           if(xhr.readyState==4&&xhr.status==200){
               success&&success(xhr.responseText);
               error=null;
           }else if(xhr.readyState==4&&xhr.status!=200){
               error&&error(xhr.status);
               success=null;
               error=null;
           }
       }
       setTimeout(()=>{
           error&&error(timeout);;
           success=null;
       },timeout);
       if(type=="post"){
           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           xhr.send(str);
       }else{
           xhr.send();
       }
   }

    接下来的是cookie的代码

   function setCookie(key, val, options) {
       // console.log(options.expires);
       options = options || {};
       var path = "";
       if (options.path) {
           path = ";path=" + options.path;
       }
       var expires = "";
       if (options.expires) {
           var d = new Date();
           d.setDate(d.getDate() + options.expires);
           expires = ";expires=" + d;
           console.log(expires);
       }
       document.cookie = key + "=" + val + path + expires;
   }
   function getCookie(key) {
       // var arr=document.cookie;
       // console.log(arr);
       var arr = document.cookie.split(";");
       console.log(arr);
       for (var i = 0; i < arr.length; i++) {
           if (arr[i].split("=")[0] === key) {
               return arr[i].split("=")[1];
           }
       }
       return "";
   }
   function removeCookie(key, options) {
       options = options || {};
       options.expires = -1;
       // console.log(options);
       // console.log(key);
       setCookie(key, 23, options);
   }

3. 接下来就是布局，简单点来，感受下就好，不好看可以自己后期通过css改，这都是写小问题哈，我只说关键的地方！布局简陋，可以自行发挥哦！
   显示商品列表的布局

       <h2>这是商品列表<a href="car-local.html">去结算</a></h2>
       <div class="cont">
           <p>不好意思，卖完了！</p>
       </div>

    购物车的布局

       <h2>这是结算页<a href="shop.html">继续购物</a></h2>
       <table border="1" rules="all" width="900" align="center">
           <thead>
               <tr>
                   <th>图片</th>
                   <th>名字</th>
                   <th>价格</th>
                   <th>数量</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbod