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