管理Cookie及数据存储

2024-02-16 13:41 更新

Cookie管理

Cookie是网络访问过程中,由服务端发送给客户端的一小段数据。客户端可持有该数据,并在后续访问该服务端时,方便服务端快速对客户端身份、状态等进行识别。

Web组件提供了WebCookieManager类,用于管理Web组件的Cookie信息。Cookie信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd的文件中。

下面以setCookie()接口举例,为“www.example.com”设置单个Cookie的值“value=test”。其他Cookie的相关功能及使用,请参考WebCookieManager()接口文档。

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6. controller: web_webview.WebviewController = new web_webview.WebviewController();
  7. build() {
  8. Column() {
  9. Button('setCookie')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebCookieManager.setCookie('https://www.example.com', 'value=test');
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

缓存与存储管理

在访问网站时,网络资源请求是相对比较耗时的。开发者可以通过Cache、Dom Storage等手段将资源保持至本地,以提升访问同一网站的速度。

Cache

使用cacheMode()配置页面资源的缓存模式,Web组件为开发者提供四种缓存模式,分别为:

  • Default : 优先使用未过期的缓存,如果缓存不存在,则从网络获取。
  • None : 加载资源使用cache,如果cache中无该资源则从网络中获取。
  • Online : 加载资源不使用cache,全部从网络中获取。
  • Only :只从cache中加载资源。

在下面的示例中,选用缓存设置为None模式。

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6. @State mode: CacheMode = CacheMode.None;
  7. controller: web_webview.WebviewController = new web_webview.WebviewController();
  8. build() {
  9. Column() {
  10. Web({ src: 'www.example.com', controller: this.controller })
  11. .cacheMode(this.mode)
  12. }
  13. }
  14. }
同时,为了获取最新资源,开发者可以通过removeCache()接口清除已经缓存的资源,示例代码如下:
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6. @State mode: CacheMode = CacheMode.None;
  7. controller: web_webview.WebviewController = new web_webview.WebviewController();
  8. build() {
  9. Column() {
  10. Button('removeCache')
  11. .onClick(() => {
  12. try {
  13. // 设置为true时同时清除rom和ram中的缓存,设置为false时只清除ram中的缓存
  14. this.controller.removeCache(true);
  15. } catch (error) {
  16. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  17. }
  18. })
  19. Web({ src: 'www.example.com', controller: this.controller })
  20. .cacheMode(this.mode)
  21. }
  22. }
  23. }

Dom Storage

Dom Storage包含了Session Storage和Local Storage两类。前者为临时数据,其存储与释放跟随会话生命周期;后者为可持久化数据,落盘在应用目录下。两者的数据均通过Key-Value的形式存储,通常在访问需要客户端存储的页面时使用。开发者可以通过Web组件的属性接口domStorageAccess()进行使能配置,示例如下:

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6. controller: web_webview.WebviewController = new web_webview.WebviewController();
  7. build() {
  8. Column() {
  9. Web({ src: 'www.example.com', controller: this.controller })
  10. .domStorageAccess(true)
  11. }
  12. }
  13. }
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号