const声明
声明常量
数组也可以用const声明，即使是给数组中的内容操作，但是因为他是复杂数据类型，他的值是地址，地址不改变即可
DOM基础
DOM对象
文档对象模型
//我们操作元素时，就是把这个元素看成对象，然后使用对象的属性进行操作
DOM树：
包含关系，体现标签与标签之间的关系
DOM对象：
根据HTML标签生成的对象
DOM结构
树形结构
获取元素（获取元素节点）：
//只有获取了该元素的元素节点才可以对其进行操作
| 方法 | 说明 |
| document.getElementByld("id") | 通过id来选择元素节点（不需要在id前加#） |
| document.getElementsByTagName("标签名") | 通过标签名来选择元素节点 |
| document.getElementsByClassName("类名") | 通过类名来选择元素节点 |
| document.querySelector("CSS选择器")和document.querySelectorAll("CSS选择器") | 通过CSS选择器查询获取元素节点，前者选择的是第一个 |
| document.getElementsByName() | 通过name属性获取 |
| document.title和document.body | 获取title或body |
操作元素的样式：
通过普通方式操作CSS样式：
实例如下：
当需要用到所属关系时，与CSS类似
<ul id="list">
<li>
<li>
·
·
·
</ul>
如果需要选择id为list里第n个li，在JavaScript可以如下操作：
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");//此时得到的oLi为一个元素为m个li的"类数组"（伪数组，只能使用数组属性中的下标和length）
oLi[n-1].style.color = ＂red＂;//此时，对ul中的第n个li进行操作
如果需要选中select里面的option的文本内容：
- var obj = document.getElementByIdx_x(”testSelect”); //定位id
- var index = obj.selectedIndex; // 选中索引
- var text = obj.options[index].text; // 选中文本
- var value = obj.options[index].value; // 选中值
通过操作类名来操作CSS（可以先写CSS）
- 先获取元素节点
- 通过className给节点命名 元素.className = "自定义类名" 会把原来的类名覆盖
classList操作控制CSS
- 元素.classList.add("类名") 追加一个类
- 元素.classList.remove("类名") 删除一个类
- 元素.classList.toggle("类名") 切换一个类（判断原类名是否有，有即删除，没有即追加）
- 元素.classList.contains() 判断是否包含类 ，有该类返回true，没有该类返回false
自定义属性：
（data-id = "属性值"）
通过dataset提取
如： 对象.dataset.id
间歇器函数：
- setInterval("执行操作",时间); 表示每隔时间（单位为毫秒）执行一次操作，其中，执行操作要用引号括起来
- setTimeOut("执行操作",时间); 表示隔时间（单位为毫秒,一次性）执行操作,其中,执行操作要用引号括起来
执行操作有两种：
- setInterval("函数名()",时间)
- setInterval(函数名,时间)
关闭间歇器：
let a = setInterval("x",n);
clearInterval(a);
只需要调用函数clearInterval即可,其中第一行返回的a为间歇器的id，每一个间歇器都有独一无二的id ，可以通过id来控制间歇器的开关
事件监听：
语法：
元素对象.addEventListener("事件类型",要执行的函数)
监听三要素：
- 事件源 哪个dom元素被触发
- 事件类型 用什么触发（鼠标、键盘···）
- 事件的调用函数 要执行的函数
事件监听版本：
- DOM L1
事件源.on事件 = function(){}
- DOM L2
事件源.addEventListener(事件，事件处理函数)
区别：on方法会被覆盖（后面的被覆盖），addEventListener方式可以绑定多次，拥有事件更多特性
事件处理
例:
在游览器解析完整个页面了才能找到相应的元素节点时函数应写成：
window.onload = function ()
{
······
}
常用事件：
| 事件 | 说明 | |
| 鼠标键盘事件 | onclick | 单击触发此事件 |
| ondblclick | 双击触发此事件 | |
| onmousedown | 按下鼠标时触发此事件 | |
| onmouseup | 鼠标按下松开时触发此事件 | |
| onmouseover | 当鼠标移动到某对象范围的上方触发此事件 | |
| onmousemove | 鼠标移动时触发此事件 | |
| onmouseout | 当鼠标移开某对象范围时触发此事件 | |
| onkeypress | 当键盘上某个键被按下并且释放时触发此事件 | |
| onkeydown | 当键盘上某个键被按下时触发此事件 | |
| onkeyup | 当键盘上某个键按下释放时触发此事件 | |
| 表单相关事件 | onfocus | 当某个元素获得焦点时触发此事件 |
| onblur | 当前元素失去焦点时触发此事件 | |
| onchange | 当前元素失去焦点并且元素的内容发生改变时触发此事件 | |
| onsubmit | 一个表单被提交时触发此事件 | |
| onreset | 当表单中RESET的属性被激活时触发此事件 | |
| 页面相关事件 | onload | 页面内容完成时触发此事件 |
| onunload | 当前页面将被改变时触发此事件 | |
| onresize | 当游览器大小改变时触发此事件 |
//在JavaScript中调用时，可以用变量绑定事件
如：
let b_save = document.getElementById("id名");
b_save.onclick = function(){}
事件（DOM L2）
鼠标事件
| mouseenter（没有冒泡效果） | 鼠标移动至范围内 |
| mouseleave（没有冒泡效果） | 鼠标移除该范围内 |
| click | 鼠标点击 |
| onmouseover（有冒泡效果） | 当鼠标移动到某对象范围的上方触发此事件 |
| onmouseout（有冒泡效果） | 当鼠标移开某对象范围时触发此事件 |
焦点事件
| focus | 获得焦点 |
| blur | 失去焦点 |
键盘事件
| keydown | 键盘按下触发 |
| keyup | 键盘抬起触发 |
文本事件
| input | 输入时触发 |
事件对象
形如：
元素对象.addEventListener("事件类型",function(e){})
其中，事件对象就是e，我们常用e,evt,event
属性：
| 属性 | 说明 |
| type | 事件类型 |
| clientX/clientY | 获取光标相对于游览器可视窗口的左上方的位置 |
| offsetX/offsetY | 获取光标元素相对于当前DOM元素左上角的位置 |
| key | 用户按下键的键值（现不提倡用keyCode） |
环境对象（this）
指向函数的调用者
回调函数
定义：
如果将函数A作为参数传递给函数B时，那么称A为回调函数
//input:checked 伪类选择器，返回多少个按键被选中，在全选的时候可以使用，
事件流（事件完整执行过程中的完整路径）
捕获阶段（从父到子）：
定义
从DOM根元素执行对应的事件，流动行径，从大到小依次执行
代码体现
DOM.addEventListener(事件类型，事件处理函数，true/*是否使用捕获机制，默认为false*/);
实例
document.addEventListener("click",function1(){},true);
body.addEventListener("click",function2(){},true);
div.addEventListener("click",function3(){},true);
此时，点击div元素的话会从大到小开始，即执行function1再执行function2，然后执行function3
冒泡阶段（从子到父，实际工作以冒泡为主）：
定义
从小到大依次调用所有父级元素的同名事件
代码体现
DOM.addEventListener(事件类型，事件处理函数，false/*是否使用捕获机制,默认为false,为false时可以不写*/);
实例
document.addEventListener("click",function1(){});
body.addEventListener("click",function2(){});
div.addEventListener("click",function3(){});
此时，点击div元素的话会从大到小开始，即执行function3再执行function2，然后执行function1，于是产生如果点击子元素不需要让父元素调用函数的情况，即阻止冒泡
阻止冒泡
原因
默认有冒泡模式存在，所以容易导致事件影响到父级元素
代码体现
事件对象.stopPropagation();
注意：该方法不仅可以阻止冒泡阶段，也可以阻止捕获阶段
实例：
document.addEventListener("click",function1(){});
body.addEventListener("click",function2(){});
div.addEventListener("click",function3(e){e.stopPropagetion();});
要借助事件对象，即传参e
阻止默认行为
如：链接中点击自动跳转，表单中点击提交按钮就提交
与阻止冒泡类似，
事件对象.addEventListener("click",function(e){e.preventDefault();});
要借助事件对象，即传参e
解绑事件
- 事件对象.事件 = null;
- 在addEventListener("事件",函数);使用，在removeEventListener("事件",函数);中移除 //匿名函数无法解绑
事件委托（技巧，依靠事件流 冒泡）
定义
注册一次事件就可以达到同时给多个元素注册事件的效果（减少了注册次数，提高了程序性能）
原理
给父元素注册事件，当触发子元素的时候，会冒泡到父元素上，从而触发父元素的事件其中，要查询点击对象要借助事件对象，即传参e
真正的触发元素为事件对象.target 可以通过TagName来判断是否为目标元素 即事件对象.target.TagName
其他事件
页面加载事件
- load事件
-
- window.addEventListener("load",function(){}); 等待某页面全部资源加载完毕后执行函数
- DOMContentLoaded事件
-
- document.addEventListener("DOMContentLoaded",function(){});等待DOM节点加载完毕后执行绑定函数
页面滚动事件
- scroll事件
-
- window.addEventListener("scroll",function(){}) 页面滚动时执行绑定函数
属性（数据型，不带单位）：
scrollTop 被卷去的大小（Y轴） 常用
scrollLeft 被卷去的大小（X轴）
整个窗口滚动为HTML标签滚动，获取HTML标签写法为（这个为整个窗口对象）可读写，可以赋值：
document.documentEvent
函数 对象.scrollTo(x,y)
返回至x，y位置
页面尺寸事件
对象添加resize事件 对象尺寸发生变化时触发事件
获取元素的宽高（不含边框，边距和滚动条等）：
属性：（只读属性）
clientWidth 和 clientHeight
位置尺寸（包含边框，边距和滚动条等）
属性：
获取宽高:
offsetWidth 和offsetHeight
获取位置，与定位父级的距离（只读属性）：
offsetLeft 和 offsetTop
方法 （获取当前视口的相对位置）：
getBoundingClientRect();
页面滑动的过渡效果（在CSS中添加即可）
html {
scroll-behavior: smooth;
}
DOM节点的增删改查
DOM节点分类（noteType值）：
元素节点：表示元素的节点，如下图div内容 noteType值：1
属性节点：表示属性的节点，如下图div中的属性与属性值 noteType值：2
文本节点：表示文本的节点，如下图div中的文本内容 noteType值：3
<div 属性：属性值>文本内容</div>
注意：
一个元素就是一个节点，称为元素节点
属性节点和文本节点看起来像是元素节点的一部分，但实际上，他们是独立的节点，并不属于元素节点
只有元素节点才可以拥有子节点
其他节点
查找节点（关系，返回的是对象，默认为元素节点）
父节点：
子元素.parentNode
找到了返回对象，没找到返回空（如果需要得到父节点的父节点，则可以，子元素.parentNode.parentNode）
子节点：
- 父元素.childNodes 获取所有的子节点，包括文本节点（空格、换行）、注释节点等（不常用）
- 父元素.children 仅获取所有元素节点，返回的是一个伪数组，选择的是最近一级的元素节点
兄弟节点：
元素对象.previousSibling 选出下一个节点（包括元素节点,文本节点（空格、换行）、注释节点等（不常用））
元素对象.nextSibling 选出下一个节点（包括元素节点，文本节点（空格、换行）、注释节点等（不常用））
上一个兄弟节点：
元素对象.previousElementSibling 获取该元素节点的上一个节点
下一个兄弟节点：
元素对象.nextElementSibling 获取该元素节点的下一个节点
创建结点
document.write("") 页面重绘，页面所有内容全部重置
document.createElement("") 创建节点
元素.innerHTML 创建节点
// 但是如果创建多个单个对象的话，create效率比innerHTML效率高，如果采取字符串拼接之后再使用innerHTML效率更高 即（效率）：innerHTML(字符串拼接好的) >create>innerHTML(字符串未拼接好)
创建：
document.createElement("标签名");
追加：
- 插入到父元素的最后一个子元素的前面
父元素.appendChild(要插入的元素);
- 插入到父元素某个子元素前面
父元素.insertBefore(要插入的元素,在那个元素前面);
克隆节点：
元素.cloneNode(布尔值) 若布尔值为true（深克隆），连同后代节点一起克隆，若为false （浅克隆），不连同，默认为false
克隆之后只是产生了节点，没有追加，所以克隆完了还要追加。
增加结点
appendChild();
insertBefore();
修改结点（属性）
修改元素属性：src , href , title 等
修改普通元素内容：innerHTML ，innerText
修改表单元素： value , type , disabled等
修改元素样式： style , className
删除节点
语法：
父元素.removeChild(要删除的元素) （此时已经没有该节点了，在DOM树中移除，而隐藏的话在DOM还有节点）
自定义属性的查改
获取属性值
element.属性 获取的为内置的属性值
element.getAttribute("属性"); 可以获取程序员自定义的属性值
修改属性值
element.属性 = "修改的值"
element.setAttribute("属性", "值");
移除属性
removeAttribute("属性")
M端事件
触摸事件
| 触屏事件 | 触屏touch事件 | 说明 |
| touchstart | 手指触摸到一个DOM元素时触发 | |
| touchmove | 手指在一个DOM元素上滑时触发 | |
| touchend | 手指从 一个DOM元素上移开时触发 |
js插件（轮播图）
官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
样式和js在package中，将其复制到自己的代码即可
可以在demo中去寻找想要的模板
Window对象
BOM（游览器对象模型）
| window | navigator 可以获取游览器的信息 |
| location 可以设置将通过什么方式跳转页面 | |
| document DOM | |
| history 历史对象 | |
| screen 屏幕对象 |
要点
- 以前的var声明的变量或函数是默认放于window中，所以默认为全局变量，而let const不是
- 函数调用时，其实是window.函数名();
定时器
间歇函数（执行多次）
间隔几秒执行一次，可以一直执行
延时函数（只执行一次）
间隔几秒后执行该函数，只执行一次
setTimeout(回调函数,等待的毫秒数);
清除延时函数
let timer = setTimeout(回调函数,等待的毫秒数);
clearTimeout(timer);
注意
- 延时函数需要等待，后面的代码会先执行
- 每调用一次延时函数都会产生一个新的延时器
js的执行机制
游览器的引擎：渲染引擎、解析js的引擎
以前js为单线程，同一时间只能做一件事，现在HTML5提出Web Worker标准，允许创建多个线程
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的
同步任务：同步任务都在主线程上执行，形成一个执行栈
异步
执行一个任务的时候，可以执行其他任务
异步任务：js的异步是通过回调函数实现的 形成执行线
一般有以下几点：
- 普通事件 如：click、resize等
- 资源加载 如：load、error等
- 定时器 包括setInterval、setTimeout等
异步任务相关添加到任务队列中（任务队列也称为消息队列）
执行机制（js不能实现多线程，实际上是游览器进行相关操作）
- 先执行执行栈中的同步任务
- 异步任务被放入任务队列中
- 一旦执行线中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行线，开始执行
- 执行完执行线中的任务再去判断任务队列中（事件循环 event loop ：执行完后去任务队列中取，执行完后又去取，以此循环，因而称为事件循环）
location对象（主要使用的为href属性）
成分
拆分并保存了URL地址的各个组成部分
常用的属性和方法
| 属性（等号赋值的形式） | |
| hash | 设置或返回从井号（#）开始的URL（锚） 一般作为插件使用，不跳转页面，该页面的部分改变 |
| host | 设置或返回主机名和当前ULR的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整地URL |
| pathname | 设置或返回当前URL的路径部分 |
| port | 设置或返回当前URL的端口号 |
| protocol | 设置或返回当前URL协议 |
| search | 设置或返回从问号（?）开始的URL（查询部分） 一般为获取表示的表单的数据 |
| 方法 | |
| assign() | 加载新的文档 |
| reload() | 重新加载当前文档（重新刷新页面，如果要强制刷新参数传为true） |
| replace() | 用新的文档替换当前的文档 |
navigator对象（一般使用于判断游览器是否兼容或者用户使用的是否为移动端）
属性
| 属性 | 说明 |
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
方法
| 方法 | 说明 |
| javaEnabled() | 指定是否在浏览器中启用Java |
| taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
游览器代理 userAgent
goggle浏览器：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
火狐浏览器：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0
Edge浏览器：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18363
IE浏览器：
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
history对象（主要方法为 go()表示前进或后退一个网页）
简介history
history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
由于安全方面的考虑，开发人员无法得到用户浏览器的URL，但借由用户访问过的页面列表，可以在不知道实际URL的情况下实现后退和前进
length
介绍
history.length属性保存着历史记录的URL数量
初始时，该值为1
如果当前窗口先后访问了三个网址，history.length属性等于3
由于IE10+浏览器在初始时返回2，存在兼容性问题，所以该值并不常用
代码：
history.length // 初始时，该值为1
history.length // 访问三个网址后，该值为3
跳转方法
history对象提供了一系列方法，允许在浏览历史之间移动，包括
go()
back()
forward()
go()
使用go()方法可以在用户的历史记录中任意跳转
这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值
负数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类似于前进按钮)
代码：
//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);
go()方法无参数时，相当于history.go(0)，可以刷新当前页面。
//刷新当前页面
history.go();
//刷新当前页面
history.go(0);
back()
back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)
forward()
forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)
代码
//后退一页
history.back()
//前进一页
history.forward()
如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败
[注意]：
使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页
增改记录
HTML5为history对象添加了两个新方法（IE9-浏览器不支持）
history.pushState()和history.replaceState()
用来在浏览历史中添加和修改记录
state属性用来保存记录对象，而popstate事件用来监听history对象的变化
pushState()
history.pushState()方法向浏览器历史添加了一个状态。
pushState()方法带有三个参数：
一个状态对象
一个标题(现在被忽略了)
一个可选的URL地址
history.pushState(state, title, url);
state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。
当用户定向到一个新的状态时，会触发popstate事件。
事件的state属性包含了历史纪录的state对象。
如果不需要这个对象，此处可以填null。
title —— 新页面的标题
但是所有浏览器目前都忽略这个值，因此这里可以填null。
URL —— 这个参数提供了新历史纪录的地址。
新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL。
假定当前网址是example.com/1.html，使用pushState方法在浏览记录(history对象)中添加一个新记录。
添加上面这个新记录后，浏览器地址栏立刻显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。
假如这时访问了google.com，然后点击了倒退按钮，页面的url将显示2.html，但是内容还是原来的1.html。
再点击一次倒退按钮，url将显示1.html，内容不变。
var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化。
如果pushState的url参数，设置了一个新的锚点值(即hash)，并不会触发hashchange事件，即使新的URL和旧的只在hash上有区别。
如果设置了一个跨域网址，则会报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上。
replaceState()
// 报错
history.pushState(null, null, 'https://twitter.com/hello');
history.replaceState方法的参数与pushState方法一模一样，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目
假定当前网页是example.com/example.html
state
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3
history.state属性返回当前页面的state对象
history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }
popstate事件 IE10-浏览器不支持
每当同一个文档的浏览历史(即history对象)出现变化时，就会触发popstate事件。
需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用javascript调用back()、forward()、go()方法时才会触发。
另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
使用的时候，可以为popstate事件指定回调函数。
这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象(即这两个方法的第一个参数)。
window.onpopstate = function (event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
};
上面代码中的event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象
这个state对象也可以直接通过history对象读取。
var currentState = history.state;
往返缓存
默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面。
浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。
这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；
实际上是将整个页面都保存在了内存里。
如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件
pageshow
pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。
如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数。
第一次加载时，它的触发顺序排在load事件后面。
从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。
同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行
虽然这个事件的目标是document，但必须将其事件处理程序添加到window
pageshow事件有一个persisted属性，返回一个布尔值。
页面第一次加载时或没有从缓存加载时，这个属性是false；
当页面从缓存加载时，这个属性是true。
(function(){
var showCount = 0;
window.onload = function(){
console.log('loaded');
}
window.onpageshow = function(e){
e = e || event;
showCount ++;
console.log(e.persisted,showCount + 'times');
}
})();
上面的例子使用了私有作用域，以防止变量showCount进入全局作用域。
如果单击了浏览器的“刷新”按钮，那么showCount的值就会被重置为0，因为页面已经完全重新加载了。
pagehide
与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。
与pageshow事件一样，pagehide在document上面触发，但其事件处理程序必须要添加到window对象。
[注意]
指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常。
pagehide事件的event对象也包含persisted属性，不过其用途稍有不同。
如果页面是从bfcache中加载的，那么persisted的值就是true；
如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true。
因此，当第一次触发pageshow时，persisted的值一定是false，
而在第一次触发pagehide时，persisted就会变成true(除非页面不会被保存在bfcache中)
本地存储（只能存字符串，就算是数字，也会转换成字符串再进行存储）
介绍
- 数据存储在用户的游览器中
- 设置、读取方便，甚至页面刷新不丢失数据
- 容量较大 sessionStorage和localStorage约5M左右
分类
localStorage（存取的为字符串类型）
查看
在游览器中的检查的Application中的LocalStorage中可以找到
作用：可以将数据永久的存储在本地（用户的电脑中），除非手动删除，否则关闭页面也会存在
特性：可以多窗口（页面）共享（同一游览器可以共享），以键值对的形式存储使用
存储数据
localStorage.setItem(key,value);
获取数据
localStorage.getItem(key);
删除数据
localStorage.removeItem(key);
更改数据
localStorage.setItem(要更改的key,value);
清空数据
localStorage.clear();
sessionStorage
特征
- 生命周期为关闭游览器窗口
- 在同一窗口（页面）下数据可以共享
- 以键值对的形式存储使用
- 用法与localStorage基本一致
本地存储处理复杂数据类型
原因
本地存储只能存储字符串，无法存储复杂数据类型，如果直接存储复杂数据类型，导致数据无法使用
解决办法
需要将复杂数据类型转换成为JSON字符串，再储存到本地
语法：JSON.stringify(复杂数据类型);
将取出的存储字符串转换成对象
语法：JSON.parse(localStorage.getItem(将要取出的复杂数据类型的键))
JSON 对象
属性和值有引号，而且统一是双引号
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
