VUE-运用组件实现评论列表，把列表存到本地 localStorage，防止刷新后数据消失

最新推荐文章于 2025-07-06 15:58:57 发布

原创最新推荐文章于 2025-07-06 15:58:57 发布 · 841 阅读

1 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

83 篇文章

订阅专栏

博客介绍了DOM结构中评论子组件与父组件内容，重点探讨点击【发表评论】后，最新评论显示在列表最上方的实现方法。包括将评论数据存到localStorage，组织评论数据对象，处理新旧评论数据，存储最新评论列表，清空输入及向父组件传值等步骤。

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

1、dom结构说明:

【评论人、评论内容、发表评论】是子组件内容；评论列表是父组件内容；

2、功能点：点击【发表评论】，最新评论的内容显示在评论列表的最上面，如何实现？

分析：

// 1. 发表评论的数据存到localStorage 中，关于localStorage ，说明几点：

a. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的;
b. localStorage只支持string类型的存储
c. localStorage.setItem(key,value)：将value存储到key字段,如果value是JSON对象，需要使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
d. localStorage.getItem(key):获取指定key本地存储的值
e. 如果需要将JSON字符串转为JSON，则使用JSON.parse()方法实现

// 2. 先组织出一个最新的评论数据对象

// 3. 在保存最新的评论数据之前，要先从 localStorage 获取到之前的评论数据（string），转换为一个数组对象；如果获取到的localStorage 中的评论字符串，为空不存在，则可以返回一个 '[]' 让 JSON.parse 去转换；然后，把最新的评论，unshift到这个数组

// 4. 把最新的评论列表数组，再次调用 JSON.stringify 转为数组字符串，然后调用 localStorage.setItem()存储起来

//5. 评论之后，把评论人、评论内容置空

//6. 调用父组件传递的方法，向父组件传值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
  <style>
  .box{
    padding: 20px;
  }
  </style>
</head>

<body>
  <div id="app" class="box">
    <cmt-box @func="loadComments"></cmt-box>
    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>
  </div>
  <!-- 和父组件平级放置，独立于app -->
  <template id="tmpl">
    <div>
      <div class="form-group">
        <label>评论人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>
      <div class="form-group">
        <label>评论内容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>
      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>
    </div>
  </template>
  <script>
    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
          var comment = { id: Date.now(), user: this.user, content: this.content }
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          localStorage.setItem('cmts', JSON.stringify(list))
          this.user = this.content = ''
          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: []
      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中，加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>