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 })
HarmonyOS
2024-05-26 17:30:04
浏览
收藏 0
回答 1
待解决
回答 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)); 
    } 
  } 
}

一个应用中的所有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) 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 22:10:29
相关问题
Web组件通过WebCookieManager设置获取cookie
1994浏览 • 1回复 待解决
Web组件Cookie信息保存在哪里?
317浏览 • 1回复 待解决
HarmonyOS Web cookie设置咨询
75浏览 • 1回复 待解决
HarmonyOS web组件使用
95浏览 • 1回复 待解决
HarmonyOS Web管理Cookie和数据存储
337浏览 • 1回复 待解决
如何清除Web隐私模式下所有cookie
323浏览 • 1回复 待解决
如何将cookie同步到web
394浏览 • 1回复 待解决
HarmonyOS 使用Web组件加载页面示例
304浏览 • 1回复 待解决
JS API 中 web组件 怎么使用
5201浏览 • 1回复 待解决
使用Web组件下载能力Demo
277浏览 • 1回复 待解决
HarmonyOS Web组件使用localStorage报错
348浏览 • 1回复 待解决
HarmonyOS使用Web组件如何监听滚动位置
412浏览 • 2回复 待解决
HarmonyOS使用Web组件预览PDF和图片
485浏览 • 1回复 待解决
使用Web组件加载网页,显示空白。
346浏览 • 1回复 待解决
OpenHarmony 使用WEB组件传值问题
3285浏览 • 1回复 待解决