Vuejs结合html5 localstorage本地缓存开发webapp项目源码

Vuejs结合html5 localstorage本地缓存开发webapp项目源码，项目可以记录每次存储的数据，并统计历史记录、本月记录、最高记录等等。

点击在线预览

github仓库地址：

https://github.com/zhongyoucong/app/tree/master/app2.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: [],        //全部总计        totalCount:[            {totalWeight:'',totalIncome:''},            {hightWeight:'',hightIncome:'',hightPrice:''}        ],        //本月总计        crrMonthCount:[            {totalWeight:'',totalIncome:''},            {hightWeight:'',hightIncome:'',hightPrice:''}        ],        rcShowflag: false,        allShowflag:false,        crrShowflag:false    },    /*    computed: {        textcontents: function() {            return this.textcontent.reverse();        }    },*/    methods: {        //点击遮罩层消失        wraphide:function(){            this.rcShowflag = false;        },        //阻止冒泡        stopPro:function(e){            e = e || event;            e.stopPropagation();        },        showWrap: function() {            //切换显示            this.rcShowflag = true;        },        //全部总计显示隐藏        allwraphide:function(){            this.allShowflag = false;        },        allshowWrap:function(){            this.allShowflag = true;            var totalWeight=0,                totalIncome=0,                hightWeight=0,                hightPrice=0,                hightIncome=0;            //获取本地缓存数据            var localData = JSON.parse(localStorage.getItem("data"));            for(var i = 0, len = localData.length; i < len; i++){                totalWeight += localData[i].weight;                totalIncome = totalIncome + ((localData[i].price*localData[i].weight)*100)/100;                //最高重量                if(hightWeight < localData[i].weight){                    hightWeight = localData[i].weight;                }                //最高花价                if(hightPrice < localData[i].price){                    hightPrice = localData[i].price;                }                //最高收入                var temp = ((localData[i].price*localData[i].weight)*100)/100;                if(hightIncome < temp ) {                    hightIncome = temp;                }            }            //总计赋值            this.totalCount[0].totalWeight = Math.round(totalWeight*100)/100;            this.totalCount[0].totalIncome = Math.round(totalIncome*100)/100;            //历史之最赋值            this.totalCount[1].hightWeight = Math.round(hightWeight*100)/100;            this.totalCount[1].hightIncome = Math.round(hightIncome*100)/100;            this.totalCount[1].hightPrice = Math.round(hightPrice*100)/100;        },        //本月总计显示隐藏        crrwraphide:function(){            this.crrShowflag = false;        },        crrShowWrap:function(){            this.crrShowflag = true;            var localData = JSON.parse(localStorage.getItem("data"));            var crrMonthData = [];  //本月数据容器            var data,crrMonth,crrYear;            var nowYear = new Date().getFullYear();            var nowMonth = new Date().getMonth()+1;            //过滤本月数据            for(var i = 0, len = localData.length; i < len; i++){                data = (localData[i].data.split(" "))[0];                crrMonth = parseInt((data.split("-"))[1]);  //数据里面的月                crrYear = parseInt((data.split("-"))[0]);   //数据里面的年                //判断数据里面日期是否等于当前月，等于则存储起来                if(nowYear == crrYear && nowMonth == crrMonth){                    crrMonthData[crrMonthData.length] = localData[i];                }            }            //赋值输出到页面            var totalWeight=0,                totalIncome=0,                hightWeight=0,                hightPrice=0,                hightIncome=0;            //获取本地缓存数据            for(var i = 0, len = crrMonthData.length; i < len; i++){                totalWeight += crrMonthData[i].weight;                totalIncome = totalIncome + ((crrMonthData[i].price*crrMonthData[i].weight)*100)/100;                //最高重量                if(hightWeight < crrMonthData[i].weight){                    hightWeight = crrMonthData[i].weight;                }                //最高花价                if(hightPrice < crrMonthData[i].price){                    hightPrice = crrMonthData[i].price;                }                //最高收入                var temp = ((crrMonthData[i].price*crrMonthData[i].weight)*100)/100;                if(hightIncome < temp ) {                    hightIncome = temp;                }            }            //总计赋值            this.crrMonthCount[0].totalWeight = Math.round(totalWeight*100)/100;            this.crrMonthCount[0].totalIncome = Math.round(totalIncome*100)/100;            //历史之最赋值            this.crrMonthCount[1].hightWeight = Math.round(hightWeight*100)/100;            this.crrMonthCount[1].hightIncome = Math.round(hightIncome*100)/100;            this.crrMonthCount[1].hightPrice = Math.round(hightPrice*100)/100;        },        //添加工作记录        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;            }            var numReg = /^\d+(\.\d+)?$/;    //小数字正则            var text = document.getElementsByClassName("words")[0].value;            var price = document.getElementById("price").value;            var weight = document.getElementById("weight").value;            var floatprice = parseFloat(price);            var floatweight = parseFloat(weight);            var data = new Date().format("yyyy-MM-dd hh:mm:ss");            var flag = (text !== "" && price !== "" && weight !== "" && numReg.test(price) && numReg.test(weight));            if (flag){                tempobj.id = index; //设置id                tempobj.price = floatprice; //设置花价                tempobj.weight = floatweight; //设置重量                tempobj.content = text; //设置内容                tempobj.data = data; //设置时间                localData.unshift(tempobj);                this.textcontent = localData; //当前对象添加新增内容                localStorage.setItem("data", JSON.stringify(localData));                //重置表单                document.getElementsByClassName("words")[0].value = "";                document.getElementById("price").value = "";                document.getElementById("weight").value = "";                //切换隐藏                this.rcShowflag = 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">        <!--我要记录box-->        <div class="wrapbox" v-bind:class="{'active':rcShowflag}" @click="wraphide()">            <div class="box" @click="stopPro()">                <form>                    <input type="number" placeholder="多少钱一斤花（块）" class="num fl" id="price">                    <input type="number" placeholder="多少斤花（斤）" class="num fr" id="weight">                    <textarea placeholder="请输入你要记录的内容，限定200个字 " maxlength="200" class="words"></textarea>                    <div class="bluebtn" @click="addItem()">立即保存</div>                </form>            </div>        </div>        <!--我要记录box-->        <!--本月总计box-->        <div class="wrapbox" v-bind:class="{'active':crrShowflag}" @click="crrwraphide()">            <div class="box" @click="stopPro()">                <div class="countbox">                    <h1><i class="icon-signal"></i>&nbsp;本月总计</h1>                    <h3><i class="icon-trophy"></i>&nbsp;总重量：<strong>{{crrMonthCount[0].totalWeight}}</strong>&nbsp;斤</h3>                    <h3><i class="icon-strikethrough"></i>&nbsp;总收入：<strong>{{crrMonthCount[0].totalIncome}}</strong>&nbsp;元</h3>                </div>                <div class="countbox">                    <h1><i class="icon-bar-chart"></i>&nbsp;本月之最</h1>                    <h3><i class="icon-trophy"></i>&nbsp;最高重量：<strong>{{crrMonthCount[1].hightWeight}}</strong>&nbsp;斤</h3>                    <h3><i class="icon-strikethrough"></i>&nbsp;最高收入：<strong>{{crrMonthCount[1].hightIncome}}</strong>&nbsp;元</h3>                    <h3><i class="icon-list-alt"></i>&nbsp;最高花价：<strong>{{crrMonthCount[1].hightPrice}}</strong>&nbsp;元/斤</h3>                </div>            </div>        </div>        <!--本月总计box-->        <!--全部总计box-->        <div class="wrapbox" v-bind:class="{'active':allShowflag}" @click="allwraphide()">            <div class="box" @click="stopPro()">                <div class="countbox">                    <h1><i class="icon-signal"></i>&nbsp;全部总计</h1>                    <h3><i class="icon-trophy"></i>&nbsp;总重量：<strong>{{totalCount[0].totalWeight}}&nbsp;</strong>斤</h3>                    <h3><i class="icon-strikethrough"></i>&nbsp;总收入：<strong>{{totalCount[0].totalIncome}}&nbsp;</strong>元</h3>                </div>                <div class="countbox">                    <h1><i class="icon-bar-chart"></i>&nbsp;历史之最</h1>                    <h3><i class="icon-trophy"></i>&nbsp;最高重量：<strong>{{totalCount[1].hightWeight}}</strong>&nbsp;斤</h3>                    <h3><i class="icon-strikethrough"></i>&nbsp;最高收入：<strong>{{totalCount[1].hightIncome}}</strong>&nbsp;元</h3>                    <h3><i class="icon-list-alt"></i>&nbsp;最高花价：<strong>{{totalCount[1].hightPrice}}</strong>&nbsp;斤/元</h3>                </div>            </div>        </div>        <!--全部总计box-->        <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="price number"><i class="icon-strikethrough"></i>&nbsp;单价：(<strong>{{value.price}}</strong>)元/斤</span>                    <span class="weight number"><i class="icon-trophy"></i>&nbsp;重量：(<strong>{{value.weight}}</strong>)斤</span>                    <span class="total number"><i class="icon-strikethrough"></i>&nbsp;收入：(<strong>{{Math.round(value.weight*value.price*100)/100}}</strong>)元</span>                </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="savebtn" @click="showWrap()"><i class="icon-pencil"></i>&nbsp;我要记录</div>            <div class="currmonthbtn" @click="crrShowWrap()"><i class="icon-signal"></i>&nbsp;本月总计</div>            <div class="totalbtn" @click="allshowWrap()"><i class="icon-bar-chart"></i>&nbsp;全部总计</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%;    padding: 2rem;    margin: -16.7rem auto 0;    background: #fff;    border-radius: 2.4rem;    border: 4px solid #3399FF;}#wordText .wrapbox .box textarea {    width: 99.5%;    height: 17.1rem;    margin: 0;    padding: 0;    box-shadow: 0 0 0.1rem #ccc;    border: 1px solid #ccc;    resize: none;    -webkit-appearance: none;    font-size: 1.6rem;    -webkit-tap-highlight-color: transparent;}#wordText .wrapbox .box textarea::-webkit-input-placeholder {    font-size: 1.6rem;}#wordText .wrapbox .box .num {    height: 4rem;    width: 41%;    margin-bottom: 1rem;    font-size: 1.6rem;    box-shadow: 0 0 0.1rem #ccc;    border: 1px solid #ccc;    -webkit-appearance: none;    -webkit-tap-highlight-color: transparent;}#wordText .contentlist .number {    display: block;    margin: 0.5rem 0;    color: green;    font-size: 1.5rem;}#wordText .contentlist .number strong {    font-size: 1.6rem;    color: red;    margin: 0 0.2rem;}#wordText .wrapbox .box .fl {    float: left;}#wordText .wrapbox .box .fr {    float: right;}#wordText .wrapbox .box .countbox {    margin: 1rem 0;}#wordText .wrapbox .box .countbox h1 {    color: #666;    font-weight: normal;    margin-bottom: 1rem;}#wordText .wrapbox .box .countbox h3 {    font-size: 1.8rem;    font-weight: normal;    margin: 0.8rem 0;    color: green;}#wordText .wrapbox .box .countbox h3 strong {    color: red;}#wordText .wrapbox .box .bluebtn {    margin-top: 0.8rem;    border-radius: 0.5rem;}#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;    display: flex;    bottom: 0;    width: 100%;    height: 6rem;    background: #fff;}#wordText .bottombtn div {    flex: 1;    height: 6rem;    line-height: 6rem;    text-align: center;    font-size: 1.6rem;    color: #3399FF;    -webkit-tap-highlight-color: transparent;}#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;}