参考美团、饿了么 && localStorage

时间 2019-11-11

标签参考饿了 localstorage 繁體版

原文原文链接

localStorage使用。

为何要使用 localStorage？

由于在以前的讨论过程当中，问题：每次添加一件商品和去掉一个商品都须要发送一个http请求来更新购物车，目的是为了在用户下次登陆的时候能够记得购物车里的内容，这样，若是用户选了以后即便没有付款，可是下次登陆的时候仍然一打开页面咱们就能够把localStorage中的内容显示出来，这样，用户体验会更好一些，好比 饿了么在小程序上的作法就是这样，可是美团不是，美团并无保存购物车中的内容，而饿了么保存了，之因此能够判断使用的时localStorage，是由于咱们在断网的状况下他也能够记录。

之因此可用，是由于在兼容性上也不存在问题，支持IE8，Android2.1（几乎是全部的了）、以及iOS3，因此兼容想上能够作。

另外，localStorage能够存储JSON字符串，因此说数据也没有问题，而且本地的存储量在5M，足以知足咱们的需求。

一样的，localStorage也存在跨域的问题，只能在一个网站下面使用，废话很少说，开始吧。

具体思路：

当用户添加一件商品的时候，咱们就把相应的商品的sbgaid值存储到localStorage中，而且由于使用localStorage也只须要购物车部分，咱们如今有两种选择：

一种是添加一个商品存储到一个键值对中；删除一件商品，就删除一个键值对。

优势：比较简单，添加setItem，删除removeItem。缺点：可能会比较乱，全是一堆键值对。

还有一种作法是先新建一个对象，而后添加一个商品，就把键值对添加到这个对象上，而后在JSON.stringify，而后再存储到locolStorage中。

优势: 可能看上去能够整洁一些。缺点：须要不断的更新这个对象，而后就是转换和替换JOSN字符串，结果就是消耗性能。

师兄的意思是从商品中寻找localStorage，咱们能够来使用localStorage的遍历方法判断是否相等来作。。

须要知道的时，咱们须要存储的是什么？一个是sbgaid，这个是每个商品都不一样的，因此能够做为键，那么值是什么呢? 固然就是用户须要买的数量了！存储的过程当中，若是add，就amount为1，若是remove，那么就直接删除这个键值对便可。因此仍是使用前者好一些。

综合考虑两种，其实用户的购物车每每不多，因此即便是散的键值对，也不会很乱，影响不大，因此我决定最终采用第一种作法。

2017年6月19日更新

　　目前项目的需求是作成微商厦的形式，因此说咱们须要改变localStorage的存储形式，对应于不一样的店铺都要有不一样的k-v，大体以下所示：

    var sbid1 = {
        // 商品标记
        sbgaid1: {
          name: 'apple',
          number: 1,
          unitPrice: 25,
          unit: "个",
          sbgaid: 'sbgaid1'
        },
        sbgaid2: {
          name: 'pear',
          number: 1,
          unitPrice: 85,
          unit: "斤",
          sbgaid: 'sbgaid2'
        },
        sbgaid3: {
          name: 'pig',
          number: 1,
          unitPrice: 5,
          unit: "头",
          sbgaid: 'sbgaid3'
        },
        // 总价，在订单页刷新的时候是须要的。
        totalPrice: 115
    };

    var sbid2 =  {
        sbgaid1: {
          name: 'apple',
          number: 1,
          unitPrice: 25,
          unit: "哦哦",
          sbgaid: 'sbgaid1'
        },
        sbgaid2: {
          name: 'pear',
          number: 1,
          unitPrice: 5,
          unit: "斤",
          sbgaid: 'sbgaid2'
        },
        sbgaid3: {
          name: 'pig',
          number: 1,
          unitPrice: 15,
          unit: "头",
          sbgaid: 'sbgaid3'
        },
        totalPrice: 45
    };

    // 存储方式二
    localStorage.setItem('sbid1', JSON.stringify(sbid1));
    localStorage.setItem('sbid2', JSON.stringify(sbid2));

总体思路:

　　1、

　　首先解决添加商品和减去商品的问题，在添加商品的时候，首先检测当前的sbid是否存在， 若是不存在就建立一个值为相应sbid的localStorage键值对，值为一个对象，而后对象中查看是否有相应的商品，若是有相应的商品，咱们就直接给number++,若是没有相应的商品，咱们就建立一个该商品的对象，并保存相应的信息。而后再存储。若是是减去一个商品，就要直接减1，若是结果为0，那么删去对象的这个键就能够了。

补充：

　以前试了一下采用localStorage作购物车的页面，可是有一个问题很明显的出现了。

　仍是要先说一说饿了么为何要用localStorage，这是由于饿了么但愿当用户某次选中某些产品以后，而后退出，在下次进来的时候能够显示出这些以前点击过的商品。

　这一点很重要，我以前尝试的方法是采用组件懒加载的方式，也就是说，好比一个店家中五个分类，每一个分类下大概有30件产品，当我进入主页时，我会自动把第一个分类下的产品显示出来10条（注意：不是显示彻底）。以下所示：

　　而后获取到这些数据以后，就把数据存放到vue的store中，这样，下次用户再加载时，就可使用使用store中的了。

　　若是我但愿看到该分类下的更多，那么我必定会向下拉，这里我使用了懒加载，当用户拉到底部时，开始加载更多的数据，这样就避免了没必要要的数据浪费。

　　当看其余分类下的产品时，好比我点击一下哈哈，这时又会发送一个ajax请求，请求到这个页面下的前10条数据。当我但愿看更多时，拉到底部开始加载更多数据。

　　 而这就有一个问题！ --- 那就是若是暂时性的网络差，那么我可能已经点击了哈哈，可是界面还停留在蔬菜的内容上，这是由于vue的view是由数据驱动的，我这样的作法若是没有获取到数据，那么界面就不会发生变化，这样的用户体验是很是的很差的。因此这种方法不可取。

那么饿了么团队处理这种问题的思路是什么呢？

　打开饿了么的web app，能够很容易发现，饿了么的思路以下：vue

　　进入首页，先定位（这个不管是美团仍是饿了么都是这么作的，优势是能够根据你的位置来提供附近的店家，可是缺点也是存在的，它占用带宽比较多，4g的网络还要加载一会，若是网络再差一点，那么几乎要卡死。），定位成功以后就是推荐商家的界面，每个店家是一个item，而且咱们能够无限向下拉，这个界面采用了懒加载的方式，用户体验仍是很不错的（除了以前说到的位置定位之外）。对于这些店家的介绍无非是店名、评分、位置、月订单数、配送费、起送价格、一些优惠政策等等。 web

　　进入其中的一个店家以后，其上半部分是店家的介绍，下面是商品的罗列和能够左右切换的评分。对于商品而言，一样，左边是分类，右边是商品。主要说一说它的实现方式：进入店家以后，先显示分类，而后显示出全部分类下的全部商品！！！！而不是点击一个分类以后再发送ajax。而且只有第一个分类的图片是事先加载好的。其余分类只是加载了基本的数据，而没有加载图片，咱们经过断网就能够发现。而且不管一个分类下有几十件商品，他都是一次性加载完的，那么这样作的好处是什么呢？我我的认为好处有如下几点：ajax

第1、这是最为重要的一点 --- 一次性加载完全部的数据，咱们就能够和本地的localStorage作比较，而后把用户上次选择过的商品标记出来，让用户快速看到以前选了的商品，由于好比我以前的作法，每次只加载一个分类的下的10件商品，那么这个分类下的其余商品因为没有请求，因此和本地的localStorage就没法比较，因此说咱们就没法标记用户以前的购物车内容。而且利用localStorage的方式能够节省很多带宽，很好用。而若是一次所有加载完成，那么咱们就能够直接标记处全部了。
第2、这样作所浪费的带宽并很少，读取localStorage的性能消耗应该是能够接受的。由于对于其余分类下的产品咱们没有下载图片，而只是接受一下数据而已，好比这个店家共有五个分类，那么咱们只不过就多使用了4个http请求而已，为何这么说呢？由于咱们一下请求了全部的商品，关键是没有请求图片，咱们知道一个图片就要发送一个http请求，而且图片的大小每每要比数据大得多！！！因此这种方法是可取的。只要咱们可以解决如何作到只请求数据，而不请求图片便可。再说一下localStorage消耗的性能问题 --- 首先说明：购物车必定是从商品来匹配购物车的内容，即接收到一个数据，而后遍历购物车便可。通常用户的购物车不可能有太多商品，因此一个数据循环那么几个localStorage，几乎是不怎么消耗性能的，这点我以为没必要担忧。
第3、大大提升了用户体验。为何这么说呢? 以前我提到过个人作法的问题，就是点击一个分类请求其中的内容并显示，这样的缺点在于 --- 若是在网络较差的状况下，咱们所获得的内容可能仍是原来的，尚未被替换。可是若是使用这种方式，一个很大的好处就是 --- 由于已经得到了全部数据，因此在切换上面数据的更新是很快的，彻底不存在延迟的问题，而图片的加载就取决于你的网络状况了，可是大多数状况下，咱们并不在乎图片是否显示，可能咱们只是看到名字以后就下单了，因此这对于提升用户体验的帮助很是的大！

　　总而言之，能够采起这种思路！用户体验必然获得大幅度的提升！！！！数据库

　　可是使用这种方式，存在哪些亟待解决的问题呢？小程序

首先，应该解决请求时的pageSize问题，如何作到一次性获取全部的数据？
如何作到对于其余的分类只请求数据，而不请求图片？
是否须要所谓的复选框？美团、饿了么都是没有的，而且意义可能不大！
首页是否须要添加更多的内容呢？
微信小程序的开发须要吗？仍是挺愿意作一个小程序的。

　 回答问题：后端

若是商家中的商品有10000条，那么咱们可能返回10000条数据吗？那是不可能的，因此不可能让后端作到一下返回这么多数据。另外，若是数据库有脏数据，那么显然也是不适合的，因此任忠锋师兄的建议是取一个比较大的数字就能够了，好比50条数据，对于通常的商家而言，50条数据每每就表明了这个分类下的全部数据。
只请求数据，不请求图片可使用 jqury插件 lazyload，固然对于vue也是同样的。
仍是须要复选框的，毕竟若是作好了，那么后面想要用就用，不想要用就算了。
根据任忠锋师兄的想法首页可能须要添加一些优惠信息。
微信小程序实际上能够在这个项目作完以后着手作了，若是能够实现相同的功能，那么何乐而不为呢？

　　在尝试这个方法的过程当中，我仍是不可避免的遇到了问题。其实也不是问题，只是我以前的想法可能出现了误差。好比说，对于用这个方式咱们来分析一下图片是怎么加载的。即一进入以后首先加载了必需要加载的东西。微信小程序

　　而且能够看到加载其余种类的商品数据只发了3个http请求，而且请求到的数据量是很小的，因此这种思路是绝对划得来的。跨域

　　对于饿了么，咱们还能够发现它作的一个比较好的地方，那就是在进入一个店铺以后，用户体验作的是真的很棒，好比我先进入这个店，它此时并无获取图片，而是等到获取了全部的分类以后才开始获取图片。若是不是这样作，那么咱们颇有可能在获得其余分类的时间会很是长。微信

　　即进入店铺，优先获取全部分类下的全部商品的数据，这是第一步，第二步才是获取第一个分类下的图片。 网络