Javascript 如何使用localStorage项更新vue数据属性

我有一个小的vue js入门应用程序，它看起来像这样：

    var app4 = new Vue({
        el: '#app-4',
        data: {
            formContents: {},
            posts: [
                {
                    text: 'First NBA All-Star Game',
                    desc: 'The 1951 NBA All-Star Game was an exhibition basketball game played on March 2, 1951, at Boston Garden in Boston, Massachusetts, home of the Boston Celtics. The game was the first edition of the National Basketball Association (NBA) All-Star Game and was played during the 1950–51 NBA season.',
                    time: randomDate(Math.floor(Math.random() * 1619184858334)),
                    author: 'Alexey Bereznyak'
                },
                {
                    text: 'The first BMW M5',
                    desc: 'The E28 BMW 5-series, released in 1981, was BMW’s breakthrough executive saloon. Designed by the iconic BMW designer Claus Luthe, the E28 was initially sold with a combination of relatively subdued four and six-cylinder engines, but in 1984 BMW revealed the very first M5 at the Amsterdam motor show. The M5 was not the first ‘sporty’ 5-series - that would be the less powerful M535i - but the M5 differed over its less subtle sibling not only by dressing down its visual attire, but utilising the M88 straight-six engine, the very one that made its debut on BMW’s first supercar, the M1.',
                    time: randomDate(Math.floor(Math.random() * 1619184858334)),
                    author: 'Alexey Bereznyak'
                },
            ]
        },
        methods: {
            getDate: () => new Date(),
            formSubmit: function (event) {
                //set date (value = now)
                this.formContents.time = new Date();
                //add new post to posts array
                Object.entries(app4.posts).push(this.formContents);

                //function to store new posts
                var addPost = function (newPost) {
                    //either work with an empty array or with items out of localstorage
                    var savedPosts = JSON.parse(localStorage.getItem('blogpost')) || [];

                    //set newPost object as follows
                    var newPost = {
                        'text': newPost.text,
                        'desc': newPost.desc,
                        'time': new Date(),
                        'author': newPost.author
                    };

                    savedPosts.push(newPost);
                    localStorage.setItem('blogpost', JSON.stringify(savedPosts));
                    //savedPosts.push(JSON.stringify(newPost));
                };

                addPost(this.formContents);

                this.formContents = {};
            },


            //if found, append items to the posts data aray
            appendLocal: function appendLocal() {
                const postsStoredLocally = JSON.parse(localStorage.getItem('blogpost'));

                var arrayOfLocalPosts = Object.entries(postsStoredLocally);
                var arrayOfHardCodedPosts = Object.entries(app4.posts);
                
                
                arrayOfLocalPosts.forEach(function(localPost){
                    arrayOfHardCodedPosts.push(localPost);
                })
                
                
                arrayOfHardCodedPosts.forEach(function(singlepost){
                    console.log(singlepost)
                })        
                
                this.posts = Object.fromEntries(arrayOfHardCodedPosts);
                console.log(this.posts)
            },
        }
    })
    app4.appendLocal();

以及下面的index.html

<div class="row" id="app-4">
    <div class="col">
        <h1>
            Vue.js based Microblog, timeline
        </h1>
    </div>
    <div class="col large-6">
        <div>
            <div class="posts-container">
                <div class="post" v-for="post in posts">
                    <p class="title">
                        {{ post.text }}
                    </p>
                    <p class="desc">
                        {{ post.desc }}
                    </p>
                    <div class="post-footer">
                        <p class="time">
                            Written on: {{ post.time }}
                        </p>
                        <p class="author">
                            By: {{ post.author }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col large-prefix-2 large-4">
        <h2>
            Create Post
            <form v-on:submit.prevent="formSubmit">
                <label for="Postitle">Post title</label>
                <input required v-model="formContents.text" type="text" name="Postitle" id="Postitle">
                <label for="Postcontents">Post contents</label>
                <input required v-model="formContents.desc" type="text" name="Postcontents" id="Postcontents">
                <label for="Postauthor">Post Author</label>
                <input v-model="formContents.author">
                <button>Submit</button>
            </form>
        </h2>
    </div>

</div>

基于Vue.js的微博，时间线

{{post.text}


{{post.desc}}


写在：{post.time}


作者：{post.author}

创建帖子
职称
帖子内容
后作者
提交

我有一个表单，它有一个onsubmit事件，我想做的是显示我在vue数据对象中硬编码的项目和来自localStorage的iTen。目前，我只能看到LocalStorage中的项目，表单已损坏

感谢您的帮助