关于JQ和本地存储的一个经典案例（todo list）

1.首先我们搭建html页面

<section class="todoapp">
		<header class="header">
			<h1>todos</h1>
			<input class="new-todo" placeholder="请输入你的计划" autofocus>
		</header>
		<!-- This section should be hidden by default and shown when there are todos -->
		<section class="main">
			<input id="toggle-all" class="toggle-all" type="checkbox">
			<label for="toggle-all">Mark all as complete</label>
			<ul class="todo-list"></ul>
		</section>
		<!-- This footer should be hidden by default and shown when there are todos -->
		<footer class="footer">
			<!-- This should be `0 items left` by default -->
			<span class="todo-count"><strong>0</strong> item left</span>
			<!-- Remove this if you don't implement routing -->
			<ul class="filters">
				<li>
					<a class="selected" href="#/">All</a>
				</li>
				<li>
					<a href="#/active">Active</a>
				</li>
				<li>
					<a href="#/completed">Completed</a>
				</li>
			</ul>
			<!-- Hidden if no completed items are left ↓ -->
			<button class="clear-completed">Clear completed</button>
		</footer>
	</section>

搭建好的页面长这个样子

 然后链接好外部文件，配置我们的js代码

我们要实现四个功能，1.添加 2.全选 3.删除 4.编辑

我们第一步先进行数据初始化

定义一个空数组data并进行判断里面是否有数据如果有则将字符串数据转化成数字型从本地存储中拿到我们定义的数组里，然后对data数组进行遍历将我们要加进html页面的代码进行动态绑定最后append到ul中

var data = [];
			//存储格式转换
			if (localStorage.getItem('data')) {
				data = JSON.parse(localStorage.getItem('data'));
			}
			// console.log(data);
			// 初始化数据
			$.each(data, function (index, item) {
				// console.log(item);
				var completed = item.status ? 'completed' : '';
				var checked = item.status ? 'checked' : '';
				var html = `<li class="${completed}">
								<div class="view">
									<input class="toggle" type="checkbox" ${checked}>
									<label>${item.msg}</label>
									<button class="destroy"></button>
								</div>
								<input class="edit" value="${item.msg}">
							</li>`;
				$('ul.todo-list').append(html);
			});

再给我们全选按钮绑定click事件，首先还是拿到我们的数据，之后对事件进行判定如果全选按钮被选中则下面的单个按钮则全被选中，反之亦然，最后将数组data转化为字符串存进本地存储中

$('#toggle-all').click(function () {
				var data = [];
				if (localStorage.getItem('data')) {
					data = JSON.parse(localStorage.getItem('data'));
				}
				$('.toggle').prop('checked', $(this).prop('checked'));
				if ($(this).prop('checked')) {
					$('.todo-list li').addClass('completed');
					$.each(data, function (index, item) {
						item.status = true;
					});
					localStorage.setItem('data', JSON.stringify(data));
				} else {
					$('.todo-list li').removeClass('completed');
					$.each(data, function (index, item) {
						item.status = false;
					});
					localStorage.setItem('data', JSON.stringify(data));
				}
			});

 单选则是被选中按钮长度等于按钮总数，则全选按钮呗选中反之不被选中

$('.todo-list').on('click', '.toggle', function () {
				var l = $('.toggle').length;
				var lChk = $('.toggle:checked').length;
				if (l != lChk) {
					$('#toggle-all').prop('checked', false)
				} else {
					$('#toggle-all').prop('checked', true)
				}
				data = JSON.parse(localStorage.getItem('data'));
				var v = $(this).parents('li').find('label').html();
				var index = data.findIndex(function (item) {
					// console.log(item);
					return item.msg == v;
				});
				console.log(index);
				if ($(this).prop('checked')) {
					$(this).parents('li').addClass('completed');
					data[index].status = true;
				} else {
					$(this).parents('li').removeClass('completed');
					data[index].status = false;
				}

				localStorage.setItem('data', JSON.stringify(data));
			});

 注意当按钮被选中时同时给对应的li添加样式

删除是最简单的一项，首先给删除按钮添加点击事件，然后删除他的父级元素最后再将结果传到本地存储中

$('.todo-list').on('click', '.destroy', function () {
				if (confirm('确认删除?')) {
					var d = $(this).parents('li').detach();
					console.log(d.find('label'));
					var v = d.find('label').html();
					data = JSON.parse(localStorage.getItem('data'));
					var index = data.findIndex(function (item) {
						return item.msg == v;
					});
					data.splice(index, 1)
					localStorage.setItem('data', JSON.stringify(data));
				}
			});

 我们添加讲究的是键盘弹起事件，当我们的用户敲击回车时我们将我们写的动态添加的li存储进本体存储中，同时将输入框里的内容清空。

$(document).on('keyup', '.new-todo', function (e) {
				if (e.keyCode == 13) {
					// console.log(this);
					var v = $(this).val();
					var item = {
						msg: v,
						status: false
					}
					data.push(item);
					localStorage.setItem('data', JSON.stringify(data));
					var completed = item.status ? 'completed' : '';
					var checked = item.status ? 'checked' : '';
					var html = `<li class="${completed}">
								<div class="view">
									<input class="toggle" type="checkbox" ${checked}>
									<label>${item.msg}</label>
									<button class="destroy"></button>
								</div>
								<input class="edit" value="${item.msg}">
							</li>`;
					$('ul.todo-list').append(html);
					$(this).val('');
				}
			});

编辑绑定双击事件当用户双击时显示输入框并显示输入框之前的默认值，敲击回车时将输入框里的value存到相应的li中然后将值传到我们的本地存储

 这样一个经典案例就完成了