【HarmonyOS】元服務WebView組件 H5使用localstorage

在日常開發中我們會在應用種接入H5網頁，localStorage作爲H5本地存儲web storage特性的API之一，主要作用是將數據保存在客戶端中。對於快速開發元服務，通過WebView組件運行H5如何使用localstorage呢？下文以API7 JavaUI爲例爲大家做相關的講解。

 

【實現步驟】

第一步、配置WebView

首先我們需要配置WebView組件，這也是最重要的一步。代碼如下：

webview = (WebView) findComponentById(ResourceTable.Id_webview);
webview.getWebConfig().setJavaScriptPermit(true);
webview.getWebConfig().setWebStoragePermit(true);

 

其中setJavaScriptPermit設置在WebView中啓用JavaScript

setWebStoragePermit這一步很重要，用於開啓H5 DOM存儲，沒有這個方法就不能在H5中啓用localStorage。

第二步、寫入localStorage值

爲了方便測試我這邊使用的是本地的html文件，在頁面加載完成時通過js寫入localStorage：

webview.setWebAgent(new WebAgent(){
   @Override
   public void onPageLoaded(WebView view, String url) {
       super.onPageLoaded(view, url);
       webview.executeJs("window.localStorage.setItem('" + key + "','" + val + "');", new AsyncCallback<String>() {
           @Override
           public void onReceive(String value) {
               System.out.println(value);
           }
       });
   }

});
webview.load(URL_LOCAL);

 

這樣我們就寫入了一個鍵值對，這個鍵值對我們在初始化的時候給他賦值：

String key = "key1";
String val = "123456789";

第三步、通過寫入的key獲取localStorage中的val值

String js = "window.localStorage.getItem('" + key + "');";
webview.executeJs(js, new AsyncCallback<String>() {
   @Override
   public void onReceive(String value) {
       System.out.println(value);
   }

});

我們可以在需要的地方調用這個方法獲取到key對應的val的值，爲了方便測試我通過一個按鈕來實現，以下時運行結果：

​

獲取到的值會在onReceive回調中返回，如上圖可以看到我們獲取到val的值時123456789，跟我們初始化設置的時候相同

 

【總結】

以上就實現了WebView組件中啓用H5 localStorage，以下是完整代碼供大家參考

package com.example.webstorage.slice;


import com.example.webstorage.ResourceTable;

import ohos.aafwk.ability.AbilitySlice;

import ohos.aafwk.content.Intent;

import ohos.agp.components.Component;

import ohos.agp.components.webengine.*;


public class MainAbilitySlice extends AbilitySlice {
   private static final String URL_LOCAL = "dataability://com.example.webstorage.DataAbility/resources/rawfile/test.html";
   WebView webview;
   String key = "key1";
   String val = "123456789";
   @Override
   public void onStart(Intent intent) {
       super.onStart(intent);
       super.setUIContent(ResourceTable.Layout_ability_main);
       webview = (WebView) findComponentById(ResourceTable.Id_webview);
       webview.getWebConfig().setJavaScriptPermit(true);
       webview.getWebConfig().setWebStoragePermit(true);

       webview.setWebAgent(new WebAgent(){
           @Override
           public void onPageLoaded(WebView view, String url) {
               super.onPageLoaded(view, url);
               webview.executeJs("window.localStorage.setItem('" + key + "','" + val + "');", new AsyncCallback<String>() {
                   @Override
                   public void onReceive(String value) {
                       System.out.println(value);
                   }
               });
           }
       });
       webview.load(URL_LOCAL);

       findComponentById(ResourceTable.Id_btn_get).setClickedListener(new Component.ClickedListener() {
           @Override
           public void onClick(Component component) {

               String js = "window.localStorage.getItem('" + key + "');";
               webview.executeJs(js, new AsyncCallback<String>() {
                   @Override
                   public void onReceive(String value) {
                       System.out.println(value);
                   }
               });

           }
       });
   }


   @Override
   public void onActive() {
       super.onActive();
   }

   @Override
   public void onForeground(Intent intent) {
       super.onForeground(intent);
   }

}

 

 

 欲瞭解更多更全技術文章，歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh