6、localStorage 本地数据存储-mounted页面加载后触发

红鹰_Jake

于 2021-07-31 16:22:00 发布

阅读量535

点赞数

分类专栏： Vue2+Vue3 文章标签： vue

本文链接：https://blog.youkuaiyun.com/u011109679/article/details/119277468

版权

Vue2+Vue3 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用Vue.js配合localStorage实现数据在页面刷新后仍保持一致，通过`v-model`双向数据绑定和`@keydown.enter`监听事件，展示了如何将文本框输入的内容添加到列表并持久化存储。关键步骤包括使用`setItem`保存数据和`mounted`钩子重新加载本地数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

localStorage 本地数据存储-mounted页面加载后触发

localStorage 案例，数据保存到本地，刷新页面数据还在

localStorage 案例，数据保存到本地，刷新页面数据还在

<template>
    <div>
        <h3>文本框输入内容，回车保存，刷新页面数据一致</h3>
        <input type="text" v-model="textInfo" @keydown.enter="saveData">
        <ul>
            <li v-for="(item,index) in list" :key="index">
                {{item}}
                <button @click="deleteData(index)">删除</button>
                </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            textInfo:'',
            list:[]
        }
    },
    methods: {
        saveData(){
            this.list.push(this.textInfo);
            this.textInfo='';

            //数据保存到本地
            localStorage.setItem('listData',JSON.stringify(this.list));
        },
        deleteData(index){
            this.list.splice(index,1);
            //重新保存数据
            localStorage.setItem('listData',JSON.stringify(this.list));
        }
    },
    mounted() {
        //Vue 加载后执行方法，重新本地数据进行加载
        this.list=JSON.parse(localStorage.getItem('listData'));

        console.log('页面重新加载完成');
    },
}
</script>