html5用本地存储做留言板,带有本地存储功能的留言板js代码

这是一个很好用的带有本地存储功能的留言板js代码，页面设计的比较粗糙，主要看功能。

查看演示

下载资源：

10

次 下载资源

下载积分：

50

积分

js代码

var text = document.querySelector("#text");

var submit = document.querySelector("#submit");

var plan = document.querySelector(".plan");

var done = document.querySelector(".done");

var success = document.querySelector(".success");

var del = document.querySelector(".del");

var data = [];

function getData() {

return localStorage.todo ? JSON.parse(localStorage.todo) : [];

}

function saveData(data) {

localStorage.todo = JSON.stringify(data);

}

function reWrite() {

data = getData();

var str1 = "", str2 = "";

data.forEach(function (v, i) {

if (!v.done) {

str1 += `

${v.content}

${time(v.time)}

`;

} else {

str2 += `

${v.content}

${time(v.time)}

`;

}

});

plan.innerHTML = str1;

done.innerHTML = str2;

}

reWrite();

function time(t) {

var date = new Date();

date.setTime(t);

var year = date.getFullYear();

var month = setZero(date.getMonth() + 1);

var day = setZero(date.getDate());

var hour = setZero(date.getHours());

var minutes = setZero(date.getMinutes());

var seconds = setZero(date.getSeconds());

return year + "/" + month + "/" + day + " " + hour + ":" + minutes + ":" + seconds;

}

function setZero(num) {

if (num < 10) {

return "0" + num;

} else {

return num;

}

}

submit.onclick = function () {

if (text.value == "") {

return

}

var val = text.value;

text.value = "";

data = getData();

var date = new Date();

var time = date.getTime();

data.push({content: val, time:time, done: false});

saveData(data);

reWrite();

}

success.onclick = function(){

var d = document.querySelectorAll(".plan li input")

var index = [];

d.forEach(function(v,i){

if (v.checked) {

index.push(v.parentNode.id)

}

})

data = getData();

index.forEach(function(v,i){

data[v].done = true;

})

saveData(data);

reWrite()

}

del.onclick = function(){

var d = document.querySelectorAll(".done li input")

var index1 = [];

d.forEach(function(v,i){

if (v.checked) {

index1.push(v.parentNode.id)

}

})

data = getData();

for(var i=index1.length-1; i>=0; i--){

if (data[index1[i]].done==true) {

data.splice(index1[i],1)

}

}

saveData(data);

reWrite()

}

function change(ele){

console.log(1)

var id = ele.parentNode.id;

var val = ele.innerHTML;

var data = getData();

data[id].content = val;

saveData(data);

reWrite();

}