JS基础整理（三）- Dom和window对象

1、forms 集合

forms 集合返回当前页面所有表单的数组集合。

onblur 事件会在对象失去焦点时发生。经常用于Javascript验证代码，一般用于表单输入框。onblur 相反事件为onfocus事件	onfocus 事件在对象获得焦点时发生。不支持冒泡，常用于 <input>, <select>, 和<a>
onchange 事件会在域的内容改变时发生。可用于单选框与复选框改变后触发的事件。常用于 <input>, <select>, 和 <textarea>	oninput 事件在用户输入时触发。在 <input> 或 <textarea> 元素的值发生改变时触发。支持冒泡
onreset 事件在表单被重置后触发。	onselect 事件会在文本框中的文本被选中时发生。可用于: <input>, <keygen>, <textarea>.
onsubmit 事件在表单提交时触发。

       oninput 事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

onchange onpropertychange 和 oninput 事件的区别

• onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。而 onpropertychange 事件却是实时触发，即每增加或删除一个字符就会触发，通过 js 改变也会触发该事件，但是该事件 IE 专有。
• oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过 js 改变 value 时，却不会触发。而 onpropertychange 事件是任何属性改变都会触发的，而 oninput 却只在 value 改变时触发，oninput 要通过 addEventListener() 来注册，onpropertychange 注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）。
• oninput 事件：a). 当脚本中改变 value 时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。onpropertychange 事件：当 input 设置为 disable=true后，onpropertychange 不会触发。

<input id="inp" type="text" style="width: 90px;" onfocus="focusFun(this)" onblur="onblurFun(this)" />

<script type="text/javascript">
function focusFun(obj){ // 输入框获取焦点
	obj.style.background = 'yellow';
}
function onblurFun(obj){
	obj.style.background = 'red';
}
</script>

<input type="text" id="inp1" oninput="onFun()" style="width: 90px;" />
<p id="demo"></p>

<script type="text/javascript">
let oInp = document.getElementById('inp1');
let oP = document.getElementById('demo');
function onFun(){ // 当用户向 <input> 中尝试输入时执行
	oP.innerHTML = '您输入的是：' + oInp.value;
}
</script>

oncopy 事件在用户拷贝元素上的内容时触发。常用于 type="text" 的 <input> 元素。	onpaste 事件在用户向元素中粘贴文本时触发。常用于 type="text" 的 <input> 元素。
oncut 事件在用户剪切元素的内容时触发。常应用在 type="text" 的 <input> 元素中。

<input type="text" id="inp1" oncopy="myCopy()" style="width: 90px;" value="尝试拷贝" />
<input type="text" onpaste="myPaste()" value="尝试粘贴" size="40" />
<p contenteditable="true" oncut="myCut()">尝试剪切改文本</p>
<p id="demo"></p>

<script type="text/javascript">
function myCopy(){
	// 有三种方式可以拷贝元素和内容：1、按下 CTRL + C；2、在你的浏览器的 Edit(编辑) 菜单中选择 "Copy（复制）"；3、右键鼠标按钮，在上下文菜单中选择 "Copy（复制）" 命令。
	document.getElementById('demo').innerHTML = '你拷贝了！'
}
function myPaste(){
	// 有三种方式可以在元素中粘贴内容：1、按下 CTRL + V；2、从浏览器的编辑菜单中选择 "Paste（粘贴）"；3、右击鼠标按钮在上下文菜单中选择 "Paste（粘贴）" 命令。
	document.getElementById('demo').innerHTML = '你粘贴了！'
}
function myCut(){
	//有三种方式可以剪切内容：1、按下 CTRL + X；2、从浏览器的编辑菜单中选择 "Cut（剪切）"；3、右击鼠标按钮在上下文菜单中选择 "Cut（剪切）" 命令。
	document.getElementById('demo').innerHTML = '你剪切了！'
}
</script>

2、拖动事件：

       ondrag 事件在元素或者选取的文本被拖动时触发。链接和图片默认是可拖动的，不需要 draggable 属性。在拖放的过程中会触发以下事件：

• 在拖动目标上触发事件 (源元素):  ondragstart - 用户开始拖动元素时触发；ondrag - 元素正在拖动时触发；ondragend - 用户完成元素拖动后触发。
• 释放目标时触发的事件:  ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件；ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件；ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件；ondrop - 在一个拖动过程中，释放鼠标键时触发此事件。

a、设置元素为可拖放：把 draggable 属性设置为 true ：<img draggable="true">

b、拖动什么 - ondragstart 和 setData() ，dataTransfer.setData() 方法设置被拖数据的数据类型和值： ev.dataTransfer.setData("Text",ev.target.id);

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

c、放到何处 - ondragover：规定在何处放置被拖动的数据。

        默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。要通过调用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()

d、进行放置 - ondrop：当放置被拖数据时，会发生 drop 事件。

function drop(ev){
    ev.preventDefault(); // 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    // 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    var data=ev.dataTransfer.getData("Text"); //被拖数据是被拖元素的 id ("drag1")
    ev.target.appendChild(document.getElementById(data)); //把被拖元素追加到放置元素（目标元素）中
}

ondrag    该事件在元素正在拖动时触发	ondragend    该事件在用户完成元素的拖动时触发
ondragenter    该事件在拖动的元素进入放置目标时触发	ondragleave    该事件在拖动元素离开放置目标时触发
ondragover    该事件在拖动元素在放置目标上时触发	ondragstart    该事件在用户开始拖动元素时触发
ondrop    该事件在拖动元素放置在目标区域时触发

3、鼠标事件：

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。	ondblclick 事件会在对象被双击时发生。
onmouseenter 当鼠标指针移动到元素上时触发。	onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。	onmouseleave 当鼠标指针移出元素时触发

4、键盘事件：

onkeydown  某个键盘按键被按下。	onkeypress  某个键盘按键被按下并松开。
onkeyup  某个键盘按键被松开。

key 事件在按下按键时返回按键的标识符。altKey（Alt键）、ctrlKey（ctrl键）、metaKey（meta键）、shiftKey（shift键）	altKey 事件属性 - Alt 键是否被按下并保持住了。
onkeydown 事件会在按下一个键盘按键时发生。 触发次序 : 1、onkeydown；2、onkeypress；3、onkeyup	ctrlKey 事件属性 - Ctrl 键是否被按下并保持住。
onkeyup 事件会在键盘按键被松开时发生。发生次序：1、onkeydown；2、onkeypress；3、onkeyup	shiftKey 事件属性 - "SHIFT" 键是否被按下并保持住。
keyCode 属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。	Unicode 字符代码是一个字母的数字 (如数字 "97" 代表字母 "a")。
clientX、clientY 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或当前窗口）的水平或垂直坐标。	button  返回当事件被触发时，哪个鼠标按钮被点击。
charCode 属性返回onkeypress事件触发键值的字母代码。	location 属性返回按键在键盘或设置上的位置。

<p onmousedown="isKeyPressed(event)">alt键是否被按下</p>
<script type="text/javascript">
function isKeyPressed(event){ // alt键是否被按下
	console.log((event.altKey == 1) ? '按下' : '松开');
}
</script><br /><br />

<p onmousedown="whichButton(event)">鼠标左键、中键、右键</p>
<script type="text/javascript">
function whichButton(event){
	console.log('按下了：' + event.button)
}
</script><br /><br />

<input type="text" size="40" onkeypress="myPress(event)" />
<p id="demo0"></p>
<script type="text/javascript">
function myPress(event){ // 在输入框中的字符获取按下字母的Unicode字符码
	let x = event.charCode;
	document.getElementById('demo0').innerHTML = 'Unicode值为：' + x;
}
</script><br /><br />

<input type="text" size="40" onkeypress="myCode(event)" />
<p id="demo1"></p>
<script type="text/javascript">
function myCode(event){
	let x = event.charCode || event.keyCode; //获取Unicode值
	let y = String.fromCharCode(x); // 将值转换为字符
	document.getElementById('demo1').innerHTML = '数字：' + x + '=字符：' + y;
}
</script>

5、addEventListener() 方法

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

        element.addEventListener(event, function, useCapture)   第一个参数是事件的类型 (如 "click" 或 "mousedown")。  第二个参数是事件触发后调用的函数。第三个参数是布尔值用于描述事件是冒泡传递（false）还是捕获传递（true），是可选的。

        document.addEventListener() 方法用于向文档添加事件句柄。可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。用 element.addEventListener() 方法为指定元素添加事件句柄。

       向文档添加事件句柄     document.addEventListener("mousemove", myFunction);
       移除文档的事件句柄     document.removeEventListener("mousemove", myFunction);

       bubbles 事件属性，如果事件是起泡类型，则返回 true，否则返回 fasle。事件冒泡分为三个阶段，它是这样的:

• 第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
• 第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
• 第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

       cancelable 事件返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。  e.cancelable

initEvent()    初始化新创建的 Event 对象的属性。	addEventListener()    允许在目标事件中注册监听事件(IE8 = attachEvent())
preventDefault()    通知浏览器不要执行与事件关联的默认动作。	dispatchEvent()    允许发送事件到监听器上 (IE8 = fireEvent())
stopPropagation()    不再派发事件。	removeEventListener()    运行一次注册在事件目标上的监听事件(IE8 = detachEvent())

6、activeElement 属性

        activeElement 属性返回文档中当前获得焦点的元素。为元素设置焦点，可以使用 element.focus() 方法。可使用 document.hasFocus() 方法来查看当前元素是否获取焦点。

createElement() 方法通过指定名称创建一个元素	createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性。
createTextNode() 可创建文本节点。	createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
createComment() 方法可创建注释节点。

getElementsByName() 方法可返回带有指定名称的对象的集合。	getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
getElementsByTagName() 方法可返回带有指定标签名的对象的集合	querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
getElementsByClassName() 方法返回文档中所有指定类名的元素集合	querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素。

classList 属性返回元素的类名。

add(class1, class2, ...)  在元素中添加一个或多个类名，如果指定的类名已存在，则不会添加	contains(class)  返回布尔值，判断指定的类名是否存在。
remove(class1, class2, ...) 移除元素中一个或多个类名	item(index)  返回元素中索引值对应的类名。索引值从 0 开始。
toggle(class, true | false)  在元素中切换类名

7、cloneNode() 方法

       cloneNode() 方法可创建指定的节点的精确拷贝。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

accessKey 属性可设置或返回访问单选按钮的快捷键。	hasFocus() 方法返回布尔值，用于检测文档(或文档内的任一元素)是否获取焦点。
getAttribute() 方法通过名称获取属性的值。	setAttribute() 方法创建或改变某个新属性。
getAttributeNode() 方法从当前元素中通过名称获取属性节点。	setAttributeNode() 方法用于添加新的属性节点。
removeAttribute() 方法删除指定的属性。	replaceChild() 方法可将某个子节点替换为另一个。
removeAttributeNode() 方法从元素中删除指定的属性节点。	removeChild() 方法可从子节点列表中删除某个节点。
insertBefore() 方法可在已有的子节点前插入一个新的子节点。	appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
nextSibling 属性可返回元素节点之后的兄弟节点（包括文本节点、注释节点）。	childNodes 属性返回包含被选节点的子节点的 NodeList。
nextElementSibling 属性返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）。	parentNode 属性可返回某节点的父节点。
previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）。	lastChild 属性可返回文档的最后一个子节点。
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）	children 属性返回元素的子元素的集合。

8、cookie 属性

cookie 属性返回当前文档所有 键/值 对的所有 cookies。

9、onhashchange 事件

        onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。例：指定当前 URL 为http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。

• 通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分。
• 使用不同书签导航到当前页面（使用"后退" 或"前进"按钮）
• 点击链接跳转到书签锚

10、onload 事件

       onload 事件会在页面或图像加载完成后立即发生。onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

       onunload 事件在用户退出页面时发生。onunload 发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)。 onunload 事件同样触发了页面载入事件(+ onload 事件)。

        onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，在用户浏览网页时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

        为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。onpagehide 事件在用户离开网页时触发。如点击一个链接，刷新页面，提交表单，关闭浏览器等。onpagehide 事件有时可以替代 onunload 事件，但 onunload 事件触发后无法缓存页面。

<body onpageshow="myFun(event)">
<script type="text/javascript"> //查看页面是否从浏览器缓存中读取
function myFun(event) { 
    alert("页面是否从浏览器缓存中加载? " + event.persisted);
}
</script>
</body>

11、document.body 属性

document.body 属性返回 <body> 元素， document.documentElement 属性返回 <html> 元素。

adoptNode() 方法用于从另外一个文档中获取一个节点。

close() 方法用于关闭一个由 document.open 方法打开的输出流，并显示选定的数据。

12、onbeforeunload 事件

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

(function(){ // 记录用户停留时长的业务，在 GA 等页面访问统计的应用中都包含这个
    var startTime = Math.ceil(new Date().getTime()/1000), //单位秒
        getDuration = function(){
            var time = '', hours = 0, minutes = 0, seconds = 0, endTime = Math.ceil(new Date().getTime()/1000),
                duration = endTime - startTime;

            hours = Math.floor(duration/3600); //停留小时数
            minutes = Math.floor(duration%3600/60); //停留分钟数
            seconds = Math.floor(duration%3600%60); //停留秒数

            time = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
            return time;
        };        

    window.onbeforeunload = function(e){
        var duration = getDuration();
		alert(duration)

        //request(duration);
    };
})();

13、onerror 事件

onerror 事件在加载外部文件（文档或图像）发生错误时触发。

<img id="myImg" src="image1.gif" />

<script type="text/javascript">
let oDiv = document.getElementById('myImg');
myFun(oDiv); //无法加载图片...

function myFun(obj){
	obj.addEventListener('error', function(){
		let elem = document.createElement('div')
		elem.innerHTML = '无法加载图片...';
		obj.after(elem);
	})
}
</script>

14、onresize 事件

onresize 事件会在窗口或框架被调整大小时发生。  onscroll 事件在元素滚动条在滚动时触发。

windowResizeEvent(function(){
	console.log('宽度为：' + window.outerWidth + ', 高度为：' + window.outerHeight);
})
function windowResizeEvent(callback) { // 监听浏览器窗口大小
    window.onresize = function() {
        var target = this;
        if (target.resizeFlag) {
            clearTimeout(target.resizeFlag);
        }
        
        target.resizeFlag = setTimeout(function() {
            callback();
            target.resizeFlag = null;
        }, 100);
    }
}

15、blur() 方法：

      blur() 方法可把键盘焦点从顶层窗口移开。移除元素焦点。obj.blur();

      focus() 方法可把键盘焦点给予一个窗口。用于为元素设置焦点（如果可以设置）。document.getElementById("myText").focus();

      hasFocus() 方法返回布尔值，用于检测文档(或文档内的任一元素)是否获取焦点。

      activeElement 属性返回文档中当前获得焦点的元素。document.activeElement.tagName;

      prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串。

      resizeTo()方法用于把窗口大小调整为指定的宽度和高度。

document.addEventListener() 方法用于向文档添加事件句柄。

可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

16、setInterval() 方法：

       setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

        如果你只想执行一次可以使用 setTimeout() 方法。myVar = setInterval(function(){ alert("Hello"); }, 3000);

       clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

       clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。

17、scrollBy() 方法

scrollBy() 方法可把内容滚动指定的像素数。scrollTo() 方法可把内容滚动到指定的坐标。

• scrollBy() 会使元素每隔一秒从当前的滚动条位置向下滚动10px，这是一个设置相对滚动条位置的方法。
• scrollTo() 和 scroll() 方法是一样的，都是将元素滚动到指定位置，它们都是设置绝对滚动条位置。
• 元素还有一个设置或读取滚动条位置的属性：element.scrollTop，如 element.scrollTop = 50; 便是设置元素的滚动条位置为 50px。

18、stop() 方法

stop() 方法用于停止页面载入。

二、window对象

1、History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL

• window.history.back(); 方法可以加载历史列表中的前一个URL（如果存在）；调用该方法的效果等价于点击后退按钮或调用history.go(-1)。

• window.history.forward() 方法可加载历史列表中的下一个 URL。调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

• window.history.go(-2) 方法可加载历史列表中的某个具体的页面。该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

2、Location 对象：

Location 对象包含有关当前 URL 的信息。Location 对象属性有：

• location.hash  属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）例：假设当前的 URL 是 http://www.runoob.com/test.htm＃PART2， 则 location.hash 为 #part2。
• location.host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号。例：URL为：https://www.runoob.com/jsref/prop-loc-host.html， 则host 为 www.runoob.com
• location.hostname 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名。例：URL 为： https://www.runoob.com/jsref/prop-loc-hostname.html， 则hostname 为 www.runoob.com
• location.href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。
• location.pathname 属性是一个可读可写的字符串，可设置或返回当前 URL 的路径部分。 例：URL为https://www.runoob.com/jsref/prop-loc-pathname.html， 则pathname 为 /jsref/prop-loc-pathname.html。
• location.port 属性是一个可读可写的字符串，可设置或返回当前 URL 的端口部分。
• location.protocol 属性是一个可读可写的字符串，可设置或返回当前 URL 的协议。例：URL为https://www.runoob.com/jsref/prop-loc-protocol.html，则protocol 为 https:
• location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。例：

  URL为 http://www.runoob.com/submit.htm?email=someone@ example.com， 则search 为 ?email=someone@example.com

Location 对象方法：

• assign()方法加载一个新的html文档。跳转到指定的Url，当前页面会转为新页面内容，可以点击后退返回上一页。 window.location.assign("http://www.runoob.com") 。
• reload()方法用于刷新当前文档。类似于你浏览器上的刷新页面按钮。location.reload()
• replace() 方法可用一个新文档取代当前文档。通过加载URL指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，故没有后退返回上一页

3、localStorage对象

       localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。   

       sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage.setItem("key", "value"); //保存数据
localStorage.getItem("key"); //读取数据
localStorage.removeItem("key"); //删除数据
localStorage.clear(); //将localStorage的所有内容清除

sessionStorage.setItem("key", "value"); //保存数据
sessionStorage.getItem("key"); //读取数据
sessionStorage.removeItem("key"); //删除指定键的数据
sessionStorage.clear(); // 删除所有数据

特点：

• localStorage在浏览器的隐私模式下面是不可读取的。localStorage不能被爬虫抓取到。
• localStorage本质上是对字符串读取，如果存储内容多的话会消耗内存空间，导致页面变卡。
• 不同的网站直接是不能共用相同的 localStorage。
• localStorage 只支持 string 类型的存储。

if(!window.localStorage){ //localStorage 的写入和读取方法:
    alert("浏览器不支持localstorage");
    return false;
}else{
    var storage = window.localStorage;
    window.localStorage["a"] = 1; // 写入a字段
    window.localStorage.b = 2; // 写入b字段
    window.localStorage.setItem("c",3); // 写入c字段 推荐用法

    console.log(typeof storage["a"]); //string
    console.log(typeof storage["b"]); //string
    console.log(typeof storage["c"]); //string

	console.log(window.localStorage.a); //1
	console.log(window.localStorage["b"]); //2
	console.log(window.localStorage.getItem("c")); //3 推荐用法
}

window.localStorage.setItem("c", 3)
console.log(window.localStorage.getItem("c")); //3
window.localStorage.clear(); //将localStorage的所有内容清除
console.log(window.localStorage.getItem("c")); // null

获取数据：localStorage.getItem(key)：获取指定key本地存储的值	存储/更新数据：localStorage.setItem('key',value)：将value存储到key字段。如window.localStorage.setItem("c", 3)
删除数据：localStorage.removeItem('key')：删除指定key本地存储的值。如：window.localStorage.removeItem("c")	将localStorage的所有内容清除：window.localStorage.clear();

设置meta标签，清除页面缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

4、Navigator对象：

Navigator对象包含有关浏览器的信息。

• appCodeName 属性是一个只读字符串，声明了浏览器的代码名。
• appName 属性可返回浏览器的名称。
• appVersion 属性可返回浏览器的平台和版本信息。该属性是一个只读的字符串。
• cookieEnabled 属性可返回一个布尔值，如果浏览器启用了 cookie，该属性值为 true。如果禁用了 cookie，则值为 false。
• platform 属性是一个只读的字符串，声明了运行浏览器的操作系统和（或）硬件平台。
• userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

console.log("浏览器代号: " + navigator.appCodeName); //浏览器代号: Mozilla
console.log("浏览器名称: " + navigator.appName); //浏览器名称: Netscape

console.log("浏览器版本: " + navigator.appVersion); //浏览器版本: 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36
console.log("启用Cookies: " + navigator.cookieEnabled); //启用Cookies: true

console.log("硬件平台: " + navigator.platform); //硬件平台: Win32
console.log("用户代理: " + navigator.userAgent); //用户代理: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

console.log("用户代理语言: " + navigator.systemLanguage); //用户代理语言: undefined

5、Screen 对象

        Screen 对象包含有关客户端显示屏幕的信息。availHeight 返回屏幕的高度（不包括Windows任务栏）。

//返回屏幕的总高度
console.log("总宽度: " + screen.width + ", 总高度: " + screen.height); //总宽度: 1536, 总高度: 864

//返回屏幕的高度（不包括Windows任务栏）
console.log("屏幕的可用宽度: " + screen.availWidth + ", 屏幕的可用高度: " + screen.availHeight); //屏幕的可用宽度: 1536, 屏幕的可用高度: 824

//返回目标设备或缓冲器上的调色板的比特深度
console.log("颜色深度: " + screen.colorDepth); //颜色深度: 24

//返回屏幕的颜色分辨率（每象素的位数）
console.log("颜色分辨率: " + screen.pixelDepth); //颜色分辨率: 24

       outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。         outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）

      innerheight 返回窗口的文档显示区的高度。   innerwidth 返回窗口的文档显示区的宽度。

element.offsetHeight / offsetWidth：返回任何一个元素的高度 / 宽度包括边框和填充，但不是边距	element.offsetLeft / offsetTop：返回当前元素的相对水平 / 垂直偏移位置的偏移容器
element.scrollHeight / scrollWidth：返回整个元素的高度（包括带滚动条的隐蔽的地方）	element.offsetParent：返回元素的偏移容器
element.scrollLeft / scrollTop：返回元素的整个宽度（包括带滚动条的隐蔽的地方）/ 实际元素的左边缘和左边缘之间的距离	screenX /screenY：返回当某个事件被触发时，鼠标指针的水平 / 垂直坐标
element.clientHeight / clientWidth：在页面上返回内容的可视高度 / 宽度（不包括边框，边距或滚动条）

      Top属性返回当前窗口的最顶层浏览器窗口。

      screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。Firefox 使用 "window.screenX" and "window.screenY"。

       pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。           

       pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

	相同点	不同点
clientY：距离可视页面左上角的距离	距离页面左上角距离	受页面滚动影响
pageY：距离可视页面左上角的距离（不受页面滚动影响）	距离页面左上角距离	不受页面滚动影响
	相同点	不同点
layerY：找到它或它父级元素中最近具有定位的左上角距离	距离元素的左上角距离	受元素的定位的影响，会从本元素往上找到第一个定位的元素的左上角
offsetY：距离它自己左上角的距离	距离元素的左上角距离	计算相对于本元素的左上角，不在乎定位问题。IE的特有属性
screenY：距离屏幕左上角的距离

6、name 属性：

name 属性可设置或返回存放窗口的名称的一个字符串。

<script type="text/javascript">
var myWindow;
function openWin(){
    myWindow=window.open('','我的自定义窗口','width=200,height=100');
    myWindow.document.write("<p>窗口名称为: " + myWindow.name + "</p>");
}
</script>

<input type="button" value="打开我的窗口" onclick="openWin()" />

7、closed 属性

       closed 属性可返回一个布尔值，该值声明了窗口是否已经关闭。window.closed()

       opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。当使用window.open()打开一个窗口，可以使用此属性返回来自目标窗口源（父）窗口的详细信息。window.opener.close()将关闭源（父）窗口。

        confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。

<script type="text/javascript">
function myFun(){
	window.scrollBy(100, 100)
	console.log("pageXOffset:" + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);
}
</script>

<div style="border: 1px solid black; background-color: lightblue; height: 2000px; width: 2000px;"></div>
<button onclick="myFun()" style="position: fixed; left: 10px; top: 10px; z-index: 2;">点我滚动</button>

8、parent属性

        parent属性返回当前窗口的父窗口。

        self 属性返回指向当前 window 对象的引用，利用这个属性，可以保证在多个窗口被打开的情况下，正确调用当前窗口内的函数或属性而不会发生混乱。window.self

9、frames 属性

       frames 属性返回窗口中所有命名的框架。返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。

三、URL解析：

1、URL中出现的特殊字符

特殊含义	十六进制	?    分隔实际的URL和参数	%3F
+   表示空格（在URL中不能使用空格）	%2B	#    表示书签	%23
/   分隔目录和子目录	%2F	=    URL  中指定的参数的值	%3D
&  URL中指定的参数间的分隔符	%26

空格换成加号(+)	正斜杠(/)分隔目录和子目录	问号(?)分隔URL和查询
百分号(%)制定特殊字符	#号指定书签	&号分隔参数

https://blog.csdn.net/u011600592/article/details/82730989