vue.js 传值 刷新保存

// 保存数据到 localStorage
localStorage.setItem('myDataKey', JSON.stringify(this.myData));

// 从 localStorage 读取数据
const savedData = JSON.parse(localStorage.getItem('myDataKey'));

// 保存数据到 sessionStorage
sessionStorage.setItem('myDataKey', JSON.stringify(this.myData));

// 从 sessionStorage 读取数据
const savedData = JSON.parse(sessionStorage.getItem('myDataKey'));

// 在 Vuex store 中
const store = new Vuex.Store({
state: {
myData: JSON.parse(localStorage.getItem('myDataKey')) || {}
},
mutations: {
updateMyData(state, payload) {
state.myData = payload;
localStorage.setItem('myDataKey', JSON.stringify(payload));
}
}
});

<template>
<div>
<input v-model="message" placeholder="Type something...">
<p>{{ message }}</p>
</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
setup() {
const message = ref(localStorage.getItem('message') || '');

onMounted(() => {
window.addEventListener('beforeunload', () => {
localStorage.setItem('message', message.value);
});
});

return { message };
}
};
</script>