项目的纪要

ai客服项目中发现的问题:

可以在控制台看到我们存储的cookie:

可以看到是这样的,

但是我们通过getCookie方法专门获取这个字段, 然后在控制台打印后

const userName = getCookie('SA_USER_NICK_NAME');
console.log(userName, 'userName');

输出结果是:

你好你好你好你好

然后我们尝试通过decodeURIComponent进行解码:

const userName = getCookie('SA_USER_NICK_NAME');
console.log(userName, 'userName');const decodeResult = decodeURIComponent(userName)
console.log(decodeResult, 'decodeResult')

结果仍然是:

你好你好你好你好   userName

你好你好你好你好    decodeResult

我们尝试了多种方法, 包括使用 encodeURIComponent 方法先转码在解码还是不行,

我们经过调试, 发现是项目中使用的公司自己的getCookie方法的问题导致的, 于是我们自己写了一个getTheCookie方法:

function getTheCookie(name) {// 获取当前页面的所有 cookieconst cookies = document.cookie;// 如果没有 cookie，则返回空字符串if (cookies === '') {return '';}// 查找特定名称的 cookie 值const cookieName = name + '=';const cookieArray = cookies.split(';');for (let i = 0; i < cookieArray.length; i++) {let cookie = cookieArray[i].trim();// 判断是否以指定名称开头if (cookie.indexOf(cookieName) === 0) {// 返回 cookie 值，解码后的return decodeURIComponent(cookie.substring(cookieName.length));}}// 如果没有找到对应的 cookie，则返回空字符串return '';}

通过这个方法, 我们成功在控制台输出了: 存储在cookie中的汉字: 你好你好你好你好

因为这是html文件, 所以不能像vue3那样使用, 下面我们通过原生js获取元素, 使用textContent进行了相应的替换:

const userName = getTheCookie('SA_USER_NICK_NAME');console.log(userName, 'userName');// 使用 querySelector 获取第一个 p 元素并设置其内容const greetingParagraph = document.querySelector('.helpWarp .user dd p');greetingParagraph.textContent = `Hi，${userName}`;// 假设已经获取了最新的用户名并存储在变量 userName 中const onlineUsername = document.querySelector('.shortcut .online dl dt em');onlineUsername.textContent = userName;

上面这样就将浏览器cookie中存储的用户名字, 成功显示在当前页面中了.

后续我们遇到了调用接口已经登录, 但是接口仍然返回600的情况:

我们询问后端同事后, 了解到我们携带的请求头中没有携带所有的cookie, 

问:

function getUserInfo() {//获取用户信息$.ajax({url: 'https://xxxx.xxxx.com/api/ucenter/xxxx/xxxx',type: 'GET',contentType: 'application/json;charset=UTF-8',success: function (res) {console.log(res, 'res')if (res.data != "{}") {var getCodeName = res.data.goodsTypeCode}}})}getUserInfo();请求的时候没有携带cookie请问该怎么办才能带上?

回答:

要在 AJAX 请求中携带 cookie，可以使用 xhrFields 属性来设置 withCredentials 为 true。这样，浏览器就会在请求中包含当前域名下的 cookie。修改后的代码如下：function getUserInfo() {//获取用户信息$.ajax({url: 'https://xxxx.xxxx.com/api/ucenter/xxxx/xxxx',type: 'GET',contentType: 'application/json;charset=UTF-8',xhrFields: {withCredentials: true},success: function (res) {console.log(res, 'res')if (res.data.mobile) { $('.popup_online p').text(res.data.mobile)}}})
}
getUserInfo();
在这个例子中，
我们添加了 xhrFields 属性，并将 withCredentials 设置为 true。这样，浏览器就会在请求中包含当前域名下的 cookie。请注意，如果你的请求是跨域的，服务器需要设置 Access-Control-Allow-Credentials 头为 true，才能让浏览器发送包含 cookie 的请求

问:

在html页面中, 要将 <p>[e-mail]</p> 替换为 res.data.mobile 的值怎么做呢?

回答:

function getUserInfo() {//获取用户信息$.ajax({url: 'https://xxxx.xxxx.com/api/ucenter/xxxx/xxxx',type: 'GET',contentType: 'application/json;charset=UTF-8',xhrFields: {withCredentials: true},success: function (res) {console.log(res, 'res')if (res.data.mobile) { $('.popup_online p').text(res.data.mobile)}}})
}
getUserInfo();

问:

进入界判断是否是移动端, 是移动端则展示意见反馈, 非移动端则展示我的奖品

<li class="feedback"><a href="feedback.html"><span><img src="https://xxxx.xxxx.com/xxxx/xxxx/images/xxxx.svg" alt=""></span><p>意见反馈</p></a></li>

回答:

function isMobileOrTablet() {// 使用正则表达式匹配常见的平板设备const tabletRegex = /iPad|Android|webOS|BlackBerry|Windows Phone|Touch/i;// 判断屏幕宽度小于等于 767px 或者是平板设备return window.matchMedia("(max-width: 767px)").matches || tabletRegex.test(navigator.userAgent);}// 页面加载完成后执行window.onload = function () {var pTag = document.querySelector('.feedback p');var feedBackA = document.querySelector('.feedback a');if (isMobileOrTablet()) {// 如果是移动设备，执行相关操作console.log('移动设备.');// 意见反馈$('.feedback').click(function () {console.log('点击了意见反馈按钮')window.location.href = 'http://xxxx.xxxx.com/xxxx/2024/xxxx.html';})} else {// 如果不是移动设备，执行其他操作console.log('不是移动设备.');pTag.textContent = '我的奖品';// 更改 <img> 到 <svg>var svgIcon = '<svg width="1.3333333333rem" height="1.3333333333rem" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>我的奖品</title><g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="画板" transform="translate(-163, 0)"><g id="我的奖品" transform="translate(163, 0)"><circle id="椭圆形" fill="#3B97E7" cx="25" cy="25" r="25"></circle><path d="M26.3628287,24.5532515 L26.3628287,38 L32.3738613,38 C35.035922,38 37.2159251,35.8198481 37.2159251,33.1579362 L37.2159251,24.5532515 L26.3628287,24.5532515 Z M13.4485146,24.5532515 L13.4485146,33.1579362 C13.4485146,35.8198481 15.6287037,38 18.2905784,38 L24.2987111,38 L24.2987111,24.5532515 L13.4485146,24.5532515 Z M32.9241415,15.6333296 C33.7151901,14.6220723 32.1655869,12.5222261 30.5030352,13.2955778 C28.9117549,14.0450979 27.7666175,15.2615438 26.7792288,16.4631555 C27.6298003,16.5375127 28.492492,16.5553584 29.3490493,16.5136812 C30.3900495,16.4721527 32.3143013,16.4006955 32.9241415,15.6333296 L32.9241415,15.6333296 Z M20.3696789,13.3193721 C19.2214928,12.8672805 18.5493785,13.352052 18.064607,14.152135 C17.7998583,14.6042266 17.5202754,15.2050324 17.9397242,15.6423269 C19.0431472,16.7784299 22.073945,16.6952242 24.1083196,16.4840499 C23.1447252,15.2883868 21.9667591,13.9499579 20.3696789,13.3193721 L20.3696789,13.3193721 Z M26.3538315,17.5458329 L24.2837282,17.5458329 L24.2837282,23.4646255 L12,23.4646255 L12,18.7147646 C12,17.9652445 12.5977572,17.3673386 13.350326,17.3673386 L18.9478957,17.3673386 C17.4428696,17.0551129 16.3186637,16.4096927 16.2740866,15.2199782 C16.2324094,13.8220264 17.8117555,11.5586317 20.1137787,12.0760832 C22.4932078,12.6115291 24.1559454,14.4526123 25.4288656,16.0289097 C26.7138688,14.4228323 28.5340205,12.3496804 31.0146497,12.0226204 C33.0907015,11.7607717 34.8038161,13.8308749 34.5837933,15.1990838 C34.3963017,16.3977956 33.2483015,17.0491643 31.781904,17.3644386 L37.3081652,17.3644386 C38.0576853,17.3644386 38.6584912,17.9652445 38.6584912,18.711716 L38.6584912,23.4617256 L26.3807116,23.4617256 L26.3538315,17.5458329 Z" id="Fill-1" fill="#FFFFFF"></path></g></g></g></svg>';// 替换 <img> 为 <svg>$('.feedback img').replaceWith(svgIcon);// 我的奖品$('.feedback').click(function () {console.log('点击了我的奖品按钮')feedBackA.href = 'https://u.xxxx.com/xxxx/xxxx';})}};

这样就实现了, 进入界面自动识别是移动端还是电脑端, 根据判断展示对应的图片和文字, 同时点击对应按钮跳转链接也会不同.

问:

window.onload进入后, 会自动判断用户设备室移动端还是非移动端, name会自动执行

// 意见反馈$('.feedback').click(function () {console.log('点击了意见反馈按钮')window.location.href = 'http://xxxx.xxxx.com/xxxx/2024/xxxx.html';})

$('.feedback')函数中的内容吗?

回答:

不会, 只有当用户点击.feedback元素的时候才会执行.feedback函数里的逻辑, 否则只会执行判断用户设备的逻辑, .click函数里面的逻辑不会执行.