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

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>