• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 管理Cookie及数据存储
2
3
4## Cookie管理
5
6Cookie是网络访问过程中，由服务端发送给客户端的一小段数据。客户端可持有该数据，并在后续访问该服务端时，方便服务端快速对客户端身份、状态等进行识别。
7
8Web组件提供了WebCookieManager类，用于管理Web组件的Cookie信息。Cookie信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd的文件中。
9
10下面以[setCookie()](../reference/apis/js-apis-webview.md#setcookie)接口举例，为“www.example.com”设置单个Cookie的值“value=test”。其他Cookie的相关功能及使用，请参考[WebCookieManager()](../reference/apis/js-apis-webview.md#webcookiemanager)接口文档。
11
12
13```ts
14// xxx.ets
15import web_webview from '@ohos.web.webview';
16
17@Entry
18@Component
19struct WebComponent {
20  controller: web_webview.WebviewController = new web_webview.WebviewController();
21
22  build() {
23    Column() {
24      Button('setCookie')
25        .onClick(() => {
26          try {
27            web_webview.WebCookieManager.setCookie('https://www.example.com', 'value=test');
28          } catch (error) {
29            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
30          }
31        })
32      Web({ src: 'www.example.com', controller: this.controller })
33    }
34  }
35}
36```
37
38
39## 缓存与存储管理
40
41在访问网站时，网络资源请求是相对比较耗时的。开发者可以通过Cache、Dom Storage等手段将资源保持至本地，以提升访问同一网站的速度。
42
43
44### Cache
45
46使用[cacheMode()](../reference/arkui-ts/ts-basic-components-web.md#cachemode)配置页面资源的缓存模式，Web组件为开发者提供四种缓存模式，分别为：
47
48- Default : 优先使用未过期的缓存，如果缓存不存在，则从网络获取。
49
50- None : 加载资源使用cache，如果cache中无该资源则从网络中获取。
51
52- Online : 加载资源不使用cache，全部从网络中获取。
53
54- Only ：只从cache中加载资源。
55
56
57在下面的示例中，选用缓存设置为None模式。
58
59
60
61```ts
62// xxx.ets
63import web_webview from '@ohos.web.webview';
64
65@Entry
66@Component
67struct WebComponent {
68  @State mode: CacheMode = CacheMode.None;
69  controller: web_webview.WebviewController = new web_webview.WebviewController();
70  build() {
71    Column() {
72      Web({ src: 'www.example.com', controller: this.controller })
73        .cacheMode(this.mode)
74    }
75  }
76}
77```
78
79
80  同时，为了获取最新资源，开发者可以通过[removeCache()](../reference/apis/js-apis-webview.md#removecache)接口清除已经缓存的资源，示例代码如下：
81
82```ts
83// xxx.ets
84import web_webview from '@ohos.web.webview';
85
86@Entry
87@Component
88struct WebComponent {
89  @State mode: CacheMode = CacheMode.None;
90  controller: web_webview.WebviewController = new web_webview.WebviewController();
91  build() {
92    Column() {
93      Button('removeCache')
94        .onClick(() => {
95          try {
96            // 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存
97            this.controller.removeCache(true);
98          } catch (error) {
99            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
100          }
101        })
102      Web({ src: 'www.example.com', controller: this.controller })
103        .cacheMode(this.mode)
104    }
105  }
106}
107```
108
109
110### Dom Storage
111
112Dom Storage包含了Session Storage和Local Storage两类。前者为临时数据，其存储与释放跟随会话生命周期；后者为可持久化数据，落盘在应用目录下。两者的数据均通过Key-Value的形式存储，通常在访问需要客户端存储的页面时使用。开发者可以通过Web组件的属性接口[domStorageAccess()](../reference/arkui-ts/ts-basic-components-web.md#domstorageaccess)进行使能配置，示例如下：
113
114
115
116```ts
117// xxx.ets
118import web_webview from '@ohos.web.webview';
119
120@Entry
121@Component
122struct WebComponent {
123  controller: web_webview.WebviewController = new web_webview.WebviewController();
124  build() {
125    Column() {
126      Web({ src: 'www.example.com', controller: this.controller })
127        .domStorageAccess(true)
128    }
129  }
130}
131```
132