如何在 Nativescript Vue WebView 中启用 LocalStorage？

Question

我的 Nativscript Vue 应用程序中有一个 WebView，但在 Android 上，嵌入式网站无法访问浏览器中的 localStorage。 This question 解释了 Angular 的操作方法。问题是不清楚应该从哪里获取 webview 实例。完整性问题：如何访问包含 android 属性的 WebView 实例以在其上启用本地存储？

Answer 1

只需结合此插件使用 Vuex nativescript-localstorage。我说它在 Nativescript 6 上未经测试。我可以说它有效，因为我自己使用它。

store.js

的例子

import Vue from 'vue';
import Vuex from 'vuex';
import localStorage from 'nativescript-localstorage';

const NSVuexPersistent = store => {
    let storageStr = localStorage.getItem('ns-vuex-persistent');
    if (storageStr) {
        store.replaceState(JSON.parse(storageStr))
    }
    store.subscribe((mutation, state) => {
        // Suscribe hook.
        localStorage.setItem('ns-vuex-persistent', JSON.stringify(state));
    })
};

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        nations: null
    },
    plugins: [NSVuexPersistent],
    mutations: {
        updateNations(state, nations) {
            state.nations= nations;
        }
    }
});

你的 main.js 看起来怎么样（添加这个）：

import store from './store';

new Vue({
  store,
  render: h => h('frame', [h(App)])
}).$start()

Answer 2

最后我就是这样解决的。我需要访问通过属性 event.object 中的事件处理程序传递的 WebView。组件上没有名为 onWebViewLoaded 的事件，因为这不是 Angular。相反，我们需要挂接到 WebView 元素上的 loadFinished 事件。

<template>
  <Page>
    <WebView
      src="https://www.example.com/"
      @loaded="onLoaded"
    />
  </Page>
</template>

<script>
export default {
  methods: {
    //when the webview finishes loading
    onLoaded(event) {
      //get the webview
      const webView = event.object

      //if there is android
      if (webView.android) {
        //enable dom storage in the webview on android
        webView.android.getSettings().setDomStorageEnabled(true)
      }
    }
  }
}
</script>

如何在 Nativescript Vue WebView 中启用 LocalStorage？

How do I enable LocalStorage in a Nativescript Vue WebView?

android

webview

local-storage

nativescript

nativescript-vue