Local Storage APIs do not work within NativeScript WebView

问题

My application is a web app hosted within a {N} WebView. The username & password are store in the localStore. When I leave the app and re-enter I do not have data and I have to go back to login.

Could someone help me? or explain how to debug a web view in an app. the webpage is developed with Angular 4 and the app with NativeScript.

回答1:

With Android localStorage APIs won't work until you enable them. You could enable it by accessing the native WebView's settings upon loaded event.

export function onWebViewLoaded(args) {
    const webView = args.object;
    if (webView.android) {
        webView.android.getSettings().setDomStorageEnabled(true);
        webView.android.getSettings().setDatabaseEnabled(true);
    }
}

Playground Sample

Between, whether you can localStorage for saving confidential informations such as username / password is a different question here. My answer will be no, you can't use it as it's easy / open to access. Generally you should hit the login api with these credentials given by user, you should probably get access token which you will use for any communication with server subsequently. You could store this token in your localStoage, clear it upon logout.

回答2:

Perfect, thanks!! the example works well.

.html

<Page (loaded)="pageLoaded($event)">
        <GridLayout rows="*" columns="*">
           <WebView  #myWebView [src]="webViewSrc" (loadStarted)="onWebViewLoadStarted($event)"></WebView>
        </GridLayout>
</Page>

-component(ts file)

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls:['./home.component.css']
})
export class HomeComponent  {
   public webViewSrc: string = URL;
    constructor(private routerExtensions: RouterExtensions) {
        // Use the component constructor to inject providers.
    }

    onWebViewLoaded(args){
        const webView = args.object;
        if (webView.android) {
            webView.android.getSettings().setDatabaseEnabled(true);
            webView.android.getSettings().setLoadWithOverviewMode(true);
        }
    }
    pageLoaded(args: EventData) {
        let page = <Page>args.object;
        page.bindingContext = new HomeViewModel();
    }
}

来源：https://stackoverflow.com/questions/54576832/local-storage-apis-do-not-work-within-nativescript-webview

标签

android

local-storage

nativescript