1# Setting Backward-Forward Cache
2
3The **Web** component provides the function of enabling and configuring the back-forward cache (BFCache), which can significantly improve the speed of returning to the previous web page, especially for users with poor network conditions.
4
5After BFCache is enabled, the **Web** component saves the snapshot of the current page in the memory when the user leaves the current page. When the user accesses the same page again within a short period of time, the page can be quickly restored to avoid repeated HTTP requests.
6
7## Enabling BFCache
8
9You need to call [enableBackForwardCache()](../reference/apis-arkweb/js-apis-webview.md#enablebackforwardcache12) to enable BFCache before calling [initializeWebEngine()](../reference/apis-arkweb/js-apis-webview.md#initializewebengine) to initialize the ArkWeb kernel. The **enableBackForwardCache** function receives the [BackForwardCacheSupportedFeatures](../reference/apis-arkweb/js-apis-webview.md#backforwardcachesupportedfeatures12) parameter, which is used to control whether to allow pages with the same-layer rendering feature and video takeover feature to enter the BFCache.
10
11```ts
12// EntryAbility.ets
13import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
14import { hilog } from '@kit.PerformanceAnalysisKit';
15import { window } from '@kit.ArkUI';
16import { webview } from '@kit.ArkWeb';
17
18export default class EntryAbility extends UIAbility {
19    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
20        let features = new webview.BackForwardCacheSupportedFeatures();
21        features.nativeEmbed = true;
22        features.mediaTakeOver = true;
23        webview.WebviewController.enableBackForwardCache(features);
24        webview.WebviewController.initializeWebEngine();
25        AppStorage.setOrCreate("abilityWant", want);
26    }
27}
28```
29
30## Setting the Size and Live Time of Cached pages
31
32By default, BFCache can store only one page, and the page can be stored for 600 seconds. You can call [setBackForwardCacheOptions()](../reference/apis-arkweb/js-apis-webview.md#setbackforwardcacheoptions12) to set the BFCache policies for each **Web** instance. The maximum number of pages in the BFCache can be adjusted so that it can hold more pages. In this way, BFCache can provide faster loading speed when users perform forward and backward operations continuously. In addition, you can prolong the duration of each page in the BFCache to improve user experience.
33
34In the following example, the maximum number of pages that can be cached in the **Web** component is set to **10**, and each page is cached for 300s.
35
36```ts
37// Index.ets
38import { webview } from '@kit.ArkWeb';
39
40@Entry
41@Component
42struct Index {
43  controller: webview.WebviewController = new webview.WebviewController();
44
45  build() {
46    Column() {
47      Row() {
48        Button("Add options").onClick((event: ClickEvent) => {
49          let options = new webview.BackForwardCacheOptions();
50          options.size = 10;
51          options.timeToLive = 300;
52          this.controller.setBackForwardCacheOptions(options);
53        })
54        Button("Backward").onClick((event: ClickEvent) => {
55          this.controller.backward();
56        })
57        Button("Forward").onClick((event: ClickEvent) => {
58          this.controller.forward();
59        })
60      }
61      Web({ src: "https://www.example.com", controller: this.controller })
62    }
63    .height('100%')
64    .width('100%')
65  }
66}
67```
68