核心提示：localStorage todoList 的demo分享!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport conte...
localStorage todoList 的demo分享
<!DOCTYPE html>
<html lang="en">
<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>localStorage</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.main {
width: 960px;
height: 100vh;
overflow: hidden;
margin: 0 auto;
font-size: 16px;
}
h1 {
padding: 10px 0;
}
.input {
display: flex;
align-items: center;
}
.input input {
background: #d2d2ff;
flex: 1;
height: 30px;
line-height: 30px;
font-size: 16px;
border-radius: 30px;
padding: 0 30px;
}
.input a {
display: inline-block;
padding: 0 30px;
border-radius: 30px;
height: 30px;
line-height: 30px;
background: #74d074;
color: #fff;
margin-left: 10px;
}
li {
margin: 10px;
background: #f2f2f2;
padding: 5px;
position: relative;
border-radius: 10px;
}
.delete {
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
padding: 0 30px;
border-radius: 30px;
height: 30px;
line-height: 30px;
background: #ffafaf;
color: #fff;
}
.inputTxt {
background: #ccc;
margin-left: 10px;
}
</style>
</head>
<body>
<p class="main">
<h1>Today Todo</h1>
<p class="input">
<input type="text" placeholder="Today Todo" id="todo">
<a href="javascript：void(0);" id="localSave">提交</a>
<a href="javascript：void(0);" id="localClear">清空</a>
</p>
<p>
<ul class="msg"></ul>
</p>
</p>
<script>
var todo = document.getElementById('todo')
var localSave = document.getElementById('localSave')
var localClear = document.getElementById('localClear')
localClear.onclick = function () {
localStorage.clear()
location.reload()
}
localSave.onclick = function () {
addTodo()
}
todo.onkeyup = function (e) {
if (window.event)//如果window.event对象存在，就以此事件对象为准
e = window.event;
var code = e.charCode || e.keyCode;
if (code == 13) {
addTodo()
}
}
function addTodo() {
var time = new Date().getTime()
var data = todo.value
localStorage.setItem(time, data)//将时间戳作为键值
loadStorage('msg')//设置loadStorage函数的传参（ID值）
todo.value = ''
location.reload()
}
// 渲染列表
function loadStorage() {
var addItem = document.getElementsByClassName('msg')[0]
addItem.innerHTML = ''
for (i = 0; i < localStorage.length; i++) {
var addList = document.createElement('li')
var keys = localStorage.key(i)
var values = localStorage.getItem(keys)
var now = new Date()
var year = now.getFullYear()
var month = now.getMonth() + 1
var day = now.getDate()
addList.innerHTML = '内容：' + values + '<hr>用户ID：' + keys + ' (时间：' + year + '/' + month + '/' + day + ')<input type="text" class="inputTxt"><label class="modify">修改</label> <span class="delete">删除</span>'
addItem.appendChild(addList)
todo.focus()
}
}
loadStorage()
// 删除功能
var span = document.getElementsByTagName('span')
for (i = 0; i < span.length; i++) {
span[i].onclick = (function (n) {
return function () {
var keys = localStorage.key(n)
localStorage.removeItem(keys)
location.reload()
}
})(i)
}
// 修改功能
var modify = document.getElementsByClassName('modify')
for (j = 0; j < modify.length; j++) {
modify[j].index = j
modify[j].onclick = function () {
var num = this.index
var inputTxt = document.getElementsByClassName('inputTxt')[num]
var key = localStorage.key(num)
var value = inputTxt.value
localStorage.setItem(key, value)
location.reload()
}
}
</script>
</body>
</html>
