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