1# Using Incognito Mode
2
3
4When creating a **Web** component, you can enable incognito mode for it by setting the optional parameter [incognitoMode](../reference/apis-arkweb/ts-basic-components-web.md#apis) to **true**. When incognito mode is enabled, data such as cookies and cache data during web page browsing is not stored in local persistent files. This means that such data is lost when the **Web** component is destroyed.
5
6- Create a [Web](../reference/apis-arkweb/ts-basic-components-web.md#web) component in incognito mode.
7
8   ```ts
9  // xxx.ets
10  import { webview } from '@kit.ArkWeb';
11
12  @Entry
13  @Component
14  struct WebComponent {
15    controller: webview.WebviewController = new webview.WebviewController();
16
17    build() {
18      Column() {
19        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
20      }
21    }
22  }
23  ```
24
25- Use [isIncogntoMode](../reference/apis-arkweb/js-apis-webview.md#isincognitomode11) to check whether the current **Web** component is in incognito mode.
26
27  ```ts
28  // xxx.ets
29  import { webview } from '@kit.ArkWeb';
30  import { BusinessError } from '@kit.BasicServicesKit';
31
32  @Entry
33  @Component
34  struct WebComponent {
35    controller: webview.WebviewController = new webview.WebviewController();
36
37    build() {
38      Column() {
39        Button('isIncognitoMode')
40          .onClick(() => {
41            try {
42              let result = this.controller.isIncognitoMode();
43              console.log('isIncognitoMode' + result);
44            } catch (error) {
45              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
46            }
47          })
48        Web({ src: 'www.example.com', controller: this.controller })
49      }
50    }
51  }
52  ```
53
54In incognito mode, you can use the following APIs for geolocation information, cookies, and cache data:
55
56- Use [allowGeolocation](../reference/apis-arkweb/js-apis-webview.md#allowgeolocation) to allow the specified origin to use the geolocation information.
57
58  ```ts
59  // xxx.ets
60  import { webview } from '@kit.ArkWeb';
61  import { BusinessError } from '@kit.BasicServicesKit';
62
63  @Entry
64  @Component
65  struct WebComponent {
66    controller: webview.WebviewController = new webview.WebviewController();
67    origin: string = "file:///";
68
69    build() {
70      Column() {
71        Button('allowGeolocation')
72          .onClick(() => {
73            try {
74              // The second parameter of allowGeolocation specifies whether to allow the specified origin to use the geolocation information in incognito mode (true) or in non-incognito mode (false).
75              webview.GeolocationPermissions.allowGeolocation(this.origin, true);
76            } catch (error) {
77              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
78            }
79          })
80        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
81      }
82    }
83  }
84  ```
85
86- Use [deleteGeolocation](../reference/apis-arkweb/js-apis-webview.md#deletegeolocation) to clear the geolocation permission status of a specified origin.
87
88  ```ts
89  // xxx.ets
90  import { webview } from '@kit.ArkWeb';
91  import { BusinessError } from '@kit.BasicServicesKit';
92
93  @Entry
94  @Component
95  struct WebComponent {
96    controller: webview.WebviewController = new webview.WebviewController();
97    origin: string = "file:///";
98
99    build() {
100      Column() {
101        Button('deleteGeolocation')
102          .onClick(() => {
103            try {
104              // The second parameter of deleteGeolocation specifies whether to clear the geolocation permission status of a specified origin in incognito mode (true) or in non-incognito mode (false).
105              webview.GeolocationPermissions.deleteGeolocation(this.origin, true);
106            } catch (error) {
107              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
108            }
109          })
110        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
111      }
112    }
113  }
114  ```
115
116- Use [getAccessibleGeolocation](../reference/apis-arkweb/js-apis-webview.md#getaccessiblegeolocation) to asynchronously obtain the geolocation permission status of the specified origin.
117
118  ```ts
119  // xxx.ets
120  import { webview } from '@kit.ArkWeb';
121  import { BusinessError } from '@kit.BasicServicesKit';
122
123  @Entry
124  @Component
125  struct WebComponent {
126    controller: webview.WebviewController = new webview.WebviewController();
127    origin: string = "file:///";
128
129    build() {
130      Column() {
131        Button('getAccessibleGeolocation')
132          .onClick(() => {
133            try {
134              // The third parameter of getAccessibleGeolocation specifies whether to obtain the geolocation permission status of the specified origin in incognito mode (true) or in non-incognito mode (false). This API uses an asynchronous callback to return the result.
135              webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
136                if (error) {
137                  console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
138                  return;
139                }
140                console.log('getAccessibleGeolocationAsync result: ' + result);
141              }, true);
142            } catch (error) {
143              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
144            }
145          })
146        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
147      }
148    }
149  }
150  ```
151
152- Use [deleteAllData](../reference/apis-arkweb/js-apis-webview.md#deletealldata) to delete all data in the Web SQL Database.
153
154  ```ts
155  // xxx.ets
156  import { webview } from '@kit.ArkWeb';
157  import { BusinessError } from '@kit.BasicServicesKit';
158
159  @Entry
160  @Component
161  struct WebComponent {
162    controller: webview.WebviewController = new webview.WebviewController();
163
164    build() {
165      Column() {
166        Button('deleteAllData')
167          .onClick(() => {
168            try {
169              // The parameter of deleteAllData specifies whether to delete all data in the Web SQL Database in incognito mode (true) or in non-incognito mode (false).
170              webview.WebStorage.deleteAllData(true);
171            } catch (error) {
172              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
173            }
174          })
175        Web({ src: $rawfile('index.html'), controller: this.controller, incognitoMode: true })
176          .databaseAccess(true)
177      }
178    }
179  }
180  ```
181
182  HTML file to be loaded:
183   ```html
184  <!-- index.html -->
185  <!DOCTYPE html>
186  <html>
187  <head>
188    <meta charset="UTF-8">
189    <title>test</title>
190    <script type="text/javascript">
191
192      var db = openDatabase('mydb','1.0','Test DB',2 * 1024 * 1024);
193      var msg;
194
195      db.transaction(function(tx){
196        tx.executeSql('INSERT INTO LOGS (id,log) VALUES(1,"test1")');
197        tx.executeSql('INSERT INTO LOGS (id,log) VALUES(2,"test2")');
198        msg = '<p>Data table created, with two data records inserted.</p>';
199
200        document.querySelector('#status').innerHTML = msg;
201      });
202
203      db.transaction(function(tx){
204        tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
205          var len = results.rows.length,i;
206          msg = "<p>Number of records: " + len + "</p>";
207
208          document.querySelector('#status').innerHTML += msg;
209
210              for(i = 0; i < len; i++){
211                msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
212
213          document.querySelector('#status').innerHTML += msg;
214          }
215        },null);
216      });
217
218      </script>
219  </head>
220  <body>
221  <div id="status" name="status">Status</div>
222  </body>
223  </html>
224  ```
225
226- Use [fetchCookieSync](../reference/apis-arkweb/js-apis-webview.md#fetchcookiesync11) to obtain the cookie corresponding to the specified URL.
227
228  ```ts
229  // xxx.ets
230  import { webview } from '@kit.ArkWeb';
231  import { BusinessError } from '@kit.BasicServicesKit';
232
233  @Entry
234  @Component
235  struct WebComponent {
236    controller: webview.WebviewController = new webview.WebviewController();
237
238    build() {
239      Column() {
240        Button('fetchCookieSync')
241          .onClick(() => {
242            try {
243              // The second parameter of fetchCookieSync specifies whether to obtain the cookie in incognito mode (true) or in non-incognito mode (false).
244              let value = webview.WebCookieManager.fetchCookieSync('https://www.example.com', true);
245              console.log("fetchCookieSync cookie = " + value);
246            } catch (error) {
247              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
248            }
249          })
250        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
251      }
252    }
253  }
254  ```
255
256- Use [configCookieSync](../reference/apis-arkweb/js-apis-webview.md#configcookiesync11) to set a cookie for the specified URL.
257
258  ```ts
259  // xxx.ets
260  import { webview } from '@kit.ArkWeb';
261  import { BusinessError } from '@kit.BasicServicesKit';
262
263  @Entry
264  @Component
265  struct WebComponent {
266    controller: webview.WebviewController = new webview.WebviewController();
267
268    build() {
269      Column() {
270        Button('configCookieSync')
271          .onClick(() => {
272            try {
273              // The third parameter of configCookieSync specifies whether to obtain the cookie for the specified URL in incognito mode (true) or non-incognito mode (false).
274              webview.WebCookieManager.configCookieSync('https://www.example.com', 'a=b', true);
275            } catch (error) {
276              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
277            }
278          })
279        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
280      }
281    }
282  }
283  ```
284
285- Use [existCookie](../reference/apis-arkweb/js-apis-webview.md#existcookie) to check whether cookies exist.
286
287  ```ts
288  // xxx.ets
289  import { webview } from '@kit.ArkWeb';
290
291  @Entry
292  @Component
293  struct WebComponent {
294    controller: webview.WebviewController = new webview.WebviewController();
295
296    build() {
297      Column() {
298        Button('existCookie')
299          .onClick(() => {
300            // The parameter of existCookie specifies whether to check for cookies in incognito mode (true) or in non-incognito mode (false).
301            let result = webview.WebCookieManager.existCookie(true);
302            console.log("result: " + result);
303          })
304        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
305      }
306    }
307  }
308  ```
309
310- Use [clearAllCookiesSync](../reference/apis-arkweb/js-apis-webview.md#clearallcookiessync11) to delete all cookies.
311
312  ```ts
313  // xxx.ets
314  import { webview } from '@kit.ArkWeb';
315
316  @Entry
317  @Component
318  struct WebComponent {
319    controller: webview.WebviewController = new webview.WebviewController();
320
321    build() {
322      Column() {
323        Button('clearAllCookiesSync')
324          .onClick(() => {
325            // The parameter of clearAllCookiesSync specifies whether to delete all cookies in incognito mode (true) or in non-incognito mode (false).
326            webview.WebCookieManager.clearAllCookiesSync(true);
327          })
328        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
329      }
330    }
331  }
332  ```
333