解决微信小程序web-view嵌套H5时使用setStorageSync,localStorage.setItem有时候失效的问题

问题描述

1. 我用 uniapp 写的一个 H5，嵌套在微信小程序 web-view 中，但是用户反应，登录过后，老是出现需要登录的情况，安卓手机普遍出现，ios 情况较少，导致用户体验很差，业务模式很难继续进行下去。
2. 原因？未知，社区找了很多资料，官方也没有给出具体的解决方案。
3. 之前的写法：登录成功之后，将用户信息存储在 localStorage 中：

   if(res.msg == '登录成功'){
       uni.setStorageSync('username', res.username);
       uni.setStorageSync('token', res.token);
       localStorage.setItem("username2",res.username);    
       localStorage.setItem("token2",res.token);
   }
   

4. 解决方案的写法，将用户信息用 cookie 进行存储：

   if(res.msg == '登录成功'){
       uni.setStorageSync('username', res.username);
       uni.setStorageSync('token', res.token);
       localStorage.setItem("username2",res.username);    
       localStorage.setItem("token2",res.token);
       document.cookie="username="+ res.username;
       document.cookie="token="+ res.token;
   }

获取 cookie，我写在了全局 js 文件中了:

//获取 cookie
Vue.prototype.getCookie = function(objName){
    var arrStr = document.cookie.split("; ");
    for (var i = 0; i < arrStr.length; i++) {
	var temp = arrStr[i].split("=");
	if (temp[0] == objName){
	    return decodeURI(temp[1]);
	}
    }	
}

调用：

data() {
    return {
	username:this.getCookie('username') || uni.getStorageSync('username') || localStorage.getItem('username2')
    }
}

神奇的是，你会发现完美解决上述问题，用户反应也不会出现重新登录的情况了。OVER，又填了一个小程序的坑~