Question

我正在尝试关注本地存储：

模板：

<p>token - {{token}}</p>

脚本：

computed: {
  token() {
    return localStorage.getItem('token');
  }
}

但是当token发生变化时，它不会改变。仅在刷新页面后。

有没有办法在不使用Vuex或状态管理的情况下解决这个问题？

Answer 1

当然可以！我认为最好的做法是使用getter / setter语法来包装localstorage。

这是一个有效的例子：

<强> HTML：

<div id="app">
  {{token}}
  <button @click="token++"> + </button>
</div>

<强> JS：

new Vue({
  el: '#app',
  data: function() {
    return {
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
      }
    };
  }
});

和JSFiddle。

Answer 2

如果您想避免使用样板（getter / setter-syntax），请使用vue-persistent-state来获取反应式持久状态。

例如：

import persistentState from 'vue-persistent-state';  

const initialState = {
  token: ''  // will get value from localStorage if found there
};
Vue.use(persistentState, initialState);

new Vue({
  template: '<p>token - {{token}}</p>'
})

现在token可用作所有组件和Vue实例中的数据。对this.token的任何更改都将存储在localStorage中，您可以像使用vanilla Vue应用程序一样使用this.token。

该插件基本上是观察者和localStorage.set。您可以阅读代码here。它

添加mixin以使initialState在所有Vue实例中都可用，并
注意变化并存储它们。

免责声明：我是vue-persistent-state的作者。

Answer 3

localStorage不是被动的，但我需要“监视”它，因为我的应用程序使用本地存储并且不想重写所有内容，因此这就是我使用CustomEvent所做的。

每当您向存储空间添加内容时，我都会调度CustomEvent

localStorage.setItem('foo-key', 'data to store')

window.dispatchEvent(new CustomEvent('foo-key-localstorage-changed', {
  detail: {
    storage: localStorage.getItem('foo-key')
  }
}));

然后您需要在哪里观看它：

mounted() {
  window.addEventListener('foo-key-localstorage-changed', (event) => {
    this.data = event.detail.storage;
  });
},
data() {
  return {
    data: null,
  }
}

Answer 4

VueJs网站上有关于此的页面。 https://vuejs.org/v2/cookbook/client-side-storage.html

他们提供了一个例子。有了这个html模板

set

他们提供了生命周期text方法和观察者的用法。

<template>
  <div id="app">
    My name is <input v-model="name">
  </div>
<template>

mounted方法可确保从本地存储中设置const app = new Vue({ el: '#app', data: { name: '' }, mounted() { if (localStorage.name) { this.name = localStorage.name; } }, watch: { name(newName) { localStorage.name = newName; } } });（如果已存在），并且观察者允许您的组件在修改本地存储中的名称时作出反应。这适用于添加或更改本地存储中的数据的情况，但是如果有人手动擦除其本地存储，Vue不会做出反应。

Answer 5

您可以通过两种方式做到这一点，

，方法是使用vue-ls，然后使用

在存储键上添加侦听器

    Vue.ls.on('token', callback)

或

    this.$ls.on('token', callback)

通过使用DOM的存储事件侦听器：

    document.addEventListener('storage', storageListenerMethod);

Answer 6

LocalStorage或sessionStorage不起作用。因此，您不能对它们进行监视。例如，如果您使用的是Vuex，一种解决方案是从存储状态存储值。例如：

SET_VALUE:(state,payload)=> {
    state.value = payload
    localStorage.setItem('name',state.value)
    or
    sessionStorage.setItem('name',state.value)
  }

Answer 7

模板：

captcha_data = driver.find_element_by_id("s0-66-captcha-data").get_attribute("value")
captcha_data = eval(captcha_data)

site_key = captcha_data.get('siteKey')

captcha_url = driver.current_url


solver = recaptchaV2Proxyless()
solver.set_verbose(1)
solver.set_key(anti_captcha_key)
solver.set_website_url(captcha_url)
solver.set_website_key(site_key)

driver.execute_script(
    "arguments[0].style.display='inline'",
    driver.find_element_by_xpath(
        '//*[@id="g-recaptcha-response"]'
    ),
)

g_response = solver.solve_and_return_solution()
if g_response != 0:
    print ("g-response: "+g_response)
else:
    print ("task finished with error "+solver.error_code)


driver.execute_script(
'document.getElementById("g-recaptcha-response").innerHTML = "%s"'
            % g_response
)

   

driver.find_element_by_id("g-recaptcha-response").submit()

脚本：

<p>token - {{token}}</p>

不发出自定义事件（为此，它真的是多余的）。就像魅力一样！

有什么方法可以“观察”Vuejs的本地存储吗？

7 个答案: