sessionStoragelocalStorage技术相关以及商家sidsbid记录相关vue相关问题

Posted 2020-09-22 Wayne Zhu

　　一个项目的需求如下： 作为第一个第三方平台，我们可以提供给不同的商家技术支持，即在一个url后面根据不同的商家来提供不同的查询字符串（包含sid和sbid），所以为了得到这个商家的信息，我们需要使用解析这个查询字符串然后从后天获取数据。

　　出现的问题1： 由于这是vue做的单页面应用，在下方有不同的按钮路由到不同的页面， 所以如果点击到其他路由，然后再点击回来的时候，根据路由设置，我们的首页的url此时应该是没有查询字符串了，当然，这个不重要啊，因为我们可以把数据（sid和sbid）放在一个全局变量中啊， 每次到首页的时候我们再请求就好了，但是这存在的一个问题是一旦用户刷新，那么这个全局变量势必会丢失，所以页面也就404了，所以为了解决这个问题，我们必须要将sid和sbid存放到本地存储中。ok！ 这里确定了使用本地存储的解决方案。但是随之就出现了第二个问题。

　　出现的问题2： 本地存储包括sessionStorage和localStorage，我们应该选用哪一种方案更为合适呢？ 由于每次的sid和sbid可能都是不一样的（打开不同的商家），所以存在sessionStorage中还是非常合适不过的，只要回话结束就可以不再本地存储sid和sbid了。但是由于这个项目中涉及到了登录、支付等，在使用微信登录时，就需要先跳转到微信的页面，然后再跳转回来，一旦跳转回来那么这个session就丢失了，实际上session即使是刷新页面也是不会丢失的，但是一旦跳转到别的页面下再跳转回来就是会丢失的。 所以在这样的情况下。还是需要使用localStorage的。 

　　出现的问题3： 使用localStorage是可以的，但问题时在一进入首页的时候，我们就将sid和sbid存入，这时没有问题，但是当从其他路由再回来的时候这时的查询字符串就丢失了，那么我们还去存sid和sbid，就会导致sid和sbid都成了undefined， 所以在存取之前我们需要加一个判断 --- 就是sid和sbid在localStorage中是否为空，如果已经存在了，那么我们就不要再次存取，这时也就没有覆盖成空的值的问题了。

　　出现的问题4：在上面的一步中，貌似我们添加了一层判断之后就会解决问题，但是新的问题又出现了，即当用户下次打开了一个新的商铺，那么这个url中查询字符串的sid和sbid和存在localStorage中的就不同了，所以这样的问题就是一旦发现本地已经有了，所以不再覆盖，这样用户无论打开哪一个链接最终打开的都是同一个页面了。于是，我们需要再添加一个判断 --- 即载入首页之后，先使用正则来判断当前url中是否含有 sid和sbid相关的关键字，如果有，说明这是一个新的链接（不绝对是，后面分析），那么就重新使用这个链接中的sid和sbid，那么就可以确保使用的都是最新的店铺。这里的判断直接使用正则表达式中的 test 即可。

　　出现的问题5： 在问题4中，我们提到过即使url中含有sid和sbid相关的关键字，但是也是有问题的，因为如果我们没有跳转到其他页面时，那么这个查询字符串就是一直存在的，所以如果再跳转到首页然后加载是没有必要的。这时我们的解决办法是使用vue中的keep-alive，即每次点击回来的时候不重新加载，那么写在首页中的created钩子函数中创建localStorage的步骤也就用不上了，所以这才是最好的解决办法。 

　　最终解决办法，使用localStorage、两层判断、keep-alive解决这个问题。

 

 

　　补充： 之前的说法 --- 两层判断实际上是有问题的，因为只要一层判断即可，即 --- 如果在重新进入或刷新的时候，当前页面的url中有相应的关键字，我们就使用，没有else语句。 因为通过这种方式一旦进入页面，那么一定最开始是有的，然后在当前网站不同路由跳转时，使用keep-alive的方式就不会出现进入create重新判断的情况。 而如果是在登录和支付之后，可能这个查询字符串没有了，那么就会进行判断，显然，匹配不到自然不会替换，而是使用本地localStorage中的sid和sbid，也就是之前的这个店，这样，就不会出现问题了。