HtML之JavaScript BOM编程
window
- history 历史
- location 地址栏
- document 浏览器打开的.html文档
- console F12开发者工具的控制台
- screen 屏幕
- navigator 浏览器软件本身（历史原因一直沿用）
- sessionStorage 会话级存储
- localStorage 持久级存储
window对象 API
window对象的属性 API
history 窗口的访问历史
location 地址栏
sessionStorage 用于存储一些会话级数据（浏览器关闭，数据清除）
localStorage 用于存储一些持久级数据（浏览器关闭数据存在）
console log
通过window对象及其属性的API控制浏览器的属性和行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
window 对象是由浏览器提供使用的，无需自己创建（window. 可省略）
三种弹窗
alert
prompt
confirm
定时任务
*/
function fun1() {
window.alert("信息提示")
}
function fun1() {
window.prompt("信息输入")
}
function fun1() {
window.confirm("信息确认")
}
function fun4() {
window.setTimeout(function () {
alert("两秒")
}, 2000)
}
</script>
<script>
/*
window属性的API
history 窗口的访问历史
location 地址栏
sessionStorage 用于存储一些会话级数据（浏览器关闭，数据清除）
localStorage 用于存储一些持久级数据（浏览器关闭数据存在）
console log
*/
function funA() {
history.forward() // 向前翻页
// history.go(n) 正数表示前进，负数表示后退 n表示页数
}
function funB() {
history.back() // 向后翻页
}
function funcLocation() {
location.href = "http://www.baidu.com" // 修改地址栏中的url并跳转
}
</script>
<script>
function funcSessionStorage1() {
sessionStorage.setItem("A", 1212) //类似map是key value格式
localStorage.setItem("A1", 1212) //类似map是key value格式
}
function funcSessionStorage2() {
var aaa = sessionStorage.getItem("A")
var bbb = localStorage.getItem("A1")
alert(aaa + bbb)
}
function funcSessionStorage3() {
// sessionStorage.removeItem()
sessionStorage.clear()
localStorage.clear()
}
</script>
</head>
<body>
<button onclick="fun1()">信息提示</button>
<button onclick="fun2()">信息输入</button>
<button onclick="fun3()">信息确认</button>
<button onclick="fun4()">两秒后提示</button>
<hr>
<a href="https://www.baidu.com">百度</a> <!--需要带https 不然会识别为本地文件-->
<button onclick="funA()">上一页</button>
<button onclick="funB()">下一页</button>
<button onclick="funcLocation()">测试Location</button>
<hr>
<button onclick="funcSessionStorage1()">测试sessionStorage存储</button>
<button onclick="funcSessionStorage2()">测试sessionStorage读取</button>
<button onclick="funcSessionStorage3()">测试sessionStorage清空</button>
</body>
</html>