vue使用localStorage持久性存储实现评论列表


Posted in Vue.js onApril 14, 2022

案例数据使用localStorage持久性存储 全局过滤器实现时间格式化

代码部分

<!DOCTYPE html>
<html lang="zh">
    <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></title>
        <script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="external nofollow"  />
    </head>
    <body>
        <div id="app">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3">
                        <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 badge-pill badge-dark float-right">评论人:{{item.user}}</span>
                                <span class="float-right" style="position: relative;right: 60px;">{{ item.ctime | dateFormat() }}</span>
                                {{item.content}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <template id="tmpl">
            
            <div>
                <div class="form-group">
                    <label for="comment">评论人:</label>
                    <input type="text" id="comment" class="form-control" v-model="user" />
                </div>
                
                <div class="form-group">
                    <label for="commentText">评论内容:</label>
                    <textarea id="commentText" 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 type="text/javascript">
            
            // 全局过滤器 时间格式化
            // 所谓的全局过滤器,就是所有的VM实例都共享的
            Vue.filter('dateFormat',function(dateStr,pattern=""){
                 // 根据给定的时间字符串,得到特定的时间
                 
                var dt = new Date(dateStr)
                
                //   yyyy-mm-dd
                var year = dt.getFullYear()
                
                var month = (dt.getMonth() + 1).toString().padStart(2,'0')
                
                var day = dt.getDate().toString().padStart(2,'0')
                
                // return `${year}-${month}-${day}`
                
                if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
                    return `${year}-${month}-${day}`
                }else{
                    var hh = dt.getHours().toString().padStart(2,'0')
                    
                    var mm = dt.getMinutes().toString().padStart(2,'0')
                    
                    var ss = dt.getSeconds().toString().padStart(2,'0')
                    
                    return `${year}-${month}-${day} ${hh}:${mm}:${ss}`
                    
                }
                
            })
            
            var commentBox = {
                data() {
                    return {
                        user: '',
                        content: '',
                        ctime:new Date()
                    }
                },
                template: '#tmpl',
                methods: {
                    postComment() {
                        //  localStorage 只支持存放字符串数据, 要先调用 JSON.stringify 
                        //  在保存 最新的 评论数据之前,要先从 localStorage 获取到之前的评论数据(string), 转换为 一个  数组对象, 然后,把最新的评论, push 到这个数组
                        //  如果获取到的 localStorage 中的 评论字符串,为空不存在, 则  可以 返回一个 '[]'  让 JSON.parse 去转换
                        //  把 最新的  评论列表数组,再次调用 JSON.stringify 转为  数组字符串,然后调用 localStorage.setItem()

                        var comment = {
                            id: Date.now(),
                            user: this.user,
                            content: this.content,
                            ctime:this.ctime
                        }
                        
                        // 从 localStorage 中获取所有的评论
                        var list = JSON.parse(localStorage.getItem('cmts') || '[]')

                        list.unshift(comment)

                        // 重新保存最新的 评论数据
                        localStorage.setItem('cmts', JSON.stringify(list))

                        this.user = this.content = ''

                        this.$emit('func')

                    }
                }
            }

            var vm = new Vue({
                el: '#app',
                data: {
                    list: []
                },
                methods: {
                    loadComments() {
                        // 从本地的 localStorage 中,加载评论列表
                        var list = JSON.parse(localStorage.getItem('cmts') || '[]')

                        this.list = list

                    }
                },
                components: {
                    'cmt-box': commentBox
                },
                created() {
                    this.loadComments()
                }
            })
        </script>

    </body>
</html>

效果图

vue使用localStorage持久性存储实现评论列表

Vue.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 #Vue.js
vue elementUI表格控制对应列
Apr 13 #Vue.js
vue项目打包后路由错误的解决方法
Apr 13 #Vue.js
vue的项目如何打包上线
vue2的 router在使用过程中遇到的一些问题
Apr 13 #Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 #Vue.js
You might like
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python实现PS图像调整黑白效果示例
2018/01/25 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
思想品德课教学反思
2014/02/10 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
消防安全承诺书
2014/05/22 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
贷款工资证明范本
2015/06/12 职场文书
个人催款函范文
2015/06/24 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS