Manage cookies and data storage

Cookie Management and Cache & Storage Management in HarmonyOS Next Web Components

Cookie Management

Cookies are small pieces of data sent by a server to a client during web access. The client holds this data and sends it back to the server in subsequent requests, allowing the server to quickly recognize the client's identity and status.

When the SameSite attribute of a cookie is not specified, the default value is SameSite=Lax, meaning the cookie is only sent when the user navigates to the cookie's origin site and not in cross-site requests.

The Web component provides the WebCookieManager class to manage cookie information for Web components. Cookie information is stored in the file located at /proc/{pid}/root/data/storage/el2/base/cache/web/Cookies within the application sandbox path.

Here is an example using the configCookieSync() interface to set a single cookie value for "www.example.com":

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('Set Cookie')
        .onClick(() => {
          try {
            webview.WebCookieManager.configCookieSync('https://www.example.com', 'value=test');
          } catch (error) {
            console.error(`Error Code: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'https://www.example.com', controller: this.controller })
    }
  }
}

Cache and Storage Management

When accessing websites, network resource requests can be relatively time-consuming. Developers can use Cache and Dom Storage to save resources locally to improve the speed of accessing the same website.

Cache Management

Use the cacheMode() method to configure the caching mode for page resources. The Web component provides four caching modes:

• Default: Prioritizes using unexpired cache; if the cache does not exist, it fetches from the network.
• None: Uses cache for loading resources; if the resource is not in the cache, it fetches from the network.
• Online: Does not use cache for loading resources; all resources are fetched from the network.
• Only: Loads resources only from the cache.

In the following example, the caching mode is set to None:

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

To obtain the latest resources, developers can clear cached resources using the removeCache() interface. Here is an example:

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('Clear Cache')
        .onClick(() => {
          try {
            // Set to true to clear both ROM and RAM caches; set to false to clear only RAM cache
            this.controller.removeCache(true);
          } catch (error) {
            console.error(`Error Code: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'https://www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

Dom Storage Management

Dom Storage includes two types: Session Storage and Local Storage. The former is temporary data that follows the session lifecycle, while the latter is persistent data stored on disk within the application directory. Both types store data in Key-Value pairs and are typically used when accessing pages that require client-side storage. Developers can enable Dom Storage using the domStorageAccess() interface of the Web component. Here is an example:

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller })
        .domStorageAccess(true)
    }
  }
}