LocalStroage上手：实现一个刷新后仍然存在的ToDoList
Posted linbudu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了LocalStroage上手：实现一个刷新后仍然存在的ToDoList相关的知识，希望对你有一定的参考价值。
LocalStroage、SessionStroage、Cookie之间的区别、功能、优劣势就不提了，网上的博客一个比一个详细，这个demo的实现也很简单，在这里就直接上这个demo的源码
（不得不说这个作者的代码写的真的有种美感，这个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>Document</title>
</head>
<style>
html
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.wrapper
padding: 20px;
max-width: 350px;
background: rgba(228, 215, 215, 0.95);
box-shadow: 0 0 0 5px rgba(187, 157, 157, 0.5);
h2
text-align: center;
margin: 0;
font-weight: 200;
.plates
margin: 0;
padding: 0;
text-align: left;
list-style: none;
.plates li
border-bottom: 1px solid rgba(0,0,0,0.2);
padding: 10px 0;
font-weight: 100;
display: flex;
.plates label
flex:1;
cursor: pointer;
.plates input
display: none;
.plates input + label:before
content: ‘??‘;
margin-right: 10px;
.plates input:checked + label:before
content: ‘☆‘;
.add-items
margin-top: 20px;
.add-items input
padding:10px;
outline:0;
border:1px solid rgba(0,0,0,0.1);
.add-items input:nth-child(1)
width: 61.3%;
.add-items input:nth-child(2)
width: 30%;
color: rgb(85, 108, 128);
font-weight: 700;
.buttons button
width: 100px;
margin-top: 10px;
height: 40px;
color: rgb(85, 108, 128);
font-weight: 700;
border:1px solid rgba(0,0,0,0.1);
</style>
<body>
<div class="wrapper">
<h2>ToooooDo</h2>
<p></p>
<ul class="plates">
<li>待添加事项</li>
</ul>
<form class="add-items">
<input type="text" name="item" placeholder="Item Name" required>
<input type="submit" value="添 加">
</form>
<div class="buttons">
<button data-action="clear">删除所有</button>
<button data-action="check">全部选中</button>
<button data-action="uncheck">取消全选</button>
</div>
</div>
</body>
<script>
// var str = ‘"name":"harold"‘;
// var obj =
// name:‘harold‘
//
// console.log(JSON.parse(str),JSON.stringify(obj));
(function()
function newFun()
var addItems = document.querySelector(‘.add-items‘),
itemsList = document.querySelector(‘.plates‘),
buttons = document.querySelector(‘.buttons‘),
items = JSON.parse(localStorage.getItem(‘items‘)) || [];
//添加item的处理函数
function handleAdd(e)
console.log(e);//type=submit
e.preventDefault();
console.log(this);//猜想应该是整个表单控件
var name = this.querySelector(‘[name=item]‘).value;
var item =
name:name,
done:false
;
items.push(item);
localStorage.setItem(‘items‘,JSON.stringify(items));
updateList(items,itemsList);
this.reset();
function updateList(plates = [],plateList)
console.log(arguments);
plateList.innerHTML = plates.map(function(plate,i)
return ‘ <li><input type="checkbox" data-index=" ‘ + i + ‘" id="plate‘ + i + ‘" ‘ + (plate.done ? ‘checked‘ : ‘‘)
+ ‘ /><label for="plate‘ + i + ‘">‘ + plate.name + ‘</label></li>‘;
).join(‘‘);
//委托input（typecheckbox）列表的父元素进行监听
function toggleChecked(e)
if(!e.target.matches(‘input‘)) return;//如果没有子元素则中止执行
var item = e.target.dataset.index;
items[item].done = !items[item].done;//更改状态
localStorage.setItem(‘items‘,JSON.stringify(items));
updateList(items,itemsList);
//添加button事件
function doButtonPress(e)
var action = e.target.dataset.action;
switch(action)
case"clear":
items = [];
break;
case"check":
items.map(function(item)
return item.done = true;
);
break;
case"uncheck":
items.map(function(item)
return item.done = false;
);
break;
default:
return;
localStorage.setItem(‘items‘,JSON.stringify(items));
updateList(items,itemsList)
addItems.addEventListener(‘submit‘,handleAdd);
itemsList.addEventListener(‘click‘,toggleChecked);
buttons.addEventListener(‘click‘,doButtonPress);
updateList(items,itemsList);
document.addEventListener(‘DOMContentLoaded‘,newFun);
());
</script>
</html>
以上是关于LocalStroage上手：实现一个刷新后仍然存在的ToDoList的主要内容，如果未能解决你的问题，请参考以下文章
Web Storage API ： LocalStroage
ROG游戏手机5S Pro上手实测，骁龙888 Plus跑分95万刷新鲁大师记录！
利用cookie，实现刷新页面跳转，左侧菜单点击后状态保持不变。