WebApi复习05-BOM

最新推荐文章于 2024-06-10 22:18:41 发布

端端1023

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量116

点赞数 2

分类专栏： webapi 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64526818/article/details/122029075

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

webapi

15 篇文章 0 订阅

订阅专栏

BOM

五个对象

window:浏览器窗口

1. 是js中顶级对象.所有的全局函数,全局属性都是window对象的成员(属性+方法)

2. 只要是window对象的成员,在使用时可以省略window

3. window对象有一些特殊的属性不能被覆盖.例如top不能作为全局变量名

window对象两个方法

1. 打开新窗口: window.open()

2. 关闭新窗口: window.close()

window对象事件

1. window.onload事件: dom树+外部资源加载完成后执行

2. window.onbeforeunload事件: 页面关闭之前执行

window.onunload事件: 页面正在关闭

location: 网址栏

使用最多的属性(网页跳转): location.herf = ' '

location对象三个方法:

location.assign(): 跳转网页与location.herf一致

location.replace():替换网页使用较少,因为替换后不能回退

location.reload(): 刷新网页一般用于移动端

history: 历史记录

1. history三个方法:

history.back(): 返回上一页等价于 history.go(-1)

history.forward(): 前进下一页等价于 history.go(1)

history.go(数字): 到历史记录的具体那一页

正数:前进 1:前进1页 2:前进2页

负数:回退 -1:回退1页 -2:回退2页

0 刷新

navigator: 浏览器信息

作用: 收集用户信息

screen: 屏幕分辨率

存储对象Storage

localStorage

1. localStorage对象作用:存储数据

经典应用:免登陆

2. localStorage语法:

存数据: localStorage.setItem('属性名',属性值)

取数据: localStorage.getItem('属性名')

删数据: localStorage.removeItem('属性名')

清空数据: localStorage.clear()

3. localStorage注意点:

3.1 永久存储: 除非手动清除,否则一直存在

3.2 只能存储字符串类型,如果存储其他类型,编译器会自动tostring()转成字符串存储

sessionStorage

1. sessionStorage对象作用:存储数据

经典应用: 页面间传值

2. sessionStorage语法:

存数据: sessionStorage.setItem('属性名',属性值)

取数据: sessionStorage.getItem('属性名')

删数据: sessionStorage.removeItem('属性名')

清空数据: sessionStorage.clear()

3. sessionStorage注意点:

3.1 临时存储: 只要窗口关闭了就自动清除了

3.2 只能存储字符串类型,如果存储其他类型,编译器会自动tostring()转成字符串存储

localStorage与sessionStorage的区别

1. localStorage与sessionStorage的异同点:

相同点: 作用相同,都是存储数据

不同点: 储存方式不同

localStorage: 硬盘存储应用场景: 免登陆

sessionStorage: 内存存储应用场景: 页面间传值

2. localStorage与sessionStorage在使用的时候的注意点:

只能存储字符串类型数据,如果存储其他类型则编译器自动调用toString()转成字符串

3. 如何解决storage存储对象只能存储字符串问题?(如何存储引用类型)

使用json格式存储

存: 先转json格式,后存储

localStorage.setItem( 'user',JSON.stringify( obj ) )

取: 先取json格式,后转js对象

let js = JSON.parse( localStorage.getItem('user')

json数据格式

1. json是什么?

json是一种数据格式,本质是字符串类型.

实际开发中,网页中的数据都是来源于网络服务器.而服务器不是js语言开发,而是其他编程语言:Java, c++, phython, go, c#, net...而且后台也不是只为前端服务,也需要安卓端和iOS端服务器.

不同的编程语言,数据类型不同.他们是不互通的.后来人们就发明了一种通用的数据格式,让所有的编程语言都支持.这就是json格式.

2. json作用:

数据跨平台传输问题

3. json语法:

本质是字符串

json格式 -> js对象: let js对象 = JSON.parse(json格式)

js对象 -> json格式: let json格式 = JSON.stringify(js对象)

localStorage存储对象类型

<!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>
  <h1>localStorage存储对象类型</h1>
  <div class="btn1">存对象</div>
  <div class="btn2">取对象</div>
  <script>
    let obj = {
      uname: '端端',
      hobby: ['吃饭', '睡觉', '追剧']
    }

    //  存对象
    document.querySelector('.btn1').onclick = function () {
      /* // 1. 先把js对象 -> json格式
      let json = JSON.stringify(obj)
      // 2. 再把json格式存入localStorage
      localStorage.setItem('user', json) */

      localStorage.setItem('user', JSON.stringify(obj))
    }

    // 取对象
    document.querySelector('.btn2').onclick = function () {
      /* // 1. 先从localStorage取出json格式
      let json = localStorage.getItem('user')
      // 2. 再把json格式 -> js对象
      let js = JSON.parse(json) */

      let js = JSON.parse(localStorage.getItem('user'))
      console.log(js)
    }
  </script>
</body>

</html>