[TOC]
# 为什么要做备忘清单
1. 最近经常忘事儿? 做个备忘清单吧, 这样你就可以忘得心安理得了...
2. 经验, 唯项目实战可得... 通过做项目, 把零碎的知识点整合起来
3. 项目就是门面, 是经验最好的证明
# 最终结果(1.0)
一开始, 什么都没有
输入以后, 按回车, 或者点击按钮, 就可以看到添加后的清单
新增的清单会放在最上面
这是 1.0 版本, 后续会增加`编辑`,`删除`,`完成`等功能
# 资源准备
1. jquery
2. 阿里云矢量图标
# 搭建项目(文件夹 todo)
两个文件夹加一个文件
1. `css`文件夹
1. `js`文件夹
1. `index.html`文件
# 搭建 html 结构(index.html)
```html
<!DOCTYPE html>
<html lang="zh">
<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>备忘清单</title>
</head>
<body></body>
</html>
```
注意:
1. `lang`属性要写成`zh`, 不然 chrome 会总是问你, 要不要翻译
2. 把`tittle` 改成`备忘清单`
因为我们是伟大的前端工程师, 恪守`结构, 样式, 行为 三者分离`的金科玉律,
所以我们需要单独的新建 css 文件和 js 文件
既然我们已经有了`index.html`了, 那么现在就可以愉快的引入 css 和自定义的 js 了
```html
<link rel="stylesheet" href="css/style.css" />
<script src="js/index.js"></script>
```
现在, 我们就可以修改 html 的结构了, 先看看最终效果图...
看来我们需要一个`h1`标题, 一个`input`框来输入内容, 一个`button`来添加备忘
还需要一些`复选框`, 和`div`套`div`的内容展示, 当然还有后续会用到的两个图标...
多说无益, 撸起来!!!
先来一个总的容器(div), class 为`container`
```html
<div class="container"></div>
```
然后`container`里有一个标题...
我们就叫他`myTitle`吧
```html
<body>
<div class="container"><h1 class="myTitle">我的备忘清单</h1></div>
</body>
```
标题下面是一个`input`框和一个蓝色的`button`...
我们用一个 class 为`add-task`的`div`把他们包起来
`emmet`快捷键
`.add-task>input[placeholder=写下你的备忘吧...][name=content]+button{添加备忘}`
```html
<div class="container">
<h1 class="myTitle">我的备忘清单</h1>
<div class="add-task">
<input type="text" placeholder="写下你的备忘吧..." name="content" />
<button>添加备忘</button>
</div>
</div>
```
等等... `placeholder`属性是个什么鬼?
> placeholder, HTML 5 <input> 属性,placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
看个例子
```html
<!DOCTYPE html>
<html lang="zh">
<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>
<style>
body {
text-align: center;
}
input {
margin-top: 50px;
width: 50%;
height: 25px;
border-radius: 10px;
outline: none;
}
</style>
</head>
<body>
<input type="text" placeholder="内容为空,自动显示, 输入内容则消失..." />
</body>
</html>
```
撤回来, 接着说...
下面是清单的列表
我们用 div 套 div
class`task-list`套 class`task-item`
```html
<div class="task-list"><div class="task-item"></div></div>
```
`task-item`下面是 4 个`span`
分别是, 一个`checkbox`, 一个文本, 两个图标
```html
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span"></span>
<span class="iconfont-span"></span>
</div>
```
说到这, 我们需要两个图标, 一个是编辑, 一个是删除
去阿里图标库, 欢乐的购物吧, `let's go shopping!!!` [阿里巴巴矢量图标库](https://www.iconfont.cn/)
阿里巴巴推荐使用图标的三种方式
1. font-class
第一步：引入项目下面生成的 fontclass 代码：
```js
<link rel="stylesheet" type="text/css" href="./iconfont.css">
```
第二步：挑选相应图标并获取类名，应用于页面：
```css
<i class="iconfont icon-xxx"></i>
```
2. symbol
第一步：引入项目下面生成的 symbol 代码：
```js
<script src="./iconfont.js" />
```
第二步：加入通用 css 代码（引入一次就行）：
```js
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
```
第三步：挑选相应图标并获取类名，应用于页面：
```js
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx" />
</svg>
```
3. unicode
第一步：拷贝项目下面生成的 font-face
```js
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
```
第二步：定义使用 iconfont 的样式
```js
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
```
第三步：挑选相应图标并获取字体编码，应用于页面
```js
<i class="iconfont">3</i>
```
我们选择第一种方案, 只需要简单的几步
1. 拷贝资源(`iconfont.css`)
2. 引入 css
`<link rel="stylesheet" href="css/iconfont.css">`
3. 写入 html 代码
```html
<div class="task-list">
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span">
<i class="iconfont icon-delete"></i>
</span>
<span class="iconfont-span">
<i class="iconfont icon-edit"></i>
</span>
</div>
</div>
```
现在完整版的 html 是这样的...
```html
<!DOCTYPE html>
<html lang="zh">
<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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<script src="js/index.js"></script>
<title>备忘清单</title>
</head>
<body>
<div class="container">
<h1 class="myTitle">我的备忘清单</h1>
<div class="add-task">
<input
type="text"
placeholder="写下你的备忘吧..."
name="content"
/>
<button>添加备忘</button>
</div>
<div class="task-list">
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span">
<i class="iconfont icon-del"></i>
</span>
<span class="iconfont-span">
<i class="iconfont icon-edit"></i>
</span>
</div>
</div>
</div>
</body>
</html>
```
效果这样...
嗯... 好丑...
丑就对了, 不然要 css 干什么?
最后, 注释是个好习惯
加完注释的样子...
```html
<!DOCTYPE html>
<html lang="zh">
<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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<script src="js/index.js"></script>
<title>备忘清单</title>
</head>
<body>
<!-- 总容器开始 -->
<div class="container">
<h1 class="myTitle">我的备忘清单</h1>
<!-- 输入框和按钮开始 -->
<div class="add-task">
<input
type="text"
placeholder="写下你的备忘吧..."
name="content"
/>
<button>添加备忘</button>
</div>
<!-- 输入框和按钮结束 -->
<!-- 清单列表开始 -->
<div class="task-list">
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span">
<i class="iconfont icon-del"></i>
</span>
<span class="iconfont-span">
<i class="iconfont icon-edit"></i>
</span>
</div>
</div>
<!-- 清单列表结束 -->
</div>
<!-- 总容器结束 -->
</body>
</html>
```
# css 布局
再看一眼最终效果...
首先, 干掉默认样式
```css
* {
margin: 0;
padding: 0;
}
```
给个背景
需要用到`picpick`的取色器
```css
body {
background: #00334b;
color: #fff;
}
```
看下效果...
我们把标题居中吧...
```css
h1 {
text-align: center;
}
```
让我们把总容器也居中吧, 不过先多加几个内容吧
```html
<div class="task-list">
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span"><i class="iconfont icon-del"></i></span>
<span class="iconfont-span"><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span"><i class="iconfont icon-del"></i></span>
<span class="iconfont-span"><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span"><i class="iconfont icon-del"></i></span>
<span class="iconfont-span"><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span"><i class="iconfont icon-del"></i></span>
<span class="iconfont-span"><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span"><i class="iconfont icon-del"></i></span>
<span class="iconfont-span"><i class="iconfont icon-edit"></i></span>
</div>
</div>
```
然后, 我们来设置居中
```css
.container {
max-width: 600px;
margin: 0 auto;
background: red;
}
```
`.task-item` 实在是太丑了, 需要美化一下了...
```css
.task-item {
background: #fff;
color: #333;
}
```
从全红, 变成了全白... 还得改
```css
.task-item {
background: #fff;
color: #333;
margin-bottom: 2px;
cursor: pointer;
}
```
增加每个 item 的缝隙, 并且增加小手
把红色背景干掉吧...
```css
.container {
max-width: 600px;
margin: 0 auto;
/* background: red; */
}
```
鼠标经过 item 的时候, 应该暗一点...
```css
.task-item:hover {
background: #ddd;
}
```
嗯... item 应该更高一点, 顺便加一个圆角吧...
```css
.task-item {
background: #fff;
color: #333;
margin-bottom: 2px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
}
```
这样就好看多了...
图标应该放到右边...
```css
.iconfont-span {
float: right;
}
```
再隔开一点就好了...
```css
.iconfont {
margin-right: 10px;
}
```
咦? 小铅笔和小垃圾篓的位置好像变了?
一般都是编辑在左, 删除再右, 确实符合使用习惯, 但是, 为什么顺序会变呢?
> html 代码是顺序执行的, 先看到了垃圾篓, 然后右浮动, 所有最右边被垃圾篓先占了...
把内容输入框和按钮也搞一下吧...
先把他们跟下面的宽度对齐...
那就需要设置这两个元素的宽度了
```css
input[type="text"] {
float: left;
width: 84%;
margin-right: 1%;
}
.add-task button {
width: 15%;
}
```
这样, 一个 85%, 一个 15%, 就可以排成一列, 并且和下面对齐了...
打扰了....
为什么呢?
注意边框
```css
input[type="text"],
.add-task button {
border: 0;
}
```
这回可以了...
给按钮一个蓝色背景吧, 还是需要取色...
```css
.add-task button {
background: #03aeff;
}
```
想让 input 和 button 一样高...
可以给父级定一个高度, 让后让他俩都是 height100%
```css
.add-task {
height: 37px;
}
input[type="text"],
.add-task button {
border: 0;
height: 100%;
}
```
看起来还不错, 不过需要加点间距...
我们可以给列表内容 div(`task-list`)加上 10px 的上下 margin...
当然也可以有其他增加间距的方式...
```css
.task-list {
margin: 10px 0;
}
```
看起来还不错, 不过标题似乎太近了, 也加上 margin 吧...
> 注意, 单纯的使用标签来给样式, 很容易`样式污染`, 所以尽量加上限制条件
```css
h1.myTitle {
text-align: center;
margin: 20px;
}
```
趋于完美...
input 框的文字太靠左了... 加点 padding...
```css
input[type="text"] {
float: left;
width: 84%;
margin-right: 1%;
padding: 10px;
}
```
这样应该就完美了...
好吧, 心好累...
应该是 484 才对啊, 因为 504 是刚刚好啊... 现在加上 padding, 瓦特了...
又想增加 padding, 又想不改变 width, 怎么办呢?
```css
input[type="text"] {
float: left;
width: 84%;
margin-right: 1%;
padding: 10px;
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box;
}
```
神奇的 box-sizing, 之前提过
完美!
下面就是追求更完美的细节问题了... 如果你和我一样, 也有强迫症, 可以继续往下看...
首先, input 和 button 的圆角问题
所有的 input 和 button, 都应该圆角...
既然之前, 已经写过了, 那么直接合并就好
```css
input,
button,
.task-item {
background: #fff;
color: #333;
margin-bottom: 2px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
}
```
其次, task-item 的文字过于靠左
没啥说的, 直接加 margin-left
```css
.task-content {
margin-left: 5px;
}
```
产品经理说话了
> "input 输入框, 我想一开始是暗的, 鼠标悬停或者输入文字时是亮的..."
好吧, 这是我最后一次改样式...
```css
input[type="text"] {
background: #ddd;
float: left;
width: 84%;
margin-right: 1%;
padding: 10px;
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box;
}
```
加上背景属性即可
悬停或者输入文本时高亮是吧...
那就是 hover 和 focus 的属性
```css
input[type="text"]:hover,
input[type="text"]:focus {
background: #eee;
}
```
是不是比刚才更亮了?
> "input 输入框可以实现, 那么蓝色按钮没有理由不实现啊..."
好吧, 是我拿不动刀了, 还是你产品狗飘了? 
```css
.add-task button:hover {
background: #57c6fb;
}
```
截屏的时候, 小手截不到, 但是对比上图, 确实更亮了
另外, 输入内容时, 好像有个蓝色的边框...
这是浏览器的默认样式, 干掉它!!!
```css
* {
margin: 0;
padding: 0;
outline: 0;
}
```
加上 outline 即可
烦人的蓝色边框不见了... ^\_^
图标悬停的时候, 可以变得更黑吗?
不然我怎么知道这个图标可点?
```css
.iconfont:hover {
filter: drop-shadow(0 0 0 black);
}
```
看起来, 是粗了一点...
```
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
```
例如：
```
filter:drop-shadow(5px 5px 10px black)
```
什么? 什么? task-item 上的背景颜色, 来回切换时过于生硬? 
动画, 安排上...
```css
* {
margin: 0;
padding: 0;
outline: 0;
-webkit-transition: background 200ms;
-moz-transition: background 200ms;
-ms-transition: background 200ms;
-o-transition: background 200ms;
transition: background 200ms;
}
```
搞定!
**什么是动画???**
```
transition: property duration timing-function delay;
```
| 值 | 描述 |
| -------------------------- | ----------------------------------- |
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
简单来说, `transition: background 200ms;` 就是 **转换背景颜色, 需要多长时间**
客户经理又说了...
> 最后一个需求了, 能加点阴影就更有`质感`了...
**产品经理, 你全家都有`质感`...**
那么砍死产品经理以后, 我们可以说说阴影的事儿了...
```
box-shadow: h-shadow v-shadow blur spread color inset;
```
> 注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
| 值 | 描述 |
| ---------- | ---------------------------------------- |
| _h-shadow_ | 必需。水平阴影的位置。允许负值。 |
| _v-shadow_ | 必需。垂直阴影的位置。允许负值。 |
| _blur_ | 可选。模糊距离。 |
| _spread_ | 可选。阴影的尺寸。 |
| _color_ | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
```css
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
```
> 内阴影, 水平 0, 垂直 1px, 模糊距离 2px; 阴影颜色 rgba(0, 0, 0, 0.1);
质感? 还好吧... 图个心安... 
完整的 css 代码
```css
* {
margin: 0;
padding: 0;
outline: 0;
-webkit-transition: background 200ms;
-moz-transition: background 200ms;
-ms-transition: background 200ms;
-o-transition: background 200ms;
transition: background 200ms;
}
body {
background: #00334b;
color: #fff;
}
h1.myTitle {
text-align: center;
margin: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
/* background: red; */
}
input,
button,
.task-item {
background: #fff;
color: #333;
margin-bottom: 2px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
}
.task-item:hover {
background: #ddd;
}
.iconfont-span {
float: right;
}
.iconfont {
margin-right: 10px;
}
.iconfont:hover {
filter: drop-shadow(0 0 0 black);
}
input[type="text"]:hover,
input[type="text"]:focus {
background: #eee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
background: #ddd;
float: left;
width: 84%;
margin-right: 1%;
padding: 10px;
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.add-task button {
width: 15%;
}
input[type="text"],
.add-task button {
border: 0;
height: 100%;
}
.add-task button {
background: #03aeff;
}
.add-task button:hover {
background: #57c6fb;
}
.add-task {
height: 37px;
}
.task-list {
margin: 10px 0;
}
.task-content {
margin-left: 10px;
}
```
# 书写 js
终于到了 jquery 时间...
我们今天先来 1.0 的版本功能
1. 输入内容在 input 框中回车, 或者点击蓝色按钮, 可以把内容插入备忘内容区
1. 最后插入的排在最上面
1. 如果文字内容过长, 展示时要有省略号
1. 页面刷新或者重启浏览器, 内容不丢失
第 0 步, **引入 jquery!** **引入 jquery!** **引入 jquery!** 重要的事情说三遍!
注意两者的顺序, 先引入 jquery, 再引入你自己的 index.js
第一步, 先搭一个 jquery 的大致框架
1. 声明变量
1. 声明函数
1. 使用变量和函数完成代码逻辑
```javascript
$(function() {
/* 声明变量 */
/* 声明函数 */
/* 逻辑代码 */
});
```
这什么都没写啊...
别着急, 正式开始
```javascript
$(function() {
/* 声明变量 */
var aTaskList = []; // task数组, 用来保存task
var nTaskIndex = 0; // task索引, 以后编辑task, 删除task, 都用得到
/* 声明函数 */
/* 逻辑代码 */
});
```
先完成第一个功能`输入内容在input框中回车, 或者点击蓝色按钮, 可以把内容插入备忘内容区`
咱们来分解一下
```javascript
/* 逻辑代码 */
// 获取输入框的内容-input-回车
// 输入框中, 按下回车, 获取内容
$("input[name=content]").on("keypress", function(ev) {
if (ev.keyCode === 13) {
console.log($(this).val());
}
});
```
`keyCode`是什么?
> `keyCode` 属性返回[onkeypress]()事件触发的键的值的字符代码(13 表示回车)
搞定第一个!
接着是点击提交按钮...
```javascript
// 点击submit按钮, 获取输入框内容
$(".add-task button").on("click", function() {
console.log($("input[name=content]").val());
});
```
两种获取内容的方式都搞定了...
然后获取内容并展示
新建一个函数`addTask`
```javascript
// 新增task
function addTask(str) {
// 获取内容
var taskHTML = "";
// 写入现有的html代码中
$(".task-list").prepend(taskHTML);
}
```
下载需要设置写入的内容, 就是文档中的这些内容
```html
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span class="iconfont-span"><i class="iconfont icon-del"></i></span>
<span class="iconfont-span"><i class="iconfont icon-edit"></i></span>
</div>
```
给变量`taskHTML`赋值
```javascript
function addTask(str) {
// 获取内容
var taskHTML = "";
// 变量赋值
taskHTML += '<div class="task-item">';
taskHTML += '<span><input type="checkbox"/></span>';
taskHTML += '<span class="task-content">' + str + "</span>";
taskHTML += '<span class="iconfont-span">';
taskHTML += '<i class="iconfont icon-del"> </i>';
taskHTML += "</span>";
taskHTML += '<span class="iconfont-span">';
taskHTML += '<i class="iconfont icon-edit"> </i>';
taskHTML += "</span>";
taskHTML += "</div>";
// 写入现有的html代码中
$(".task-list").prepend(taskHTML);
}
```
同时, 我们也需要把之前的`获取内容,` 改为`添加内容`
```javascript
// 获取输入框的内容-input-回车
// 输入框中, 按下回车, 获取内容
$("input[name=content]").on("keypress", function(ev) {
if (ev.keyCode === 13) {
addTask($(this).val());
}
});
// 点击submit按钮, 获取输入框内容
$(".add-task button").on("click", function() {
addTask($("input[name=content]").val());
});
```
先试一下...
可以写进去, 成功了!!!
让我们多插几次!
发现一个问题, 每次插入以后, 原来 input 框里的内容还在, 新输入的话, 还需要把里面的内容先删了...
要是能增加以后, 自动清空 input 框就好了...
没有问题!!! 
只需要稍微改几行代码就好了...
自动清空, 毫无压力...
然而, 还有一个更严重的问题在等着大家...
当我小手一抖, 轻点刷新之后...
之前插入的内容全没了...
浏览器忘得比我快啊...
数据持久化问题, 怎么解决呢?
方案一: 存数据库, 除非硬盘损毁, 和人为删库, 其他情况, 万无一失...
方案二: 存浏览器的 localStorage, 刷新, 重启, 只要浏览器不清缓存, 数据一直都在那里
我们使用方案二, 因为更快, 更简单
关于 localStorage, 你要知道...
1. 在 HTML5 中，新加入了一个 localStorage 特性，这个特性主要是用来作为本地存储来使用的，解决了 cookie 存储空间不足的问题(cookie 中每条 cookie 的存储空间为 4k)，localStorage 中一般浏览器支持的是 5M 大小，这个在不同的浏览器中 localStorage 会有所不同。
2. localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽
3. 目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们日常比较常见的 JSON 对象类型需要一些转换
4. localStorage 在浏览器的隐私模式下面是不可读取的
5. localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
6. localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空
7. 一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式, 这个时候我们可以使用 JSON.stringify()这个方法，来将 JSON 转换成为 JSON 字符串
8. 读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse()方法
了解一下语法吧...
```js
localStorage.setItem("myCat", "Tom"); // 设置
```
```js
let cat = localStorage.getItem("myCat"); // 获取
```
```js
localStorage.removeItem("myCat"); // 删一项
```
```js
localStorage.clear(); // 删所有
```
现在, 我们可以着手改代码了...
获取内容后, 除了要添加到 html 代码中, 同时需要压入数组, 把数组存起来, 方便刷新后使用
```javascript
$("input[name=content]").on("keypress", function(ev) {
if (ev.keyCode === 13) {
addTask($(this).val());
aTaskList.push($(this).val()); // 压入数组
localStorage.setItem("aTaskList", aTaskList); // 更新缓存
$(this).val("");
}
});
// 点击submit按钮, 获取输入框内容
$(".add-task button").on("click", function() {
addTask($("input[name=content]").val());
aTaskList.push($("input[name=content]").val()); // 压入数组
localStorage.setItem("aTaskList", aTaskList); // 更新缓存
$("input[name=content]").val("");
});
```
那么, 刷新时, 我们需要一个把数据从缓存中取出, 并且展示出来的函数
```javascript
// 展示数据到内容区
function showTaskHTML() {
var taskHTML = "";
var arr = localStorage.getItem("aTaskList");
for (var i = 0; i < arr.length; i++) {
taskHTML += '<div class="task-item">';
taskHTML += '<span><input type="checkbox"/></span>';
taskHTML += '<span class="task-content">' + arr[i] + "</span>";
taskHTML += '<span class="iconfont-span">';
taskHTML += '<i class="iconfont icon-del"> </i>';
taskHTML += "</span>";
taskHTML += '<span class="iconfont-span">';
taskHTML += '<i class="iconfont icon-edit"> </i>';
taskHTML += "</span>";
taskHTML += "</div>";
}
$(".task-list").html(taskHTML);
}
```
逻辑也比较简单, 从缓存中读取数据, 然后动态拼接 html, 修改 html 文件内容
我已经迫不及待的想试一下了...
当然, 别忘了调用...
结果当然是悲剧了... 
为什么会这样?
打印出来从缓存中获得的结果是`dddd`, 然后循环就悲剧了, `dddd`不是我最后一次的内容吗?
骚年, 你忘了这么一句:
> 1. 一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式, 这个时候我们可以使用 JSON.stringify()这个方法，来将 JSON 转换成为 JSON 字符串
> 1. 读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse()方法
localStorage 会把缓存起来的内容, 转成字符串, 所以我们要自己转 json 字符串, 完事儿自己转回来...
为了方便大家理解, 看个更刺激的
数组转字符串就是这个下场!!!
还有什么可说的, 改代码吧...
一共改了三个地方...
结果`清空缓存`之后一刷新, 更热闹了...
想来也简单, 清空以后, 就没有数据了, 如何遍历呢, 看来还得在初始化变量时做文章...
```javascript
/* 声明变量 */
// var aTaskList = []; // task数组, 用来保存task
if (localStorage.getItem("aTaskList")) {
var aTaskList = JSON.parse(localStorage.getItem("aTaskList"));
showTaskHTML();
} else {
var aTaskList = [];
}
```
数据展示也得改...
```javascript
function showTaskHTML() {
var taskHTML = "";
for (var i = 0; i < aTaskList.length; i++) {
taskHTML += '<div class="task-item">';
taskHTML += '<span><input type="checkbox"/></span>';
taskHTML += '<span class="task-content">' + aTaskList[i] + "</span>";
taskHTML += '<span class="iconfont-span">';
taskHTML += '<i class="iconfont icon-del"> </i>';
taskHTML += "</span>";
taskHTML += '<span class="iconfont-span">';
taskHTML += '<i class="iconfont icon-edit"> </i>';
taskHTML += "</span>";
taskHTML += "</div>";
}
$(".task-list").html(taskHTML);
}
```
刷新, 重启都 ok, 除了...
刷新之前, 4444 在最上面, 而刷新后 4444 就跑到了下面...
为什么?
因为数组有顺序啊, 小傻瓜!!!
你把`push`改成`unshift`再试试?
果然好了!!! 
不过当我看到这些的时候, 我的强迫症又犯了...
这两段代码, 真 TMD 的像!!!
不能忍! 
其实, 添加, 不就是, `把新写的代码, 加入缓存, 然后刷新`吗?
那就好办了...
直接把`addTask`干掉, 然后修改 input 回车和 button 点击的逻辑就可以了.
```javascript
$("input[name=content]").on("keypress", function(ev) {
if (ev.keyCode === 13) {
aTaskList.unshift($(this).val()); // 压入数组
localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新缓存
$(this).val("");
showTaskHTML();
}
});
// 点击submit按钮, 获取输入框内容
$(".add-task button").on("click", function() {
aTaskList.unshift($("input[name=content]").val()); // 压入数组
localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新缓存
$("input[name=content]").val("");
showTaskHTML();
});
```
什么? 什么? checkbox 和文字挨得太近? 把原来的 margin-left, 从 5px 改成 10px 就好了...
```css
.task-content {
margin-left: 10px;
}
```
到了这里, 1.0 的版本, 可以告一段落了...
怎么可能? 你忘了这个!!!
不过这真的是最后一个了...
文字过长容易出问题...
设置, 超过字数就显示省略号
```javascript
// 文字过多就显示省略号
function compressContent(str) {
if (str.length >= 30) {
return str.slice(0, 29) + "···";
}
}
```
```javascript
// 获取输入框的内容-input-回车
// 输入框中, 按下回车, 获取内容
$("input[name=content]").on("keypress", function(ev) {
if (ev.keyCode === 13) {
var taskContent = compressContent($(this).val());
aTaskList.unshift(taskContent); // 压入数组
localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新缓存
$(this).val("");
showTaskHTML();
}
});
// 点击submit按钮, 获取输入框内容
$(".add-task button").on("click", function() {
var taskContent = compressContent($("input[name=content]").val());
aTaskList.unshift(taskContent); // 压入数组
localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新缓存
$("input[name=content]").val("");
showTaskHTML();
});
```
完美!!! 
最后贴出 js 的完整代码
```javascript
$(function() {
/* 声明变量 */
if (localStorage.getItem("task_list")) {
aTaskList = JSON.parse(localStorage.getItem("task_list"));
} else {
aTaskList = [];
}
showTask();
/* 声明函数 */
function showTask() {
var taskHTML = "";
for (var i = 0; i < aTaskList.length; i++) {
taskHTML += '<div class="task-item">';
taskHTML += '<span><input type="checkbox"></span>' + "\n";
taskHTML +=
'<span class="task-content">' + aTaskList[i] + "</span>";
taskHTML += '<span><i class="iconfont icon-del"></i></span>';
taskHTML += '<span><i class="iconfont icon-edit"></i></span>';
taskHTML += "</div>";
}
$(".task-list").html(taskHTML);
}
/* 逻辑代码 */
$("[name=content]").on("keypress", function(ev) {
if (ev.keyCode === 13 && compressContent($(this).val())) {
aTaskList.unshift(compressContent($(this).val()));
localStorage.setItem("task_list", JSON.stringify(aTaskList));
$(this).val("");
showTask();
}
});
$(".add-task button").on("click", function() {
if (compressContent($("[name=content]").val())) {
aTaskList.unshift(compressContent($("[name=content]").val()));
localStorage.setItem("task_list", JSON.stringify(aTaskList));
$("[name=content]").val("");
showTask();
}
});
// 文字过多, 就显示省略号
function compressContent(str) {
if (str.length >= 30) {
return str.slice(0, 30) + "···";
} else {
return str;
}
}
});
```
完整 css
```css
* {
margin: 0;
padding: 0;
outline: none;
-webkit-transition: background 200ms;
-moz-transition: background 200ms;
-ms-transition: background 200ms;
-o-transition: background 200ms;
transition: background 200ms;
}
body {
background: #00334b;
color: #fff;
}
h1.myTitle {
text-align: center;
margin: 20px;
}
.container {
margin: 0 auto;
/* background: red; */
max-width: 600px;
}
.task-item {
background: #fff;
color: #333;
margin-bottom: 3px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
}
.task-item:hover {
background: #ddd;
}
.iconfont {
float: right;
margin-right: 10px;
}
input[type="text"] {
background: #ddd;
float: left;
width: 84%;
margin-right: 1%;
padding: 10px;
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
input[type="text"]:focus,
input[type="text"]:hover {
background: #eee;
}
.add-task button {
width: 15%;
background: rgb(3, 174, 255);
}
.add-task button:hover {
background: rgb(77, 195, 251);
}
input[type="text"],
.add-task button {
border: 0;
height: 100%;
}
.add-task {
height: 37px;
}
.task-list {
margin: 10px 0;
}
input,
button {
border-radius: 3px;
}
.task-content {
margin-left: 5px;
}
.iconfont:hover {
filter: drop-shadow(0 0 0 black);
}
```
完整 html
```html
<!DOCTYPE html>
<html lang="zh">
<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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<title>备忘清单</title>
</head>
<body>
<!-- 总容器开始 -->
<div class="container">
<h1 class="myTitle">我的备忘清单</h1>
<!-- 输入框和按钮开始 -->
<div class="add-task">
<input
type="text"
placeholder="写下你的备忘吧..."
name="content"
/>
<button>添加备忘</button>
</div>
<!-- 输入框和按钮结束 -->
<!-- 清单列表开始 -->
<div class="task-list">
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span><i class="iconfont icon-del"></i></span>
<span><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span><i class="iconfont icon-del"></i></span>
<span><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span><i class="iconfont icon-del"></i></span>
<span><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span><i class="iconfont icon-del"></i></span>
<span><i class="iconfont icon-edit"></i></span>
</div>
<div class="task-item">
<span><input type="checkbox" /></span>
<span class="task-content">item content 1</span>
<span><i class="iconfont icon-del"></i></span>
<span><i class="iconfont icon-edit"></i></span>
</div>
</div>
<!-- 清单列表结束 -->
</div>
<!-- 总容器结束 -->
</body>
</html>
```
- 每日单词
- JavaScript 入门
- JavaScript 基础
- JavaScript 基础回顾
- JavaScript 函数
- 匿名函数,多维数组,数据类型转换
- JavaScript 类型转换, 变量作用域
- js 运算符(一)
- js 运算符(二)
- js 流程控制语句
- JavaScript 扫盲日
- JavaScript 牛刀小试(一)
- JavaScript 牛刀小试(二)
- JavaScript 再谈函数
- JavaScript-BOM
- JavaScript-定时器(一)
- JavaScript-定时器(二)
- 番外-轮播图源码
- JavaScript 轮播图和 DOM 简介
- JavaScript-DOM 基础-NODE 接口-属性
- JavaScript-DOM 基础-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 节点
- CSS 复习与扩展(一)
- CSS 复习与扩展(二)
- 走进 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高级
- jquery 备忘清单-1
- jquery 备忘清单-2
- 聊聊 json
- jquery 备忘清单-3