84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
私は少し前に Vue を学んだばかりです。オンライン デモに従って、ローカル ストレージとして localstorage を使用するという簡単なメモを作成しました。その後、ページを更新するとき、またはページを離れるときに localstorage メソッドを呼び出したいと考えています。これは実現できますか?もしそうなら、どのようにして?ご回答ありがとうございます。感謝いたします。
一般使用 Vue 开发时,不需要摸 window.onload 这类 DOM 相关的 API,而是使用 Vue 封装的组件生命周期钩子:
window.onload
export default { // ... // 在组件初始化时调用,可以简单理解为页面加载时 created () { // 存在 localStorage 的缓存内容 if (localStorage.data) { this.myData = JSON.parse(localStorage.data) } else { // 页面无缓存内容时,初始化数据并写入缓存 this.initData() } } // 在组件销毁前调用,但这并不能监听到页面退出的事件 beforeDestory () { // 在此同样可对 localStorage 做一些处理 } }
用生命周期函数,根据需求选择用哪个,参考 https://cn.vuejs.org/v2/api/#选项-生命周期钩子
使用localstorage做本地存储,然后我想在刷新页面或者离开页面的调用localstorage方法
1、页面刷新使用localstorage,也就是当vue被实例化之后有如下几个可以供你使用:
export default { beforecreate() { // 创建前状态 } created () { // 创建完毕状态 } beforeMount(){ // 挂载前状态 } mounted(){ // 挂载结束状态 } }
这几个都是可以在页面刷新的时候操作本地存储。注: 其实本地存储也可以不写在vue实例当中,本质上与vue无关,你只是在当页面刷新的时候为了执行一段js而已
main.js
/* 项目启动 */ import Vue from 'vue' import App from './App' import router from './router' /**************************** 写这里也不是不可以 ****************************/ new Vue({ router: router, render: h => h(App) // components: { firstcomponent, secondcomponent } }).$mount('#app')
2、页面关闭与vue的生命周期无关,也不存在销毁一说,因此关闭页面没有方法让你使用操作localStorage,这一点跟楼上几位说的不一样。
一般使用 Vue 开发时,不需要摸
window.onload
这类 DOM 相关的 API,而是使用 Vue 封装的组件生命周期钩子:用生命周期函数,根据需求选择用哪个,参考 https://cn.vuejs.org/v2/api/#选项-生命周期钩子
使用localstorage做本地存储,然后我想在刷新页面或者离开页面的调用localstorage方法
1、页面刷新使用localstorage,也就是当vue被实例化之后有如下几个可以供你使用:
这几个都是可以在页面刷新的时候操作本地存储。
注: 其实本地存储也可以不写在vue实例当中,本质上与vue无关,你只是在当页面刷新的时候为了执行一段js而已
main.js
2、页面关闭与vue的生命周期无关,也不存在销毁一说,因此关闭页面没有方法让你使用操作localStorage,这一点跟楼上几位说的不一样。