苹果(ios)系统设置中文cookie不生效的问题

问题描述：

使用苹果手机打开H5页面，在登录页面勾选 “记住我” 功能，登录成功后再退出系统重新登陆，发现用户名没有回显的问题
![在这里插入图片描述](https://img-blog.csdnimg.cn/6652ed6502a2441b97cbaa58b072820a.png
然后使用真机调试，发现在ios系统下cookie设置中文没有设置成功，后来在存cookie的时候对中文进行了编码，取cookie的时候再进行解码就可以完美解决这个bug了！

vConsole 手机前端开发调试利器：

在解决问题前，为了方便移动端真机调试，在这里给大家介绍一款移动端真机调试利器。

vConsole 介绍：

vConsole 是一个轻量、可拓展、针对手机网页的前端开发者调试面板。具有的功能如下：

• 查看 console 日志
• 查看网络请求
• 查看页面 element 结构
• 查看 Cookies、localStorage 和SessionStorage
• 手动执行 JS 命令行
• 自定义插件

在移动端调试的时候这些功能完全够用了！

vConsole 的使用：

引入：
1、方法一：通过npm安装

npm i vconsole --save-dev

安装完成后在项目的src/utils目录下新建一个vconsole.js文件，在该文件下导入vconsole并创建vconsole实例对象，代码如下：

import Vconsole from 'vconsole'
const vConsole = new Vconsole()
export default vConsole

然后再需要调试的页面中引入vconsole.js文件即可：

import '@/utils/vconsole'

2、方法二：通过CDN的方式引入：

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
  var vConsole = new window.VConsole();
</script>

引入vconsole后，会在页面中看到如下这样一个按钮：

点击右下方的vConsole按钮，就可以打开调试面板了：

注意：建议vconsole只是在开发环境下使用，线上环境建议把vconsole功能关闭！！！

问题解决：

• 存cookie的时候使用encodeURI进行编码
• 取cookie的时候使用decodeURI进行解码

存cookie：

// 1、使用document.cookie的方式
window.document.cookie = `userName=${encodeURI('用户名')};path=/;expires=7}`

// 2、使用js-cookie库的方式
import Cookies from 'js-cookie'
Cookies.set('userName', encodeURI('用户名'), { expires: 7 })

取cookie：

// 1、使用document.cookie的方式
const cookies = document.cookie.split('; ')
for (var i = 0; i < cookies.length; i++) {
	const arr2 = cookies[i].split('=')
	if (arr2[0] == 'userName') {
		// 进行解码
		form.userName = decodeURI(arr2[1])
	} 
}

// 2、使用js-cookie库的方式
import Cookies from 'js-cookie'
form.userName = decodeURI(Cookies.get('userName'))

每次都是在用心创造，如果本文对你有帮助，还望点赞＋收藏一下💖，不然刷着刷着就找不到我了哦，谢谢！🌹🌹🌹