sessionStorage、localStorage技术相关以及商家sid、sbid记录相关、vue相关问题
2017-06-10 21:24
274 查看
一个项目的需求如下: 作为第一个第三方平台,我们可以提供给不同的商家技术支持,即在一个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,也就是之前的这个店,这样,就不会出现问题了。
出现的问题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,也就是之前的这个店,这样,就不会出现问题了。
相关文章推荐
- 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释
- 关于智能家居主界面,通话记录界面设计的相关问题(ViewPager以及自定view)
- 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释
- 技术记录----开机向导的问题解决以及流程整理
- 尽管关于Java中文问题的讨论已经相当多了,但由于Java的相关技术标准繁多,面向Java的Web服务器、应用服务器以及JDBC数据库驱动等都没有官方的标准,所以Java应用在处理中文时所存在的问
- 在vue中用webpack打包之后运行文件问题以及相关配置
- Unity学习日常问题记录九-关于Lookat与模型坐标系的相关的问题以及父子物体的刚体
- 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
- 摩托罗拉SE4500 三星 S3C6410 Wince6.0平台软解码调试记录以及驱动相关问题解释
- [基础技能] 安全技术——数字签名与数字证书以及其中涉及到的相关伪造问题
- oracle单机安装记录以及相关问题解决
- 转载hadoop实践路上异常问题以及相关解决方法记录
- CListCtrl自绘或者设置相关的技术问题2
- 今日开始,记录一点自己感兴趣的技术问题
- 关于ORACLE的ora-12505报错以及连接问题的解决及相关资料
- 面试相关-非技术问题
- 面试相关-非技术问题
- Hook API相关技术以及例子,Hook API的原理其实是通过核心函数强制修改原API的头部指针
- Axure RP Pro - 相关问题 - Button按钮部件不支持设置文字以及解决方法
- ACL实验以及相关问题