【学习笔记】WebAPI

导读

什么是 API？

1. API（Application Programming Interface）是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2. WEB API 主要是针对浏览器提供的接口，主要针对于浏览器做交互效果
3. WEB API 一般都有输入和输出（函数的传参和返回值），WEB API 很多都是方法（函数）
4. 学习 WEB API 可以结合前面学习内置对象方法的思路学习

什么是 DOM?

文档对象模型（Document Object Model），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

DOM 树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM把以上所有内容都看做是对象

DOM操作

关于 DOM 操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作和事件操作

获取页面元素

DOM在我们实际开发中主要用来操作元素，那么我们如何来获取页面中的元素呢？
获取页面中的元素可以使用以下几种方式

根据ID获取

<div id="time">123456</div>

<script>
var timer = document.getElementById('time');
</script>

注意：

1. 因为我们文档从上往下加载，所以得先有标签，所以 <script> 要写到标签的下面
2. 参数 id 是一个大小写敏感的字符串，要加引号
3. 返回的是一个元素对象
4. console.dir(timer) 可以打印我们返回的元素对象，更好的查看里面的属性和方法

根据标签名获取

document.getElementsByTagName('li');

返回 document 中所有的 li 标签，以伪数组的形式存储，哪怕只有一个 li 也会返回一个伪数组，没有 li 则返回空伪数组

element.getElementsByTagName（'标签名'）；

父元素element必须是指定的单个元素，如 ul 里包括了 5 个小 li，要选出这五个小 li 不能直接用 ul 来当 element，可以用 ul[0]
或者给 ul 个 id：id.getElementsByTagName('li');

通过HTML5新增的方法获取

通过类名选取，返回一个伪数组：

document.getElementsByClassName('类名');

根据指定选择器选取，返回第一个元素对象，选择器如果是类要加点 .，id 要加井号 #

document.querySelector('选择器');

返回指定选择器的所有元素对象集合：

document.querySelectorAll('选择器');

特殊元素获取

获取body元素：

document.body

获取html元素：

document.documentElement

改变元素内容

1. 改变从起始位置到终止位置的内容，但它不认识html标签（如strong标签加粗），同时空格和换行也会去掉：

element.innerText

2. 改变起始位置到终止位置的全部内容，而且可以识别html标签，如加粗，倾斜等，同时保留空格和换行：

element.innerHtml

3. src、href
4. id、alt、title
5. 表单元素的属性：type、value、checked、selected、disabled

注意：修改普通元素内容用 innerHTML，修改表单里的内容用 value

密码显示隐藏案例

  <label for="">登陆密码:</label>
  <i><img src="images/close.png" id="eye"></i> 
  <input type="password" id="pwd">

  <script>
    var eye = document.querySelector('#eye');
    var pwd = document.querySelector('#pwd');
    var flag = 0;
    eye.onclick = function () {
      if (flag == 0) {
        pwd.type = 'text';
        this.src = 'images/open.png';
        flag = 1;
      } else {
        pwd.type = 'password';
        this.src = 'images/close.png';
        flag = 0;
      }
    }
  </script>

标签属性操作

获取属性

element.属性; // 获取内置属性

element.getAttribute('属性'); // 获得我们自定义的属性

更改属性

element.属性 = ""; // 设置内置属性值

element.setAttribute('属性', '值'); // 更改自定义属性

移除属性

element.removeAttribute('属性');

修改类名

语法：element.className

this.className = 'banner';

当需要修改的样式过多时，我们可以在 css 中添加一个类样式，然后通过 className 修改类名即可添加样式，注意 className 会覆盖原类名，所以在使用时要带上原类名使用

classList 类名操作

打印类名：

console.log(div.classList)

类名以伪数组的形式返回，有几个类名，数组里就有几个元素

其他类名操作：

• div.classList.add('bg') // 在类名末尾追加类名 bg
• div.classList.remove('bg') // 删除类名 bg
• div.classList.toggle('bg') // 如果 div 没有类名 bg 则添加，有的话就删除

修改元素样式

语法：element.style，属于行内样式的权重，注意驼峰命名

div.style.backgroundColor = 'blue';

自定义属性

自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不保存到数据库中

自定义属性必须通过 getAttribute 来获取
为了防止歧义，H5 规定自定义属性要以 data- 开头

H5新增获取自定义属性：

<div getTime="20" data-index="2" data-list-name="andy"></div>

<script>
div.dataset.getTime; // 错误，dataset 只能获取 data 开头的
div.dataset.index; // 正确
div.dataset['index']; // 正确
div.dataset.list-name; // 错误 有连接符的要特殊处理
div.dataset.listName; // 正确，采取驼峰命名，且去掉中间的横线 -
div.dataset['listName']; // 正确
</script>

由于兼容性原因，尽量使用 getAttribute 获取自定义属性

节点操作

为什么需要节点操作？
以前我们获取元素都是通过 element.querySelector 一个个获取，非常繁琐，学习了节点后我们可以通过某个元素的子父兄关系获取元素，非常方便

节点概述：

一般的节点至少拥有 nodeType、nodeName 和 nodeValue 这三个基本属性

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3（文本节点包含文字、空格、换行等）

我们在实际开发中主要操作的是元素节点

获取父节点

返回最近的一个父节点：

node.parentNode 

获取子节点

获取所有子节点，以伪数组形式返回:

node.children

获取第n个子节点：

node.children[n] 

node.children[node.children.length - 1]

为什么不能用 node.childNode 获取子节点呢？
因为 childNode 会把所有的文本节点也获取过来，例如获取 ul 里的 4 个小 li，那么它会返回 9 个元素，除了 4 个小 li，其他的都是空格或者换行，所以不能我们方便的获取小 li

获取兄弟节点

• div.nextSibling; // 获取下一个兄弟节点，但会包括文本节点
• div.previousSibli; // 获取上一个兄弟节点，包括文本节点
• div.nextElementSibling; // 获取下一个元素兄弟节点
• div.previousElementSibling; // 获取上一个元素兄弟节点

兼容性问题：
nextElementSibling 和 previousElementSibling 虽然方便获取，但只支持 ie9 以上浏览器，目前没有较好的解决方案。但我们也可以通过封装函数来实现兄弟元素的获取：

创建和添加元素节点

1. 创建节点：

// 用 li 来接收节点
var li = document.createElement('tagName');

注意，创建节点要写在注册事件后，这样才能每次都创建一个新结点，如果写在注册事件前，则永远只有那一个节点

2. 添加节点：

node.appendChild(child);：将一个节点添加到指定节点的末尾：

ul.appendChild(li);

node.insertBefore(child, 指定元素)：在指定节点前添加节点

如ul.insertBefore(li,ul.children[0]); // 在 ul 的第一个子节点前添加

3. 删除节点：

node.removeChild(child); // 删除的是 child，node 是 child 的父元素

4. 克隆节点

node.cloneNode();

括号里为空，则只复制标签；括号里填 true，则带内容一起复制

document.write

document.write 是直接将内容写入页面的内容流，但是如果文档流执行完毕，则它会导致页面全部重绘（只剩下该元素）

innerHTML和createElement()效率对比：

innerHTML 采用拼接字符串的形式执行效率最慢，但预先将元素添加到数组中，再通过数组转为字符串添加元素则为最快

createElement() 创建多个元素效率比 innerHTML 数组要慢一点点，但是结构更为清晰

事件

事件三要素

1. 事件源（事件被触发的对象）
2. 事件类型（如何触发）
3. 事件处理程序 （触发后要做什么事？）

执行事件的步骤

1. 获取事件源

var div = document.querySelector('div');

2. 注册事件（绑定事件）

div.onclick

3. 添加事件处理程序（采取函数赋值形式）

div.onclick = function() {}

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 顺序不能颠倒

鼠标事件

鼠标焦点事件

获取焦点：onfocus
失去焦点：onblur

鼠标经过和离开事件

经过：onmouseover
离开：onmouseout

mouseenter 事件

当鼠标移动到元素上时就会触发 mouseenter 事件
类似于 mouseover，但 mouseover 不但经过自身盒子会触发，经过它的子盒子也会触发；而 mouseenter 只有经过自身盒子的时候才会触发，之所以这样是因为 mouseenter 不会冒泡

mouseleave 也不会冒泡，所以和 mouseenter 更配哦

其它鼠标事件

document.addEventListener('contextmenu', function(e))
e.preventDefault();  //禁用右键菜单
document.addEventListener('selectstart', function(e))
e.preventDefault();  //禁用文字选中

鼠标双击事件：ondblclick

双击禁止选中文字：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

键盘事件

注意：

1. 键盘按下事件只要不松开，则会一直执行
2. 如果用 addEventListener 则不需要加 on
3. 三个事件的执行顺序是：keydown - keypress - keyup

keyCode

keyCode 可以返回该键的 ASCLL 码值

onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写

复选框选中事件

通过 this.checked 可以返回 true 或 false 代表是否选中

注册事件高级方法

addEventListener()

特点：同一个元素同一个事件可以注册多个监听器，按注册顺序执行

eventTarget.addEventListener('type', listener[,useCapture])

解析：eventTarget.addEventListener() 方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

该方法接受三个参数：

• type：事件类型字符串，比如 click、mouseover，注意不要加on
• listener：事件处理函数，事件发生时，会调用该函数监听函数
• useCapture：可选参数，是一个布尔值，默认是 false

eventTarget.addEventListener(‘type’, fn)

fn 是我们需要调用的函数的名字，在括号外面定义函数

eventTarget.attachEvent(eventNameWithOn, callback)

解析：eventTarget.attachEvent() 方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行

该方法接受两个参数：

• eventNameWithOn：事件类型字符串，比如 onclick，要加on
• callback：事件处理函数，当目标触发事件时回调函数被调用

事件解绑

1. 解绑传统方式注册的事件：

div.onclick=null;

2. 必须是注册监听事件的第二种写法才可以使用该方法

div.removeEventListener('click', fn);

3. 解除添加的attachEvent：

div.detachEvent('onclick', fn)

自动调用点击事件

使用 元素.click() 相当于浏览器帮我们触发了一次点击事件

setInterval(function () {
  div.click(); // 浏览器执行鼠标点击
}, 15)

过渡监听事件

transitionend 事件可以监听是否完成 CSS 过渡，语法：

div.addEventListener('transitionend', function () {
  //div 只要完成过渡一次，就打印一个 1
  console.log(1); 
})

DOM事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流

比如我们给 div 注册了点击事件，DOM 事件流分为 3 个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

注意：
① js 代码中只能执行捕获或者冒泡中的一个阶段
② onclick 和 attachEvent 只能得到冒泡阶段
③ addEventListener(type, listener[,useCapture]) 第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是 false），表示在事件冒泡阶段调用事件处理程序
④ 实际开发中很少用捕获，更关注于冒泡
⑤ 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
⑥ 事件冒泡有时会带来麻烦，有时又会很巧妙的做某些事件
⑦ 下面的代码如果给 div 和 document 都添加了点击弹框事件，如果是 true，则先弹 document，如果是 false，则先弹 div，再弹 document

div.addEventListener('click', fn, true)

事件对象

div.onclick = function(event) {}

div.onclick.addEventListener('click', function(event) {})

这个 event 就是事件对象，实际开发中一般写 e 或 evt

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单解释：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象，比如鼠标触发事件的话，会得到鼠标的位置，坐标等各项数据

这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去，当我们注册事件时，event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

事件对象常用方法：

阻止冒泡

阻止冒泡，给谁添加，就只冒到谁：

e.stopPropagation()

假如给 ul 注册了点击事件，则 this 会返回 ul，但 e.target 会返回 li，因为 e.target 是返回触发事件的对象，虽然我们点的是 ul，但根据冒泡原理，其实我们点击的是 li

事件委托

假如一个 ul 里有 5 个小 li，以前我们给 li 添加点击事件都是通过循环来添加，这样逻辑容易混乱并且 DOM 访问次数过多会影响页面加载速度。

现在我们可以利用冒泡的原理，直接给 ul 添加点击事件。点击 li，事件会冒泡到 ul 上，就会触发事件监听器，并且我们可以通过 e.target 来找到当前点击的 li

鼠标事件对象

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
window 对象是浏览器的顶级对象，它具有双重角色：

1. 它是JS访问浏览器窗口的一个接口
2. 它是一个全局对象，定义在全局作用域中的变量、函数都会变成 window对象的属性和方法。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert() 等
   window 有一个特殊属性 name，所以我们在创建变量时不能用 name 作变量名

window对象的常见事件

窗口加载事件

1. window.onload：是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS 文件等）

语法：

window.onload = function() {}; // 只能存在一个onload函数

window.addEventListener('load', function() {}); //add方法可以添加多个onload函数	

2. DOMContentLoaded：事件触发时，仅当 DOM 加载完成，不包括样式表，图片，flash等，ie9以上支持

语法：

document.addEventListener('DOMContentLoaded', fn)

如果页面的图片过多，从用户访问到 onload 触发可能需要较长的事件，所以用 DOMContentLoaded 比较合适

3. onpageshow：和 onload 一样都是页面加载完成后自动调用该函数，但 onload 在火狐浏览器中按后退键不属于重新加载，而 onpageshow 不论是后退，刷新都能执行

语法：

window.onpageshow = function() {} 

调整窗口大小事件

只要窗口大小发生像素变化，就会触发这个时间，通过 window.innerWidth 可以获取当前屏幕的宽度

语法：

window.onresize = function() {}

window.addEventListener('resize', function() {});

两种定时器

window 对象给我们提供了两个非常好用的方法 —— 定时器

• setTimeout()
• setInterval()

开启定时器：

setTimeout(fn, 3000); //3 秒后执行 fn 函数 

setInterval(fn, 3000); //每隔 3 秒执行一次 fn

停止定时器：

clearTimeout（timeoutID）

clearInterval（intervalID）

同步和异步

案例一

观察以下代码：

console.log(1);

setTimeout(function () {
  console.log(2);
}, 1000);

console.log(3);

以上三段代码的顺序是 1 - 2 - 3，但执行结果是 1 - 3 - 2，这是因为 2 的输出有 1 秒的延迟。按照 javascript 由上往下的执行顺序本应该等 2 输出完了再输出 3，但是 H5 允许 javascript 创建多个线程，因此便出现了同步和异步

• 同步：等前一个任务结束后再执行后一个任务
• 异步：在执行一个任务的同时还可以执行另一个任务

案例二

观察以下代码：

console.log(1);
setTimeout(function () {
  console.log(2);
}, 0);
console.log(3);

该代码的执行结果为 1 - 3 - 2

解析：
JS中的任务分为同步任务和异步任务

JS的异步是通过回调函数实现的，一般异步任务有三种类型：

1. 普通事件，如 onclick，resize 等
2. 资源加载，如 load，error 等
3. 定时器，包括 setInterval，setTimeout 等

同步任务都在主线程上执行，形成一个执行栈，异步任务添加到任务队列中等待执行。

根据案例分析，先执行 log(1)，再执行 setTimeout，发现 function 是回调函数，则放入任务队列中等待，继续执行 log(3)，执行完所有同步任务后，将任务队列中的任务放到执行栈的末尾继续执行

案例三

观察以下代码：

console.log(1);
document.onclick = function () {
  console.log('click');
}
console.log(2);
setTimeout(function () {
  console.log(3)
}, 3000)

先执行 log(1)，然后下一段代码是单击事件，则先略过，执行 log(2)，然后最后一段代码是回调函数，则在 3 秒后放入任务队列中等待，待同步任务执行完后再执行
第二段代码是单击事件，也属于异步任务，但在单击后才会放入任务队列。log(3) 的等待时间是 3 秒，如果在它之前单击，则会先于它放入任务队列，如果在 3 秒后单击，则在 log(3) 之后放入

其他 BOM 对象

location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL，因为这个属性返回的是一个对象，所以我们将这个属性也成为 location 对象

什么是URL？
统一资源定位符（Uniform Resource Locator，URL）是互联网上标准资源的地址，互联网上每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器该怎么处理它

URL格式：
protocol：//host[:port]/path/[?query]#fragment
如：http://www.itcast.cn/index.html?name=andy&age=18#link

location对象属性

location对象的方法

navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值，也可通过以下代码根据终端类型改变 URL 地址：

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  window.location.href = "../H5/index.html"; //手机
}

history 对象

结合 BOM 使用的常见属性

偏移量 offset

offset 就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等，返回的数值都不带单位

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）

offset 常用属性：

注意：如果已经添加了 box-sizing：boder-box 属性，则 offsetWidth/offsetHeight 不包括边框等长度

offset 和 style 的区别

元素可视区 client

client 就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等

scroll

使用 scroll 相关属性可以动态的得到该元素的大小，滚动距离等

如下图所示，红色边框为 div 盒子，里面的内容很多并且超出了盒子大小，实际的内容高度和宽度为 scrollHeight/scrollWidth
当为盒子添加了滚动条，则拖动滚动条时文字向上移动出去的长度为 scrollTop，向左移动出去的长度为 scrollLeft

注意：如果是元素被滚出的头部是 scrollTop，但如果是整个页面被滚出的头部则是 window.pageYOffset

跳转到页面某个位置

window.scroll(x, y) //x和y不加单位

循环动画的实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上一个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件

注意此元素需要添加定位，才能使用 element.style.left

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2. 核心算法：（目标值 - 现在的位置）/ 10作为每次移动的距离
3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器
4. 注意移动的距离需要取整,如果步长是正值，则往大了取整；如果步长是负值，则往小了取整

回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完后，再执行传进去的这个函数，这个过程就叫做回调

setTimeout() 这个调用函数我们也称为回调函数 callback

普通函数就是按照代码顺序直接调用，而这个函数需要等待时间，时间到了才去调用这个函数，因此称为回调函数

回调，就是回头调用的意思，上一件事干完，再回头调用该函数

如 onclick 是在鼠标单击完后再调用函数，也属于回调函数

节流阀

防止轮播图按钮连续点击导致图片切换过快可以使用节流阀

目的：当上一个函数动画执行完毕，再去执行下一个函数动画，让事件无法连续触发

思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

1. 开始时设置一个变量

var flag = true;

2. 利用回调函数解锁

// 关闭水龙头
if(flag) {flag = false; do something}
// 利用回调函数 动画执行完毕，打开水龙头
flag = true;

移动端 API

触屏事件概述

touch 对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔，触屏事件可响应用户手指对屏幕或者触控板操作

常见的触屏事件如下：

触屏事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏，触摸板）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

常见触屏事件的方法

• touches：获取正在触摸的所有手指
• targetTouches：获取正在触摸当前 DOM 元素的手指
• changeTouches：获取手指状态发生改变时的各种信息

targetTouches[0] 可以返回触摸 DOM 元素的第一个手指的信息

移动端拖动元素

touchstart、touchmove、touchend 可以实现拖动元素

但是拖动元素需要当前手指的坐标值，我们可以使用 targetTouches[0] 里面的 pageX 和 pageY 来获取坐标

移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置 + 手指移动的距离

手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三部曲

1. 触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置
2. 移动手指 touchmove：计算手指的滑动距离，并移动盒子
3. 离开手指 touchend

注意：手指移动也会触发滚动屏幕，所以这里要组织默认的屏幕滚动 e.preventDefault();

移动端click延迟

移动端鼠标点击事件一般会有 300ms 的延迟，因为在移动端中双击代表放大或缩小，当点击第一次的时候系统会等待你点击第二次，如果在 300ms 之内点击了，则会缩放屏幕，如果两次点击超过了 300ms，则视作点击事件

解决方法：

1. 禁用屏幕缩放
2. 封装 tap 函数（了解即可）

3. fastclick.js 插件直接消除 300ms 点击延迟
   网址：https://github.com/ftlabs/fastclick

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得原来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5 规范提出了相关解决方案

本地存储特性：

1. 数据存储在用户浏览器中
2. 设置、读取方便，甚至页面刷新都不会丢失数据
3. 容量较大，sessionStorage 约 5M，localStorage 约 20M
4. 只能存储字符串，可以将对象 JSON.stringify() 编码后存储
5. 字符串转换为对象格式可以用 JSON.parse() 方法

window.sessionStorage

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，在同一个窗口（页面）下数据可以共享

以键值对的形式存储使用，可通过浏览器调试区的 application - Storage 查看

常用方法：

• 存储数据：sessionStorage.setItem(key, value)
• 获取数据：sessionStorage.getItem(key)
• 删除数据：sessionStorage.removeItem(key)
• 删除所有数据：sessionStorage.clear()

window.localStorage

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除数据可以多窗口（页面）共享（同一浏览器可以共享）

也是以键值对的形式存储使用

常用方法：

• 存储数据：localStorage.setItem(key, value)
• 获取数据：localStorage.getItem(key)
• 删除数据：localStorage.removeItem(key)
• 删除所有数据：localStorage.clear()

记住用户名案例

1. 把数据存起来，用到本地存储
2. 关闭页面，也可以显示用户名，所以用到 localStorage
3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
4. 给复选框添加 change 事件（发生改变事件）
5. 如果勾选，就存储，否则就移除