• sessionStorage、localStorage技术相关以及商家sid、sbid记录相关、vue相关问题


      一个项目的需求如下: 作为第一个第三方平台,我们可以提供给不同的商家技术支持,即在一个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,也就是之前的这个店,这样,就不会出现问题了。

  • 相关阅读:
    mariadb密码问题
    高性能负载均衡之算法
    高性能负载均衡之分类架构
    Python之Web2py框架使用
    这个世界上总有比你更努力的朋友
    2015年度新增开源软件排名TOP100
    Netty4.0 用户指南
    C#语言
    C# 注释
    .NET中XML 注释 SandCastle 帮助文件.hhp 使用HTML Help Workshop生成CHM文件
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6980000.html
Copyright © 2020-2023  润新知