window对象

stealPigs-youth

已于 2024-04-13 18:48:52 修改

阅读量124

点赞数

文章标签：前端 html5 javascript

于 2023-10-29 15:54:19 首次发布

本文链接：https://blog.csdn.net/m0_73090085/article/details/134103853

版权

概述

浏览器顶级对象window

变量的定义

作用域划分单位：script标签、function函数、for语句、switch语句、if语句、else语句
相同作用域中的var变量、function xxx(){}：会声明提升；若发生同名，后者会覆盖前者
script标签作用域的var变量、function xxx(){}：会挂载到window对象上
函数A作用域的var变量、function xxx(){}：会挂载到函数A上
node环境中：未声明就使用变量，会报错
浏览器环境中：未声明就使用变量，会默认声明使用的变量，并挂载到window对象上

let和var

for(){}大括号和小括号的var声明属于上层作用域
for(){}大括号和小括号的let声明属于本次循环的for作用域

浏览器环境

严格模式下，this无具体指向，this==undefined
非严格模式下，this无具体指向，this==window

storage&cookie

持续时间

相同域名<=>相同cookie仓库<=>相同locaStroage仓库
相同标签页+相同域名<=>相同会话<=>相同sessionStorage仓库
浏览器关闭，清空所有sessionStroage仓库的数据
浏览器关闭，保留所有localStroage仓库的数据
浏览器关闭，根据浏览器隐私策略，决定cookie仓库的数据是否保留

API

localStorage.setItem(key,value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()
sessionStorage.setItem(key,value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()

IndexedDB

数据库操作

//有数据库，打开数据库；没有数据库，创建数据库
const result=window.indexedDB.open(数据库名, version)
result.onupgradeneeded=function(){}  //创建数据库、数据库version提升时调用
result.onsuccess=function(){}        //开启数据库成功，调用
result.onerror=function(){}          //开启数据库失败，调用

const result=window.indexedDB.deleteDatabase(数据表名)
result.onsuccess=function(){}
result.onerror=function(){}

//关闭数据库
db.close()

数据表操作

//创建数据表；
//配置项：主键名keyPath、autoIncrement主键自增
if(db.objectStoreNames.contains(表名)==false){
    db.createObjectStore(表名,配置项)
}

//删除数据表
db.deleteObjectStore(表名)

//创建索引
//配置项：unique、multiEntry、locale
表对象.createIndex(索引名,表中的属性名,配置项)

数据增删改查

//事务模式有：readonly只读模式(默认)、readwrite读写模式
const 事务对象 = db.transaction([表名],事务模式)
const 表对象 = 事务对象.objectStore(表名)
const 索引对象 = 表对象.index(索引名)

//主键单个增删改查
const result = 表对象.add(数据对象)
const result = 表对象.delete(主键值)
const result = 表对象.put({主键:主键值,...})
const result = 表对象.get(主键值)
result.onsuccess = function(){}
result.onerror = function(){}

//主键多个删改查
表对象.clear()  //清空数据表
表对象.count()  //统计数据表的数据总数
表对象.getAll() //获取数据表所有数据

//主键遍历数据表
//IDBKeyRange默认开区间
//direction的取值：next、prev、nextunique、prevunique
const result = 表对象.openCursor(IDBKeyRange?,direction?)
result.onsuccess=function(event){
    const cursor=event.target.result
    if(cursor){
        console.log(cursor.key,cursor.value)
    }else{
        console.log("没有数据了")
    }
}

//索引查
索引对象.get(索引指定属性的属性值)     //如有多个，返回第一个
索引对象.getAll()
索引对象.getAll(索引指定属性的属性值)  //返回所有的索引指定属性的属性值
索引对象.openCursor()

location

url拆分

完整路径：http://127.0.0.1:5500/index.html?name=Tom&age=11#123
location.href：http://127.0.0.1:5500/index.html?name=Tom&age=11#123
location.protocol：http:
location.host：127.0.0.1:5500
location.hostname：127.0.0.1
location.port：5500
location.pathname：/index.html
location.search：?name=Tom&age=11
location.hash：#123；hash值的优先级大于search；#xxx起到锚记的作用

API

location.reload()：页面刷新
location.assign(url)：页面有记录的当前页面切换
location.replace(url)：页面无记录的当前页面切换

URL方法

new URL("http://127.0.0.1:5500/index.html?name=Tom&age=11#123")的属性

href：http://127.0.0.1:5500/index.html?name=Tom&age=11#123
protocol：http:
host：127.0.0.1:5500
hostname：127.0.0.1
port：5500
pathname：/index.html
search：?name=Tom&age=11
hash：#123
username：""
password：""
origin: http://127.0.0.1:5500

Blob

生成Blob对象

let blob = new Blob(["Hello, world!"], { type: 'text/plain' });
blob.size：Blob对象的大小(字节为单位)
blob.type：Blob对象的MIME类型

创建Blob的URL引用

let urlA=URL.createObjectURL(blob)
let urlB=URL.createObjectURL(blob)
无法跨域使用Blob对象的URL

释放url引用

调用URL.revokeObjectURL(url)
页面关闭释放url引用
页面刷新释放url引用

释放Blob对象

释放掉Blob的所有URL引用后
Blob对象会被当成垃圾回收

console

打印功能

info、log：打印简略的一般信息
dir：打印层级形式的一般信息，如：打印DOM元素对象的层级形式
table：打印表格形式的一般信息
assert(isTrue,errorMessage)：isTure未false，打印errorMessage错误信息
debug：打印简略的详细信息
warn：打印简略的警告信息
error：打印简略的错误信息
trace：打印堆栈调用信息
clear：清空控制台

计时功能

time(唯一标识)：开始计时
timeEnd(唯一标识)：结束计时，并打印计时结果
timeLog(唯一标识,说明内容)：结束计时，并打印计时结果和说明内容

计数功能

count(唯一标识)：打印唯一标识的输出次数
countReset(唯一标识)：重置唯一标识的输出次数

折叠功能

group()：折叠分组起点，默认不折叠
groupCollapsed()：折叠分组起点，默认折叠
groupEnd：折叠分支终点

navigator

clipboard：向剪贴板写入数据；从剪贴板读出数据
geolocation：当前所处的地理位置
appCodeName
appName
appVersion
platform
userAgent
userAgentData
language
languages

mediaDevices

getUserMedia({video:true,audio:true})：获取录制的音视频流
getDisplayMedia({video:true,audio:true})：获取电脑屏幕&音频的音视频流

const userStream = await navigator
    .mediaDevices
    .getUserMedia({ 
        video: true, 
        audio: true 
})
userVideo.srcObject=userStream

const displayStream = await navigator
    .mediaDevices
    .getDisplayMedia({ 
        video: true, 
        audio: true 
})
displayVideo.srcObject=userStream