Web APls-day05-window对象与本地储存

这篇具有很好参考价值的文章主要介绍了Web APls-day05-window对象与本地储存。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls

目录

Window对象

BOM

定时器-延时函数 

JS 执行机制

location对象

navigator对象

histroy对象

本地存储

本地存储介绍

本地存储分类- localStorage 

本地存储分类- sessionStorage

存储复杂数据类型 


 

Window对象

BOM

BOM(Browser Object Model ) 是浏览器对象模型

Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls

window对象是一个全局对象,也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

定时器-延时函数 

JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout

语法:
Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数 Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls
注意点
延时器需要等待,所以后面的代码先执行
每一次调用延时器都会产生一个新的延时器
两种定时器对比: 执行的次数
         延时函数: 执行一次
         间歇函数:每隔一段时间就执行一次,除非手动清除

JS 执行机制

JavaScript 语言的一大特点就是 单线程 ,也就是说, 同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许JavaScript 脚本创建多个线程。于是,JS 中出现了 同步 异步。
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事
情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
他们的本质区别: 这条流水线上各个流程的执行顺序不同。
同步任务
同步任务都在主线程上执行,形成一个 执行栈。
异步任务
JS 的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
1、普通事件,如 click、resize 等
2、资源加载,如 load、error 等
3、定时器,包括 setInterval、setTimeout 等
异步任务相关添加到 任务队列 中(任务队列也称为消息队列)。
Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls
1. 先执行 执行栈中的同步任务
2 . 异步任务放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取 任务队列 中的异步任务,于是被读取的异步任务结束等待
状态,进入执行栈,开始执行 Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls
Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为 事件循环( event loop )

location对象

location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
常用属性和方法:
         href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
         search 属性获取地址中携带的参数,符号 ?后面部分
         hash 属性获取地址中的啥希值,符号 # 后面部分
         reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
<!-- 
5秒钟之后跳转的页面
需求:用户点击可以跳转,如果不点击,则5秒之后自动跳转,要求里面有秒数倒计时
分析:
①:目标元素是链接
②:利用定时器设置数字倒计时
③:时间到了,自动跳转到新的页面
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.itcast.cn">支付成功<span>5</span>秒后自动跳转</a>
    <script>
        const a =document.querySelector('a')
        let num = 5
        let timerId=setInterval(function()
        {
            num--
            a.innerHTML=`支付成功 <span>${num}</span>秒后跳转`
            if(num===0)
            {
                clearInterval(timerId)
                location.href="http://www.itcast.cn"
            }
        },500)
    </script>
</body>
</html>

navigator对象

navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息
常用属性和方法:
         通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()

histroy对象

history 的数据类型是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等
常用属性和方法: Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls

本地存储

本地存储介绍

以前我们页面写的数据一刷新页面就没有了
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
1、数据存储在 用户浏览器
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大,sessionStorage和localStorage约 5M 左右

本地存储分类- localStorage 

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
特性:
可以多窗口(页面)共享(同一浏览器可以共享)
以键值对的形式存储使用
语法:
存储数据:
localStorage.setItem(key, value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)

本地存储分类- sessionStorage

特性:
生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟 localStorage 基本相同

存储复杂数据类型 

本地只能存储字符串,无法存储复杂数据类型.
解决: 需要将复杂数据类型转换成JSON字符串,在存储到本地
语法:JSON.stringify(复杂数据类型) Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls

将复杂数据转换成JSON字符串 存储 本地存储中 

问题: 因为本地存储里面取出来的是字符串,不是对象,无法直接使用
解决: 把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串) Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls
将JSON字符串转换成对象 取出 时候使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const obj=
        {
            uname:'zxc',
            age:19,
            gender:'男'
        }
        localStorage.setItem('obj',JSON.stringify(obj))
        const str = localStorage.getItem('obj')
        console.log(JSON.parse(str))
    </script>
</body>
</html>

控制台显示为:                               Web APls-day05-window对象与本地储存,# 前端Web APls,javascript,开发语言,ecmascript,前端,web apls 文章来源地址https://www.toymoban.com/news/detail-726723.html

到了这里,关于Web APls-day05-window对象与本地储存的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端TypeScript学习day05-索引签名、映射与类型声明文件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)              目录 索引签名类型  映射类型 索引查询(访问)类型 基本使用  同时查询多个索引的类型  TypeScript 类型声明文件  概述 TS 的两种文件类型  类型声明文件的

    2024年02月08日
    浏览(47)
  • Web前端 Day 2

    块元素 独占一行 宽、高、内外边距可以设置 eg. div 行内元素 一行可以存在多个 eg. span 行内块元素 一行可以存在多个 宽、高、内外边距可以设置 是否独占一行 跨行 rowspan 跨列 colspan   详情标签 效果图   让本不能tab遍历获取焦点的元素可以获取 表单的基本结构 网页交互区

    2024年02月13日
    浏览(31)
  • Web 前端 Day 6

         

    2024年02月15日
    浏览(27)
  • web 前端 Day 3

    例如 效果图   效果图   效果图   效果图   基础选择器 基本选择器 选中指定标签进行一些效果上的修改 标签选择器 类选择器 ID选择器 #box1 #后加id名 通配符选择器 包含选择器 复合选择器 属性选择器 效果图  

    2024年02月13日
    浏览(27)
  • Web前端 Day 5

    使得代码可以具有某些行为 效果图   变量不能重复声明 js是弱数据类型语言 模版字符串    

    2024年02月16日
    浏览(26)
  • 前端学习——Web API(Day1)

    Web API 基本认知 作用和分类 DOM DOM树 DOM对象 根据CSS选择器来获取DOM元素 小练习 其他获取DOM元素方法 识别标签 小练习 操作元素常用属性 小练习 操作元素样式属性 小练习 小练习 操作表单元素属性 自定义属性 小练习

    2024年02月13日
    浏览(54)
  • 前端web入门-CSS-day04

     (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 复合选择器   后代选择器 子代选择器 并集选择器  交集选择器  伪类选择器 伪类-超链接(拓展)  CSS 特性 继承性  层叠性 优先级  优先级 – 叠加计算规则 Emme

    2024年02月08日
    浏览(38)
  • 前端web入门-CSS-day03

     (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 CSS 初体验 CSS 定义 CSS 引入方式  选择器 标签选择器  类选择器 id选择器 通配符选择器 画盒子 文字控制属性 字体大小 字体粗细  字体样式(是否倾斜)  行高 字体

    2024年02月07日
    浏览(43)
  • 前端web入门-CSS-day07

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 定位 相对定位  绝对定位 定位居中 固定定位 堆叠层级 z-index  定位-总结  高级技巧 CSS 精灵 字体图标 字体图标 – 下载字体 字体图标 – 使用字体  CSS 修饰属性  

    2024年02月11日
    浏览(43)
  • 对象储存选型

    1.很多对象存储无法指定对象名称, 只能由系统生成. 为了便于使用和理解, 需要对象存储 支持 自定义对象名 2.对象存储 需要权限管理, 3.需要有扩容方案 4.需要由备份能力 5.需要支持 HTTP 下载 6.有web 管理界面 7.接入完善, SDK 生态完善 8.开源 9.使用广泛, 社区活跃 10.产品成熟

    2024年02月02日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包