html5 localstorage结合vue开发本地记事本项目源码
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代码部分：
<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> {{value.content}}p>
<p>
<span class="delbtn" @click="delItem(index)"><i class="icon-remove-circle">i> 删除span>
<span class="data"><i class="icon-calendar">i> {{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;
}