关键词：
一个项目的需求如下： 作为第一个第三方平台，我们可以提供给不同的商家技术支持，即在一个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，也就是之前的这个店，这样，就不会出现问题了。
sessionstoragelocalstorage简介
简介 技术一般水平有限，有什么错的地方，望大家指正。 sessionStorage、localStorage、cookie这三个是我们在浏览器端用来存储数据的，cookie使用起来较为繁琐以后进行总结，主要介绍一下sessionStorage和localStorage的用法。sessionS... 查看详情
sessionstoragelocalstorage存储及如何存储数组与对象
1、存储，获取，清楚sessionStorage.setItem("key",val)sessionStorage.getItem("key")sessionStorage.removeItem("key")2、存数组varaa=[1,2,3];varsStorage=window.sessionStorage;sStorage.aa=aa;console.log(sStorage.aa);//输 查看详情
cookie和sessionstoragelocalstorage对比
相同点：都存储在客户端不同点：1.存储大小cookie数据大小不能超过4k。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。2.有效时间localStorage存储持久数据，浏览器关闭后数据不丢失除非主... 查看详情
sessionstoragelocalstorage和cookie之间的异同
(转)sessionStorage和localStorage是HTML5WebStorageAPI提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中... 查看详情
sessionstoragelocalstorage和cookie之间的区别
sessionStorage和localStorage是HTML5WebStorageAPI提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStor... 查看详情
sessionstoragelocalstorage和cookie对比区分
基本概念CookieCookie是小甜饼的意思。顾名思义，cookie确实非常小，它的大小限制为4KB左右，是网景公司的前雇员LouMontulli在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通... 查看详情
sessionstoragelocalstorage与cookie的异同点
cookie容量4kb，默认各种浏览器都支持，缺陷就是每次请求，浏览器都会把本机存的cookies发送到服务器，无形中浪费带宽。userdata，只有ie支持，单个容量64kb，每个域名最多可存10个共计640k数据。默认保存在C:DocumentsandSettingsAdminist... 查看详情
sessionstoragelocalstorage和cookie之间的区别
共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据... 查看详情
sessionstoragelocalstorage和cookie之间的区别
cookie、sessionStorage、localStorage之间的区别和使用1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断... 查看详情
sessionstoragelocalstorage技术相关以及商家sidsbid记录相关vue相关问题
一个项目的需求如下：作为第一个第三方平台，我们可以提供给不同的商家技术支持，即在一个url后面根据不同的商家来提供不同的查询字符串（包含sid和sbid），所以为了得到这个商家的信息，我们需要使用解析这个查询... 查看详情
sessionstoragelocalstorage和cookie之间的区别
共同点：用于浏览器端存储的缓存数据不同点：(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费;webstorage，会将数据保存到本地，不会造成宽带浪费;(2)、数据存储大小不同：Coo... 查看详情
localstorage和sessionstorage
localStorage和sessionStorage的区别:localStorage(本地存储)大(5M)/cookie(4K)1.大：1280倍2.localStorage不会被发往服务器3.方便localStorage/sessionStoragelocalStorage永久存储sessionStorage会话期存储（浏览器关了就没了）localStorage的用法跟json一模一样loca 查看详情
h5存储方案——cookiesessionsessionstorage和localstorage
...LocalStorage区别4.1、生命周期(同一浏览器下) Cookie SessionStorageLocalStorage生命周期 默认是关闭浏览器后失效,但是也可以设置过期时间仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除,不能设置过期时间除非被清除... 查看详情
html5之本地存储localstorage
...bStorage官方建议为每个网站5MB。WebStorage又分为两种： sessionStoragelocalStorage 从字面意思就可以很清楚的看出来，sessionStorage将 查看详情
jquery和js操作localstorage/sessionstorage的方法（转）
...g.csdn.net/djzhao627/article/details/50747628首先说一下LocalStorage和SessionStorageLocalStorage是对Cookie的优化没有时间限制的数据存储在隐私模式下不可读取大小限制在500万字符左右，各个浏览器不一致在所有同源窗口中都是共享的本质是在读... 查看详情
python100天学习笔记day26javascript-jquery(代码片段)
客户端存储-localStorage和sessionStoragelocalStorage.colorSetting='#a4509b';localStorage['colorSetting']='#a4509b';localStorage.setItem('colorSetting','#a4509b');获取位置信息-geolocationnavigator.geolocation.getCurrentPosition(function(pos) ... 查看详情