网站的物理结构,招生门户网站建设方案,婺源做微信网站,开源商城系统源码Web APIs 5#xff08;BOM#xff1a;Window对象本地存储#xff09;
1.BOM(浏览器对象模型)#xff08;后面几个对象都为BOM对象#xff09;
BOM对象包含#xff1a;navigator、location、document(DOM对象)、history、screenBOM是一个全局对象#xff0c;即JS中的顶…Web APIs 5BOMWindow对象本地存储
1.BOM(浏览器对象模型)后面几个对象都为BOM对象
BOM对象包含navigator、location、document(DOM对象)、history、screenBOM是一个全局对象即JS中的顶级对象alert、console.log都是window的属性所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法window对象下的属性和方法调用时可以省略window
2.定时器——延时函数
setTimeout(回调函数等待的毫秒数)只执行一次平时省略window等待时间先执行后续代码清除延时函数 let 定时器编号 setTimeout(回调函数等待时间)clearTimeout(定时器编号) 延时函数与间歇函数的区别执行次数的不同
3.JS执行机制 JS本身是单线程同一时间只能做一件事任务需要排队前一个任务结束后一个任务才能继续 单线程遇到类似定时器这种耗时任务会出现阻塞——利用多核CPU的计算能力HTML5提出Web Worker标准允许JavaScript脚本创建多个线程。于是JS中出现同步异步 同步异步 同步一件事做完再做另一件事异步在做一件事的同时由于花费时间较长可以去处理其他事情同步任务在主线程上执行形成执行栈异步任务通过回调函数实现常见的异步任务有普通事件(click、resize)资源加载(load、error)定时器setInterval、setTimeout)。异步任务添加到**任务队列消息队列**中。 执行过程事件循环 JS主线程先执行执行栈中的同步任务异步API将准备好的异步任务推入任务队列一旦执行栈中的所有同步任务执行完毕系统会依次读取任务队列中的异步任务再进入执行栈开始执行 eg: //执行结果是 111 333 222console.log(111);setTimeout(function () {console.log(222);}, 0)console.log(333);事件循环event loop简要概括主线程不断的从任务队列获取任务执行任务再获取再执行这种机制就成为事件循环
4.location对象 常用属性 href获取完整的URL地址对其赋值时用于地址的跳转 //运行后页面跳转到百度console.log(location.href);location.href http://www.baidu.comsearch获取地址中携带的参数符号后面部分 console.log(location.search)hash获取地址中的哈希值符号#后面部分页面不跳转而是更换组件时使用 console.log(location.hash)常用方法reload()刷新当前页面传入参数true时强制刷新 button classreload点击刷新/buttonscriptlet btn document.querySelector(.reload)btn.addEventListener(click, function () {location.reload(true)})5.navigator对象
作用记录浏览器自身的相关信息常用属性与方法 userAgent检测浏览器的版本和平台
6.history对象
作用管理历史记录该对象与浏览器地址栏的操作相对应常用属性与方法 back()后退功能forward()前进功能go(参数)前进后退若参数为1 则前进1个页面若是-1则后退1个页面 button后退/buttonbutton前进/buttonscriptconst back document.querySelector(button:first-child)const forward back.nextElementSiblingback.addEventListener(click, function () {history.back()})forward.addEventListener(click, function () {history.forward()})/script7.本地存储 介绍存储在用户浏览器中读取、设置、甚至页面刷新不丢失数据容量较大sessionStorge和localStorage约5M左右 localStorage将数据永久存储在本地除非手动删除 特点可以多窗口共享以键值对的形式存储使用语法() 存储数据localStorage.setItem(key,value)读取数据localStorage.getItem(key)删除数据localStorage.removeItem(key) //存localStorage.setItem(uname, 小小怪)//取let uname localStorage.getItem(uname)console.log(uname);//改 key值在表中有的话就改变值没有就新增localStorage.setItem(uname, 小小倩)//删除localStorage.removeItem(uname)sessionStorage 特点生命周期为关闭浏览器窗口在同一个窗口下共享其他同locaStorage语法也同localStorage 本地存储存储复杂数据 方法将复杂数据类型转换为JSON字符串再存储到本地语法 对象转字符串JSON.stringify(复杂数据类型)字符串转对象JSON.parse(键) scriptconst obj {uname: 小小怪,age: 12,gender: 女}//存 对象转字符串localStorage.setItem(obj, JSON.stringify(obj))//取 字符串转对象let n JSON.parse(localStorage.getItem(obj))console.log(n);/script
