1# Managing Cookies and Data Storage
2
3
4## Cookie Management
5
6A cookie is a segment of data sent from the server to the client to uniquely identify a user during network access. The client may hold the data and provide it to the server at later interactions so that the server can quickly identify the client identity and status.
7
8When the **SameSite** attribute of a cookie is not specified, the default value is **SameSite=Lax**. The cookie is sent only when the user navigates to the source site of the cookie and is not sent in cross-site requests.
9
10The **Web** component provides the [WebCookieManager](../reference/apis-arkweb/js-apis-webview.md#webcookiemanager) class for you to manage cookie information, which is stored in the **/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd** file in the application sandbox path.
11
12The following uses [configCookieSync()](../reference/apis-arkweb/js-apis-webview.md#configcookiesync11) as an example to describe how to set a cookie's value to **value=test** for **www\.example.com**. For details about functions and usage of other APIs, see [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## Cache and Storage Management
43
44Network resource requests are relatively time-consuming during website access. You can store resources locally by means of **cache** and **Dom Storage** to fasten the access to the same website.
45
46
47### Cache
48
49Use [cacheMode()](../reference/apis-arkweb/ts-basic-components-web.md#cachemode) to configure the cache mode for page resources. Four cache modes are supported:
50
51- **Default**: Page resources in a cache that has not expired are preferentially used. If the cache does not exist, page resources are obtained from the network.
52
53- **None**: Page resources are loaded from the cache. If the cache does not exist, page resources are obtained from the network.
54
55- **Online**: Page resources are not loaded from the cache. All resources are obtained from the network.
56
57- **Only**: Page resources are only loaded from the cache.
58
59
60In the following example, the cache mode is set to **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  To obtain up-to-date resources, you can use [removeCache()](../reference/apis-arkweb/js-apis-webview.md#removecache) to clear cached resources. The sample code is as follows:
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            // If this parameter is set to true, the cache in both the ROM and RAM is cleared. If this parameter is set to false, only the cache in the RAM is cleared.
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 falls into Session Storage and Local Storage. Wherein, Session Storage applies to the temporary data, and its data storage and release follow the session lifecycle; Local Storage applies to the persistent data, which is flushed to the application directory. In both storage modes, data is stored in a form of key-value pair, and is usually used when a page that needs to be stored on the client is accessed. You can use [domStorageAccess()](../reference/apis-arkweb/ts-basic-components-web.md#domstorageaccess) to enable Dom Storage. The following is the sample code:
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