Using Incognito Mode

When creating a <Web> component, you can enable incognito mode for it by setting the optional parameter incognitoMode to true. When incognito mode, 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.

• Create a <Web> component in incognito mode.

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  
  @Entry
  @Component
  struct WebComponent {
   controller: web_webview.WebviewController = new web_webview.WebviewController()
   build() {
     Column() {
       Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
     }
   }
  }
  

• Use isIncogntoMode to check whether the current **** component is in incognitomode.

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  import business_error from '@ohos.base'
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Button('isIncognitoMode')
          .onClick(() => {
            try {
              let result = this.controller.isIncognitoMode();
              console.log('isIncognitoMode' + result);
            } catch (error) {
              let e: business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
        Web({ src: 'www.example.com', controller: this.controller })
      }
    }
  }
  

In incognito mode, you can use the following APIs for geolocation information, cookies, and cache data:

• Use allowGeolocation to allow the specified origin to use the geolocation information.

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  import business_error from '@ohos.base';
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
    origin: string = "file:///";
  
    build() {
      Column() {
        Button('allowGeolocation')
          .onClick(() => {
            try {
              web_webview.GeolocationPermissions.allowGeolocation(this.origin, true);
            } catch (error) {
              let e: business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }
  

• Use deleteGeolocation to clear the geolocation permission status of a specified origin.

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  import business_error from '@ohos.base';
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
    origin: string = "file:///";
  
    build() {
      Column() {
        Button('deleteGeolocation')
          .onClick(() => {
            try {
              web_webview.GeolocationPermissions.deleteGeolocation(this.origin, true);
            } catch (error) {
              let e: business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }
  

• Use getAccessibleGeolocation to asynchronously obtain the geolocation permission status of the specified origin.

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  import business_error from '@ohos.base';
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
    origin: string = "file:///";
  
    build() {
      Column() {
        Button('getAccessibleGeolocation')
          .onClick(() => {
            try {
              web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
                if (error) {
                  console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
                  return;
                }
                console.log('getAccessibleGeolocationAsync result: ' + result);
              }, true);
            } catch (error) {
              let e: business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }
  

• Use deleteAllData to delete all data in the Web SQL Database.

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  import business_error from '@ohos.base';
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Button('deleteAllData')
          .onClick(() => {
            try {
              web_webview.WebStorage.deleteAllData(true);
            } catch (error) {
              let e: business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
        Web({ src: $rawfile('index.html'), controller: this.controller, incognitoMode: true })
          .databaseAccess(true)
      }
    }
  }
  

• Use fetchCookieSync to obtain the cookie corresponding to the specified URL.

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  import business_error from '@ohos.base'
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Button('fetchCookieSync')
          .onClick(() => {
            try {
              let value = web_webview.WebCookieManager.fetchCookieSync('https://www.example.com', true);
              console.log("fetchCookieSync cookie = " + value);
            } catch (error) {
              let e:business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }
  

• Use configCookieSync to set a cookie for the specified URL.

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  import business_error from '@ohos.base'
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Button('configCookieSync')
          .onClick(() => {
            try {
              web_webview.WebCookieManager.configCookieSync('https://www.example.com', 'a=b', true);
            } catch (error) {
              let e:business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }
  

• Use existCookie to check whether cookies exist.

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Button('existCookie')
          .onClick(() => {
            let result = web_webview.WebCookieManager.existCookie(true);
            console.log("result: " + result);
          })
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }
  

• Use clearAllCookiesSync to delete all cookies.

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Button('clearAllCookiesSync')
          .onClick(() => {
            web_webview.WebCookieManager.clearAllCookiesSync(true);
          })
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }