Vuejs에서 로컬 스토리지를 '관찰'할 수 있는 방법이 있습니까?

Vuejs에서 로컬 스토리지를 '관찰'할 수 있는 방법이 있습니까?

로컬 스토리지를 감시하려고 합니다.

템플릿:

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

스크립트:

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

하지만 그건 변하지 않아token변화들.페이지를 새로 고친 후에만.

Vuex나 상태 관리를 사용하지 않고 이 문제를 해결할 수 있는 방법이 있습니까?

그럼요!getter/setter 구문을 사용하여 로컬 스토리지를 랩하는 것이 가장 좋은 방법이라고 생각합니다.

다음으로 작업 예를 제시하겠습니다.

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.

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,
  }
}

VueJs 사이트에는 이에 대한 페이지가 있습니다.https://vuejs.org/v2/cookbook/client-side-storage.html

예를 들어 설명하겠습니다.이 html 템플릿 지정

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

그mountedmethod가 보증하는 것은name는 로컬 스토리지에서 설정됩니다(이미 존재하는 경우).또한 워처는 로컬스토리지의 이름이 변경될 때마다 컴포넌트가 응답할 수 있도록 합니다.로컬 스토리지의 데이터가 추가 또는 변경되었을 때는 정상적으로 동작하지만, 누군가가 로컬 스토리지를 수동으로 삭제해도 Vue는 응답하지 않습니다.

업데이트: vue-persistent-state는 더 이상 유지되지 않습니다.포크를 끼우거나, 그대로 당신의 입맛에 맞지 않으면 다른 곳을 찾아보세요.

보일러 플레이트(getter/setter-syntax)를 회피하려면 vue-persistent-state를 사용하여 reactive persistent 스테이트를 취득합니다.

예를 들어 다음과 같습니다.

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.tokenlocalStorage에 저장되므로this.tokenVanilla Vue 앱에서처럼요.

플러그인은 기본적으로 워처와localStorage.set여기서 코드를 읽을 수 있습니다.그것

1. 만들 믹스인을 추가하다initialState모든 Vue 인스턴스에서 사용 가능
2. 변경을 감시하고 저장합니다.

면책사항:저는 vue-persistent-state의 저자입니다.

두 가지 방법으로 할 수 있습니다.

1. vue-ls를 사용한 다음 스토리지 키에 리스너를 추가하여

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

   또는

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

2. DOM의 스토리지 이벤트 수신기를 사용하여 다음을 수행합니다.

       document.addEventListener('storage', storageListenerMethod);
   

LocalStorage 또는 sessionStorage는 반응하지 않습니다.따라서 감시자를 둘 수 없습니다.해결책은 예를 들어 Vuex를 사용하는 경우 저장소 상태의 값을 저장하는 것입니다.예:

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

언급URL : https://stackoverflow.com/questions/42974170/is-there-any-way-to-watch-for-localstorage-in-vuejs