导读
什么是 API?
- API(Application Programming Interface)是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- WEB API 主要是针对浏览器提供的接口,主要针对于浏览器做交互效果
- WEB API 一般都有输入和输出(函数的传参和返回值),WEB API 很多都是方法(函数)
- 学习 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>
注意:
- 因为我们文档从上往下加载,所以得先有标签,所以
<script>
要写到标签的下面 - 参数 id 是一个大小写敏感的字符串,要加引号
- 返回的是一个元素对象
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
改变元素内容
- 改变从起始位置到终止位置的内容,但它不认识html标签(如strong标签加粗),同时空格和换行也会去掉:
element.innerText
- 改变起始位置到终止位置的全部内容,而且可以识别html标签,如加粗,倾斜等,同时保留空格和换行:
element.innerHtml
src
、href
id
、alt
、title
- 表单元素的属性:
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')
// 在类名末尾追加类名 bgdiv.classList.remove('bg')
// 删除类名 bgdiv.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 以上浏览器,目前没有较好的解决方案。但我们也可以通过封装函数来实现兄弟元素的获取:
创建和添加元素节点
- 创建节点:
// 用 li 来接收节点
var li = document.createElement('tagName');
注意,创建节点要写在注册事件后,这样才能每次都创建一个新结点,如果写在注册事件前,则永远只有那一个节点
- 添加节点:
node.appendChild(child);
:将一个节点添加到指定节点的末尾:
ul.appendChild(li);
node.insertBefore(child, 指定元素)
:在指定节点前添加节点
如ul.insertBefore(li,ul.children[0]); // 在 ul 的第一个子节点前添加
- 删除节点:
node.removeChild(child); // 删除的是 child,node 是 child 的父元素
- 克隆节点
node.cloneNode();
括号里为空,则只复制标签;括号里填 true,则带内容一起复制
document.write
document.write
是直接将内容写入页面的内容流,但是如果文档流执行完毕,则它会导致页面全部重绘(只剩下该元素)
innerHTML和createElement()效率对比:
innerHTML
采用拼接字符串的形式执行效率最慢,但预先将元素添加到数组中,再通过数组转为字符串添加元素则为最快
createElement()
创建多个元素效率比 innerHTML
数组要慢一点点,但是结构更为清晰
事件
事件三要素
- 事件源(事件被触发的对象)
- 事件类型(如何触发)
- 事件处理程序 (触发后要做什么事?)
执行事件的步骤
- 获取事件源
var div = document.querySelector('div');
- 注册事件(绑定事件)
div.onclick
- 添加事件处理程序(采取函数赋值形式)
div.onclick = function() {}
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:
- 所有元素全部清除样式
- 给当前元素设置样式
- 顺序不能颠倒
鼠标事件
鼠标焦点事件
获取焦点: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();
键盘事件
注意:
- 键盘按下事件只要不松开,则会一直执行
- 如果用
addEventListener
则不需要加 on - 三个事件的执行顺序是: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:事件处理函数,当目标触发事件时回调函数被调用
事件解绑
- 解绑传统方式注册的事件:
div.onclick=null;
- 必须是注册监听事件的第二种写法才可以使用该方法
div.removeEventListener('click', fn);
- 解除添加的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 个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
注意:
① 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 对象是浏览器的顶级对象,它具有双重角色:
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象,定义在全局作用域中的变量、函数都会变成 window对象的属性和方法。在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如
alert()
等
window 有一个特殊属性 name,所以我们在创建变量时不能用 name 作变量名
window对象的常见事件
窗口加载事件
- window.onload:是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等)
语法:
window.onload = function() {}; // 只能存在一个onload函数
window.addEventListener('load', function() {}); //add方法可以添加多个onload函数
- DOMContentLoaded:事件触发时,仅当 DOM 加载完成,不包括样式表,图片,flash等,ie9以上支持
语法:
document.addEventListener('DOMContentLoaded', fn)
如果页面的图片过多,从用户访问到 onload 触发可能需要较长的事件,所以用 DOMContentLoaded 比较合适
- 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的异步是通过回调函数实现的,一般异步任务有三种类型:
- 普通事件,如 onclick,resize 等
- 资源加载,如 load,error 等
- 定时器,包括 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()
不断移动盒子位置
实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上一个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
注意此元素需要添加定位,才能使用 element.style.left
缓动效果原理
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:
- 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来
- 核心算法:(目标值 - 现在的位置)/ 10作为每次移动的距离
- 停止的条件是:让当前盒子位置等于目标位置就停止定时器
- 注意移动的距离需要取整,如果步长是正值,则往大了取整;如果步长是负值,则往小了取整
回调函数
回调函数原理:函数可以作为一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行完后,再执行传进去的这个函数,这个过程就叫做回调
setTimeout()
这个调用函数我们也称为回调函数 callback
普通函数就是按照代码顺序直接调用,而这个函数需要等待时间,时间到了才去调用这个函数,因此称为回调函数
回调,就是回头调用的意思,上一件事干完,再回头调用该函数
如 onclick 是在鼠标单击完后再调用函数,也属于回调函数
节流阀
防止轮播图按钮连续点击导致图片切换过快可以使用节流阀
目的:当上一个函数动画执行完毕,再去执行下一个函数动画,让事件无法连续触发
思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数
- 开始时设置一个变量
var flag = true;
- 利用回调函数解锁
// 关闭水龙头
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
来获取坐标
移动端拖动的原理:手指移动中,计算出手指移动的距离,然后用盒子原来的位置 + 手指移动的距离
手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置
拖动元素三部曲
- 触摸元素 touchstart:获取手指初始坐标,同时获得盒子原来的位置
- 移动手指 touchmove:计算手指的滑动距离,并移动盒子
- 离开手指 touchend
注意:手指移动也会触发滚动屏幕,所以这里要组织默认的屏幕滚动 e.preventDefault();
移动端click延迟
移动端鼠标点击事件一般会有 300ms 的延迟,因为在移动端中双击代表放大或缩小,当点击第一次的时候系统会等待你点击第二次,如果在 300ms 之内点击了,则会缩放屏幕,如果两次点击超过了 300ms,则视作点击事件
解决方法:
- 禁用屏幕缩放
- 封装 tap 函数(了解即可)
- fastclick.js 插件直接消除 300ms 点击延迟
网址:https://github.com/ftlabs/fastclick
本地存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得原来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5 规范提出了相关解决方案
本地存储特性:
- 数据存储在用户浏览器中
- 设置、读取方便,甚至页面刷新都不会丢失数据
- 容量较大,sessionStorage 约 5M,localStorage 约 20M
- 只能存储字符串,可以将对象 JSON.stringify() 编码后存储
- 字符串转换为对象格式可以用 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()
记住用户名案例
- 把数据存起来,用到本地存储
- 关闭页面,也可以显示用户名,所以用到 localStorage
- 打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框
- 给复选框添加 change 事件(发生改变事件)
- 如果勾选,就存储,否则就移除