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