HarmonyOS：管理Cookie及数据存储

一、概述

Cookie是服务端发送客户端的数据。客户端持有Cookie，便于服务端快速识别身份和状态。

当Cookie的SameSite属性未指定时，默认值为SameSite=Lax。这种设置下，Cookie仅在用户导航到其源站点时发送，不会在跨站请求中发送。

二、Cookie管理

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

下面以configCookieSync()接口为例，为"www.baidu.com"设置单个Cookie的值"value=test"。其他Cookie的相关功能及使用，请参考WebCookieManager()接口文档。

示例代码

bash 复制代码

 import { webview } from '@kit.ArkWeb';
 import { BusinessError } from '@kit.BasicServicesKit';

 @Entry
 @Component
 struct TestCookie {
   controller: webview.WebviewController = new webview.WebviewController();

   build() {
     Column() {
       Button('configCookieSync')
         .onClick(() => {
           try {
             webview.WebCookieManager.configCookieSync('https://www.baidu.com', 'value=test123sa');
           } catch (error) {
             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
           }
         })
       Web({ src: 'https://www.baidu.com', controller: this.controller })
     }
   }
 }

说明 Cookie每30s周期性保存到磁盘中，也可以使用接口saveCookieAsync进行强制落盘（PC/2in1和Tablet设备不会持久化session cookie，即使调用saveCookieAsync，也不会将session cookie写入磁盘）。

三、缓存与存储管理

在访问网站时，网络资源请求通常需要较长的时间。开发者可以通过Cache和Dom Storage等手段将资源保存到本地，以提高访问同一网站的速度。

3.1 Cache

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

Default：优先使用未过期的缓存。如果缓存不存在，则从网络获取。

None：加载资源使用缓存。如果缓存中无该资源，则从网络中获取。

Online：加载资源不使用缓存。全部从网络中获取。

Only：只从缓存中加载资源。

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

bash 复制代码

 import { webview } from '@kit.ArkWeb';
 import { BusinessError } from '@kit.BasicServicesKit';

 @Entry
 @Component
 struct TestCookie {
   controller: webview.WebviewController = new webview.WebviewController();
   @State mode: CacheMode = CacheMode.None;
   build() {
     Column() {
       Button('configCookieSync')
         .onClick(() => {
           try {
             webview.WebCookieManager.configCookieSync('https://www.baidu.com', 'value=test123sa');
           } catch (error) {
             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
           }
         })
       Web({ src: 'https://www.baidu.com', controller: this.controller })
         .cacheMode(this.mode)
     }
   }
 }

为了获取最新资源，开发者可以通过removeCache()接口清除已经缓存的资源，示例代码如下：

bash 复制代码

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct TestCookie {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: CacheMode = CacheMode.None;

  build() {
    Column({ space: 20 }) {
      Button('configCookieSync')
        .onClick(() => {
          try {
            webview.WebCookieManager.configCookieSync('https://www.baidu.com', 'value=test123sa');
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('removeCache')
        .onClick(() => {
          try {
            // 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存
            this.controller.removeCache(true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })

      Web({ src: 'https://www.baidu.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

3.2 Dom Storage

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

bash 复制代码

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct TestCookie {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: CacheMode = CacheMode.None;

  build() {
    Column({ space: 20 }) {
      Button('configCookieSync')
        .onClick(() => {
          try {
            webview.WebCookieManager.configCookieSync('https://www.baidu.com', 'value=test123sa');
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('removeCache')
        .onClick(() => {
          try {
            // 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存
            this.controller.removeCache(true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })

      Web({ src: 'https://www.baidu.com', controller: this.controller })
        .cacheMode(this.mode)
        .domStorageAccess(true)
    }
  }
}

四、获取指定url对应cookie的值

fetchCookieSync 获取指定url对应cookie的值。

bash 复制代码

static fetchCookieSync(url: string, incognito?: boolean): string

说明系统会自动清理过期的cookie，对于同名key的数据，新数据将会覆盖前一个数据。

为了获取可正常使用的cookie值，fetchCookieSync需传入完整链接。

fetchCookieSync用于获取所有的cookie值，每条cookie值之间会通过"; "进行分隔，但无法单独获取某一条特定的cookie值。
系统能力： SystemCapability.Web.Webview.Core

参数

参数名	类型	必填	说明
url	string	是	要获取的cookie所属的url，建议使用完整的url。
incognito	boolean	否	true表示获取隐私模式下webview的内存cookies，false表示正常非隐私模式下的cookies。默认值：false。

返回值：

类型	说明
string	指定url对应的cookie的值。

示例效果图

示例代码

bash 复制代码

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct TestCookie {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: CacheMode = CacheMode.None;

  build() {
    Column({ space: 20 }) {
      Button('configCookieSync')
        .onClick(() => {
          try {
            webview.WebCookieManager.configCookieSync('https://www.baidu.com', 'value=test123sa');
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })

      Button('fetchCookieSync')
        .onClick(() => {
          try {
            let value = webview.WebCookieManager.fetchCookieSync('https://www.baidu.com');
            console.info("获取指定url对应cookie的值 fetchCookieSync cookie = " + value);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })

      Button('removeCache')
        .onClick(() => {
          try {
            // 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存
            this.controller.removeCache(true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })

      Web({ src: 'https://www.baidu.com', controller: this.controller })
        .cacheMode(this.mode)
        .domStorageAccess(true)
    }
  }
}

HarmonyOS：管理Cookie及数据存储

一、 概述

二、Cookie管理

三、缓存与存储管理

3.1 Cache

3.2 Dom Storage

四、获取指定url对应cookie的值

一、概述