html5 localstorage结合vue开发本地记事本项目源码_一个html本地记事本源码-CSDN博客

本文链接：https://blog.csdn.net/CodingNoob/article/details/72758980

html5 localstorage结合vue开发本地记事本项目源码

github仓库地址：https://github.com/zhongyoucong/app/tree/master/app1.0

效果图如下：
这里写图片描述

js代码

//日期格式化函数
Date.prototype.format = function(fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};

var dataobj, data,index;
//判断用户是否是第一次使用（专指没有清空过缓存那些）
if (localStorage.getItem("data")) {
    dataobj = JSON.parse(localStorage.getItem("data"));
} else {
    dataobj = [];
    data = localStorage.setItem("data", JSON.stringify(dataobj));
}


var vue = new Vue({
    el: "#wordText",
    data: {
        //原始用户评论信息
        textcontent: dataobj,
        textcontents: [],
        //当前用户信息
        showflag: false
    },
    /*
    computed: {
        textcontents: function() {
            return this.textcontent.reverse();
        }
    },*/
    methods: {
        showWrap: function() {
            //切换显示
            this.showflag = true;
        },
        //添加工作记录
        addItem: function(e) {
            var e = e || event;
            var index = null;
            var tempobj = {}; //存储插入数据的容器

            var localData = JSON.parse(localStorage.getItem("data"));
            //判断开始的时候是否是否为空
            if (localData.length == 0) {
                index = 1;
            } else {
                index = parseInt(localData[0].id) + 1;
            }

            console.log(index);
            var text = document.getElementsByClassName("words")[0].value;
            var data = new Date().format("yyyy-MM-dd hh:mm:ss");

            if (text) {
                tempobj.id = index; //设置id
                tempobj.content = text; //设置内容
                tempobj.data = data; //设置时间

                localData.unshift(tempobj);
                this.textcontent = localData; //当前对象添加新增内容

                localStorage.setItem("data", JSON.stringify(localData));
                document.getElementsByClassName("words")[0].value = "";

                //切换隐藏
                this.showflag = false;

            } else {
                alert("请输入要记录的内容！");
                e.stopPropagation();
            }
        },
        delItem: function(index) {

            this.textcontent.splice(index, 1); //删除vue数据中对应选项

            //删除本地localStorage中的对应的数据项
            var localData = JSON.parse(localStorage.getItem("data")); //先获取缓存数据
            localData.splice(index, 1); //删除缓存数据
            localStorage.setItem("data", JSON.stringify(localData)); //保存缓存数据
        }
    }
});

html代码部分：

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

<head>
    <meta charset="utf-8">
    <title>工作记事本</title>
    <link rel="apple-touch-icon" sizes="57x57" href="img/app.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="telephone=yes" name="format-detection" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="x5-fullscreen" content="true">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/vue.min.js"></script>

</head>

<body>
    <div id="wordText">

        <div class="wrapbox" v-bind:class="{'active':showflag}">
            <div class="box">
                <form>
                    <textarea placeholder="请输入你要记录的内容，限定200个字 " maxlength="200 " class="words "></textarea>
                    <div class="bluebtn " @click="addItem()">立即保存</div>
                </form>
            </div>
        </div>

        <div class="contentlist">
            <div class="item" v-for="(value, index) in textcontent">
                <p class="textcontent"><i class="icon-tags"></i>&nbsp;{{value.content}}</p>
                <p>
                    <span class="delbtn" @click="delItem(index)"><i class="icon-remove-circle"></i>&nbsp;删除</span>
                    <span class="data"><i class="icon-calendar"></i>&nbsp;{{value.data}}</span>
                </p>
            </div>
        </div>

        <div class="bottombtn">
            <div class="bluebtn" @click="showWrap()">我要记录</div>
        </div>
    </div>
</body>

<script src="js/index.js"></script>

</html>

css代码

@charset "UTF-8";
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

a {
    text-decoration: none;
}

ul li {
    list-style-type: none;
}

a img {
    border: none;
}
a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
html {
    font-size: 62.5%;
    font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", "宋体", Tahoma, Arial, Helvetica, STHeiti;
}

.bluebtn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #39F;
    border: 1px solid #39F;
    border-radius: 0;
    -webkit-appearance: none;
    font-size: 2rem;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #E4E4E4;
    padding: 0 0 6rem 0;
}

#wordText .wrapbox {
    display: none;
    position: fixed;
    z-index: 99999;
    width: 94%;
    height: 100%;
    padding: 0 3%;
    font-size: 2rem;
    background: url(../img/maskbg.png);
}

#wordText .active {
    display: block;
}

#wordText .wrapbox .box {
    position: relative;
    top: 50%;
    height: 23.5rem;
    padding: 2rem;
    margin: -12.7rem auto 0;
    background: #fff;
    border-radius: 2.4rem;
}

#wordText .wrapbox .box textarea {
    width: 99.5%;
    height: 17.1rem;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 0.1rem #ccc;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    resize: none;
    -webkit-appearance: none;
    font-size: 1.6rem;
    -webkit-tap-highlight-color: transparent;
}

#wordText .wrapbox .box .bluebtn {
    margin-top: 0.8rem;
}

#wordText .contentlist {
    padding: 3%;
}

#wordText .contentlist .item {
    padding: 3%;
    margin-bottom: 1.6rem;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 0.4rem 0 #BCBCBC;
}

#wordText .contentlist .textcontent {
    margin-bottom: 1rem;
    color:orange;
    line-height: 24px;
    font-size: 1.8rem;
}

#wordText .bottombtn {
    position: fixed;
    bottom: 0;
    width: 94%;
    padding: 3%;
    background: #fff;
}

#wordText .contentlist .delbtn {
    margin-left: 0.5rem;
    color: #3399FF;
    font-size: 1.4rem;
    -webkit-tap-highlight-color: transparent;
}

#wordText .contentlist .data {
    float: right;
    color: #999;
    font-size: 1.4rem;
}