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