web组件之cookie的使用

在处理通过WebCookie获取cookie行为时遇到加载的url为不合法的情况，然后就延申去了解web组件是如何控制cookie的各种行为的。

Button('getCookie') 
  .onClick(() => { 
    try { 
      let value = web_webview.WebCookieManager.getCookie("https://www.baidu.com"); 
      console.log("value: " + value); 
    } catch (error) { 
      let e:business_error.BusinessError = error as business_error.BusinessError; 
      console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
    } 
  }) 
Web({ src: 'www.baidu.com', controller: this.controller })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

HarmonyOS

单花红丝线

2024-05-26 17:30:04

817浏览

回答 1

按赞同

按时间

十根玉米

使用的核心API

WebCookieManager()

Navigator

核心代码解释

首次打开应用时，应用首页的Web组件内呈现的是登录界面。用户完成登录操作后，会跳转至账号中心界面。首页包含“读取cookie”、“设置cookie”和“删除cookie”等多个按钮，可对cookie进行读取、设置和删除等操作。自定义组件LinkButton由Text组件和Divider分隔器组件组成。最后一个按钮没有分隔器，通过isNeedDivider标识符判断是否需要添加Divider分隔器组件。

每个按钮被点击时，都是调用operationMethod函数。函数根据不同操作，执行不同的代码内容。包括cookie的读、写和删除操作，以及页面跳转操作。

核心代码如下：

@Component 
export struct LinkButton { 
  buttonType?: string; 
  isNeedDivider?: boolean; 
 
  build() { 
    Row() { 
      Text(this.buttonType) 
        .fontColor($r('app.color.link_blue')) 
        .fontSize(CommonConstants.BUTTON_SIZE) 
        .textAlign(TextAlign.Center) 
        .fontWeight(FontWeight.Normal) 
        .onClick(() => { 
          this.operationMethod(); 
        }) 
 
      if (this.isNeedDivider) { 
        Divider() 
          .vertical(true) 
          .margin(CommonConstants.DIVIDER_MARGIN) 
          .height(CommonConstants.DIVIDER_HEIGHT) 
      } 
    } 
  } 
 
  operationMethod(): void { 
    try { 
      if (this.buttonType === CookieOperation.GET_COOKIE) { 
        let originCookie = web_webview.WebCookieManager.getCookie(CommonConstants.USER_CENTER_URL); 
        showDialog(originCookie); 
      } else if (this.buttonType === CookieOperation.SET_COOKIE) { 
        web_webview.WebCookieManager.setCookie(CommonConstants.USER_ABOUT_URL, 'info=测试cookie写入'); 
        showDialog($r('app.string.write_success')); 
      } else if (this.buttonType === CookieOperation.DELETE_COOKIE) { 
        web_webview.WebCookieManager.deleteEntireCookie(); 
        let deleteMessage = $r('app.string.delete_success'); 
        showDialog(deleteMessage); 
      } else { 
        router.pushUrl({ 
          url: CommonConstants.PAGE_VERIFY 
        }) 
      } 
    } catch (error) { 
      showDialog('Operation failed.'+JSON.stringify(error)); 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

一个应用中的所有Web组件共享一个WebCookie，因此一个应用中Web组件存储的cookie信息，也是可以共享的。当用户在应用内完成登录操作时，Web组件会自动存储登录的会话cookie。应用内其他页面可共享当前会话cookie信息，免去多余的登录操作。

@Entry 
@Component 
struct Verify { 
  fileAccess: boolean = true; 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  isRedirect: boolean = false; 
 
  onPageShow(): void { 
    this.isRedirect = false; 
  } 
 
  build() { 
    Column() { 
      Navigator({ target: CommonConstants.PAGE_INDEX, type: NavigationType.Back }) { 
        Row() { 
          Image($r('app.media.ic_back')) 
            .width(CommonConstants.BACK_WIDTH) 
            .height(CommonConstants.BACK_HEIGHT) 
            .objectFit(ImageFit.Contain) 
 
          Text($r('app.string.navigator_name')) 
            .fontSize(CommonConstants.NAVIGATOR_SIZE) 
            .fontWeight(CommonConstants.FONT_WEIGHT_DEEPER) 
            .fontColor($r('app.color.navigator_black')) 
        } 
        .width(CommonConstants.FULL_WIDTH) 
      } 
      .width(CommonConstants.FULL_WIDTH) 
      .margin({ 
        top: CommonConstants.NAVIGATOR_MARGIN_TOP, 
        left: CommonConstants.NAVIGATOR_MARGIN_LEFT 
      }) 
 
      Text($r('app.string.title_name')) 
        .fontSize(CommonConstants.TITLE_SIZE) 
        .fontWeight(CommonConstants.FONT_WEIGHT_DEEPER) 
        .fontColor($r('app.color.title_black')) 
        .width(CommonConstants.PAGE_TITLE_WIDTH) 
        .height(CommonConstants.PAGE_TITLE_HEIGHT) 
        .margin({ 
          top: $r('app.float.page_title_margin_top'), 
          bottom: $r('app.float.page_title_margin_bottom') 
        }) 
 
      Web({ 
        src: CommonConstants.USER_ABOUT_URL, 
        controller: this.controller 
      }) 
        .height(CommonConstants.WEB_HEIGHT) 
        .width(CommonConstants.WEB_WIDTH) 
        .fileAccess(this.fileAccess) 
        .javaScriptAccess(true) 
        .onPageEnd(() => { 
          try { 
            let originCookie = web_webview.WebCookieManager.getCookie(CommonConstants.USER_ABOUT_URL); 
            if (originCookie === '' || this.isRedirect) { 
              return; 
            } 
            this.isRedirect = true; 
            showDialog(originCookie); 
          } catch (error) { 
            showDialog('Failed to load the web page.'+JSON.stringify(error)); 
          } 
        }) 
    } 
    .backgroundColor($r('app.color.page_background_grey')) 
    .width(CommonConstants.FULL_WIDTH) 
    .height(CommonConstants.FULL_HEIGHT) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.

2024-05-27 22:10:29

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

web组件之cookie的使用

订阅鸿蒙技术特刊，精选内容抢先看