本地存储 API 在 NativeScript WebView 中不起作用答案

【问题标题】：Local Storage APIs do not work within NativeScript WebView本地存储 API 在 NativeScript WebView 中不起作用
【发布时间】：2019-02-07 15:33:43
【问题描述】：

我的应用程序是托管在 {N} WebView 中的 Web 应用程序。用户名和密码存储在 localStore 中。当我离开应用程序并重新进入时，我没有数据，我必须返回登录。

有人可以帮我吗？或解释如何在应用程序中调试 Web 视图。网页使用 Angular 4 开发，应用使用 NativeScript 开发。

【问题讨论】：

为什么要将密码存储在 localStorage 中？
能够在网络和移动设备上使用相同的登录方法。我使用它是为了让用户不必不断输入密码。你能想出一种方法来为 Web 和应用程序进行相同的登录吗？谢谢
您应该存储 sessionId 或您使用的任何内容来验证会话是否有效。任何可以帮助您解决此问题的人都可以轻松入侵您的网站并窃取您的所有用户数据。不要继续使用此方法。

标签： android local-storage nativescript

【解决方案1】：

在您启用 Android 时，localStorage API 将无法工作。您可以通过在加载事件时访问本机 WebView 的设置来启用它。

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

Playground Sample

在此之间，您是否可以localStorage 保存用户名/密码等机密信息是一个不同的问题。我的回答是否定的，你不能使用它，因为它很容易/开放访问。通常，您应该使用用户提供的这些凭据来访问登录 api，您可能应该得到access token，您将在随后与服务器进行任何通信。您可以将此令牌存储在您的localStoage 中，注销时将其清除。

【讨论】：

请不要帮助这个开发者给他的网站带来巨大的安全风险。
您能解释一下这种风险吗？我发现这个解决方案对我有用，但我不想遇到安全问题
@Noark 我知道我迟到了，但我相信 Mickers 正在谈论 OP 身份验证方法的不安全性（他说他将密码直接存储在 localStorage 中）。他不是在谈论 NativeScript 或 localStorage 的任何内在不安全性。

【解决方案2】：

完美，谢谢！！该示例运行良好。

.html

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

-组件（ts文件）

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();
    }
}

【讨论】：

请不要帮助这个开发者给他的网站带来巨大的安全风险。