How do I prevent the resources registered on the original page from being cleared after the HTML5 page loaded on the web page is redirected?

If runJavaScript is used, the JavaScript is injected during running, and becomes invalid after page redirection. As a result, the registered resources may be cleared after page redirection. To avoid this problem, you can use javaScriptOnDocumentStart, which injected the JavaScript during document initialization and applies to page redirection scenarios.

Sample code of using runJavaScript:

ArkTS page:

The two buttons use runJavaScript to register and call the test() and bodyOnLoadLocalStorage() methods. The two methods are used to set a value for sessionStorage and refresh the HTML5 page based on sessionStorage, respectively.

import { webview } from '@kit.ArkWeb';

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

  build() {
    Column({ space: 20 }) {
      Button ('Invoke registered resources')
        .onClick(e => {
          try {
            this.controller.runJavaScript(
              'test()',
              (error, result) => {
                if (error) {
                  console.error(`run JavaScript error, ErrorCode: ${error.code},  Message: ${error.message}`);
                  return;
                }
                if (result) {
                  console.info(`The test() return value is: ${result}`);
                }
              });
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Button ('Invoke registered resources')
        .onClick(e => {
          try {
            this.controller.runJavaScript(
              'bodyOnLoadLocalStorage()',
              (error, result) => {
                if (error) {
                  console.error(`run JavaScript error, ErrorCode: ${error.code},  Message: ${error.message}`);
                  return;
                }
                if (result) {
                  console.info(`The bodyOnLoadLocalStorage() return value is: ${result}`);
                }
              });
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .backgroundColor(Color.Grey)
        .width('100%')
        .height('100%')
    }
  }
}

HTML5 side:

Page 1:

The index.html file declares the test() and bodyOnLoadLocalStorage() methods.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'>
Page 1: Hello world!
<div id="result"></div>
<a href="Second.html">Click to redirect</a>
</body>
<script type="text/javascript">
    function bodyOnLoadLocalStorage() {
      if (typeof(Storage) !== 'undefined') {
        document.getElementById('result').innerHTML = sessionStorage.getItem('color');
      } else {
        document.getElementById('result').innerHTML = 'Your browser does not support sessionStorage.';
      }
    }
    function test(){
      if (typeof(Storage) !== 'undefined') {
        sessionStorage.setItem('color', 'Red');
      }
    }
</script>
</html>

Page 2:

The preceding two methods are not declared. When the previous registration is used to invoke the two methods, the two methods cannot be correctly invoked after page 2 is displayed. The problem that the registered resources are cleared occurs.

<!-- Second.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-size: 30px;">
Page 2: Hello world!
<div id="result"></div>
</body>
<script type="text/javascript">

</script>
</html>

Sample code of using javaScriptOnDocumentStart:

ArkUI:

Execute the test() method through javaScriptOnDocumentStart.

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  private localStorage: string =
    "if (typeof(Storage) !== 'undefined') {" +
      "   sessionStorage.setItem('color', 'Red');" +
      "}";
  @State scripts: Array<ScriptItem> = [
    { script: this.localStorage, scriptRules: ["*"] }
  ];

  build() {
    Column({ space: 20 }) {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .backgroundColor(Color.Grey)
        .javaScriptOnDocumentStart(this.scripts)
        .width('100%')
        .height('100%')
    }
  }
}

HTML5 side:

Page 1

The page calls bodyOnLoadLocalStorage to refresh the HTML5 page.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'>
Page 1: Hello world!
<div id="result"></div>
<a href="Second.html">Click to redirect</a>
</body>
<script type="text/javascript">
    function bodyOnLoadLocalStorage() {
      if (typeof(Storage) !== 'undefined') {
        document.getElementById('result').innerHTML = sessionStorage.getItem('color');
      } else {
        document.getElementById('result').innerHTML = 'Your browser does not support sessionStorage.';
      }
    }
</script>
</html>

Page 2:

After you click the redirection button, the test() method is called and takes effect.

<!-- Second.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'>
Page 2: Hello world!
<div id="result"></div>
</body>
<script type="text/javascript">
    function bodyOnLoadLocalStorage() {
      if (typeof(Storage) !== 'undefined') {
        document.getElementById('result').innerHTML = sessionStorage.getItem('color');
      } else {
        document.getElementById('result').innerHTML = 'Your browser does not support sessionStorage.';
      }
    }
</script>
</html>