HarmonyOS鸿蒙Next中如何解决Web组件设置Cookie属性无法生效的问题

HarmonyOS鸿蒙Next中如何解决Web组件设置Cookie属性无法生效的问题

【问题现象】

Web组件设置Cookie属性无法生效，以设置过期时间为例。如下代码示例，把expires=Fri, 13 Aug 2032 12:31:23 GMT改成expires=Sat, 13 Aug 2016 12:34:02 GMT未生效。

初始设置代码示例如下：

let cookieData ='OPENDUSS=dxm_4EfQZ77x-Sj789s23KUPp4dGFM,path=/,expires=Fri, 13 Aug 2032 12:31:23 GMT,domain=.dxmcash.baidu.com,httponly,secure'
webview.WebCookieManager.configCookie('https://www.dxmcash.baidu.com', cookieData)

清除设置代码示例如下：

let cookieData = 'OPENDUSS=dxm_4EfQZ77x-Sj789s23KUPp4dGFM,path=/,expires=Sat, 13 Aug 2016 12:34:02 GMT,domain=.dxmcash.baidu.com,httponly,secure'
webview.WebCookieManager.configCookie('https://www.dxmcash.baidu.com', cookieData)

【背景知识】

  • fetchCookieSync接口：Cookie设置不支持以逗号分隔注入，设置Cookie过期时间等其他属性时需要使用分号“;”分隔。

【解决方案】

CookieData内容以分号“;”进行分割，代码示例如下：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  cookieData1 = 'OPENDUSS=dxm_4EfQZ77x-Sj789s23KUPp4dGFM;path=/;expires=Fri,13 Aug 2032 12:31:23 GMT;domain=.example.com;httponly;secure;'
  cookieData2 = 'OPENDUSS=dxm_4EfQZ77x-Sj789s23KUPp4dGFM;path=/;expires=Sat,13 Aug 2016 12:34:02 GMT;domain=.example.com;httponly;secure;'

  build() {
    Column() {
      Button('configCookieSync1')
        .onClick(() => {
          try {
            web_webview.WebCookieManager.configCookieSync('https://www.example.com',this.cookieData1 );
            console.log("cookie 操作：configCookieSync1")
          } catch (error) {
          }
        })

      Button('configCookieSync2')
        .onClick(() => {
          try {
            web_webview.WebCookieManager.configCookieSync('https://www.example.com',this.cookieData2 );
            console.log("cookie 操作：configCookieSync2")
          } catch (error) {
          }
        })

      Button('fetchCookieSync')
        .onClick(() => {
          try {
            let value = web_webview.WebCookieManager.fetchCookieSync('https://www.example.com');
            console.log("cookie 操作：fetchCookieSync cookie = " + value);
          } catch (error) {
          }
        })
      Web({ src: 'https://www.example.com', controller: this.controller })
    }
  }
}

其中关键步骤是：

（1）首先点击configCookieSync1后再通过fetchCookieSync获取cookie，日志如下则说明cookie设置成功。

10-22 19:41:17.434   48653-48653   A03D00/com.exa...bcookie/JSAPP  com.examp...ebcookie  I     cookie 操作：configCookieSync1
10-22 19:41:18.975   48653-48653   A03D00/com.exa...bcookie/JSAPP  com.examp...ebcookie  I     cookie 操作：fetchCookieSync cookie = OPENDUSS=dxm_4EfQZ77x-Sj789s23KUPp4dGFM

（2）然后点击configCookieSync2后再通过fetchCookieSync获取cookie，日志如下则说明cookie清除成功。

10-2219:42:06.394   48653-48653   A03D00/com.exa...bcookie/JSAPP  com.examp...ebcookie  I     cookie 操作：configCookieSync2
10-22 19:42:07.559   48653-48653   A03D00/com.exa...bcookie/JSAPP  com.examp...ebcookie  I     cookie 操作：fetchCookieSync cookie =

更多关于HarmonyOS鸿蒙Next中如何解决Web组件设置Cookie属性无法生效的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中如何解决Web组件设置Cookie属性无法生效的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件设置Cookie属性无法生效的问题

在HarmonyOS鸿蒙Next中，Web组件设置Cookie属性无法生效的问题是由于CookieData内容使用了逗号分隔。解决方案是将CookieData内容改为分号“;”进行分割。示例代码如下：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  cookieData1 = 'OPENDUSS=dxm_4EfQZ77x-Sj789s23KUPp4dGFM;path=/;expires=Fri,13 Aug 2032 12:31:23 GMT;domain=.example.com;httponly;secure;';
  cookieData2 = 'OPENDUSS=dxm_4EfQZ77x-Sj789s23KUPp4dGFM;path=/;expires=Sat,13 Aug 2016 12:34:02 GMT;domain=.example.com;httponly;secure;';

  build() {
    Column() {
      Button('configCookieSync1')
        .onClick(() => {
          try {
            web_webview.WebCookieManager.configCookieSync('https://www.example.com', this.cookieData1);
            console.log("cookie 操作：configCookieSync1");
          } catch (error) {}
        });

      Button('configCookieSync2')
        .onClick(() => {
          try {
            web_webview.WebCookieManager.configCookieSync('https://www.example.com', this.cookieData2);
            console.log("cookie 操作：configCookieSync2");
          } catch (error) {}
        });

      Button('fetchCookieSync')
        .onClick(() => {
          try {
            let value = web_webview.WebCookieManager.fetchCookieSync('https://www.example.com');
            console.log("cookie 操作：fetchCookieSync cookie = " + value);
          } catch (error) {}
        });

      Web({ src: 'https://www.example.com', controller: this.controller });
    }
  }
}

通过以上代码，可以正确设置和清除Cookie属性。

回到顶部