[文章]鸿蒙开发基础-Web组件之cookie操作
0
0
使用ArkTS语言实现一个简单的免登录过程，向大家介绍基本的cookie管理操作。主要包含以下功能：
- 获取指定url对应的cookie的值。
- 设置cookie。
- 清除所有cookie。
- 免登录访问账户中心。
cookie读写操作
首次打开应用时，应用首页的Web组件内呈现的是登录界面。用户完成登录操作后，会跳转至账号中心界面。首页包含“读取cookie”、“设置cookie”和“删除cookie”等多个按钮，可对cookie进行读取、设置和删除等操作。
// WebIndex.ets
Column() {
Text($r('app.string.navigator_name'))
...
Text($r('app.string.title_name'))
...
Web({
src: CommonConstants.USER_CENTER_URL,
controller: this.controller
})
...
Row() {
LinkButton({ buttonType: CookieOperation.GET_COOKIE, isNeedDivider: true })
LinkButton({ buttonType: CookieOperation.SET_COOKIE, isNeedDivider: true })
LinkButton({ buttonType: CookieOperation.DELETE_COOKIE, isNeedDivider: true })
LinkButton({ buttonType: CookieOperation.VERIFY_COOKIE, isNeedDivider: false })
}
...
}
...
自定义组件LinkButton由Text组件和Divider分隔器组件组成。最后一个按钮没有分隔器，通过isNeedDivider标识符判断是否需要添加Divider分隔器组件。
// LinkButton.ets
@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函数。函数根据不同操作，执行不同的代码内容。包括cookie的读、写和删除操作，以及页面跳转操作。
// LinkButton.ets
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));
}
}
cookie存储验证
一个应用中的所有Web组件共享一个WebCookie，因此一个应用中Web组件存储的cookie信息，也是可以共享的。当用户在应用内完成登录操作时，Web组件会自动存储登录的会话cookie。应用内其他页面可共享当前会话cookie信息，免去多余的登录操作。
该页面布局同样简单，由应用导航标题“Web组件”、内部标题“Web组件内”、加载的网页组成。分别对应一个Navigator导航组件、一个Text组件和一个Web组件。Navigator导航组件类型设置为返回（NavigationType.Back），内容由返回图标和应用标题组成，呈水平排列展示
// Verify.ets
Column() {
Navigator({ target: CommonConstants.PAGE_INDEX, type: NavigationType.Back }) {
Row() {
Image($r('app.media.ic_back'))
...
Text($r('app.string.navigator_name'))
...
}
...
}
...
Text($r('app.string.title_name'))
...
Web({
src: CommonConstants.USER_ABOUT_URL,
controller: this.controller
})
...
}
...
本文章主要是对鸿蒙开发当中ArkTS语言的基础应用实战，Web组件里的cookie操作。更多的鸿蒙应用开发技术，可以前往我的主页学习更多，下面是一张鸿蒙的学习路线如图（略缩版）：
高清完整版，保存在主页（附鸿蒙4.0笔记）
最终效果图如下：
回帖高级模式
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表德赢Vwin官网
网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉