解决微信小程序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，又填了一个小程序的坑~

以上关于解决微信小程序web-view嵌套H5时使用setStorageSync,localStorage.setItem有时候失效的问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。