心流笔记

主题

Wilson2025-03-19 04:01:56前端js
1486
5.8m

JavaScript BOM对象 ​

BOM简介 ​

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

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

image-20230519181829238

location ​

location它拆分并保存了 URL 地址的各个组成部分， 是一个对象

常用属性和方法：

属性/方法说明
href属性，获取完整的URL地址，赋值时用于地址的跳转
search属性，获取地址中携带的参数，符号?后面部分
hash属性，获取地址中的啥希值，符号#后面部分
reload()方法，用来刷新当前页面，传入参数true时表示强制刷新

示例：

html
<body>
  <form>
    <input type="text" name="search"> <button>搜索</button>
  </form>
  <a href="#/music">音乐</a>
  <a href="#/download">下载</a>

  <button class="reload">刷新页面</button>
  <script> 
    // href 属性  得到完整地址，赋值则是跳转到新地址
    console.log(location.href)
    // location.href = 'http://www.baidu.com'

    // search 属性  得到 ? 后面的地址 
    console.log(location.search)  // ?search=笔记本

    // hash 属性  得到 # 后面的地址
    console.log(location.hash)

    // reload 方法  刷新页面
    const btn = document.querySelector('.reload')
    btn.addEventListener('click', function () {
      // location.reload() // 页面刷新
      location.reload(true) // 强制页面刷新 ctrl+f5
    })
  </script>
</body>

只读属性 window.navigator 会返回一个 Navigator 对象的引用，可以用于请求运行当前代码的应用程序的相关信息。如通过 userAgent 检测浏览器的版本及平台

js
// 检测 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' }
})();

history ​

history对象主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等

常见方法：

方法作用
back()后退
forward()前进
go(参数)-1后退，1前进，0刷新页面

示例：

html
<body>
  <button class="back">←后退</button>
  <button class="forward">前进→</button>
  <script>
    // 前进
    const forward = document.querySelector('.forward')
    forward.addEventListener('click', function () {
      // history.forward() 
      history.go(1)
    })
    // 后退
    const back = document.querySelector('.back')
    back.addEventListener('click', function () {
      // history.back()
      history.go(-1)
    })
  </script>
</body>

本地存储 ​

将数据存储在本地浏览器中，主要用于页面刷新数据不丢失，实现数据持久化存储。sessionStorage和localStorage约5M左右

localStorage ​

数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失。localStorage 以键值对的形式存储，并且存储的是字符串

  • 存储：localStorage.setItem(key, value)
  • 获取：localStorage.getItem(key)
  • 删除：localStorage.removeItem(key)

由于本地只能存储字符串，无法存储引用数据类型。所以在存储引用数据类型时，需要将其转换成 JSON 字符串，在使用时，再转换成引用数据类型。其转换过程如下：

image-20230519190050874

（1）将复杂数据类型转换成 JSON (JavaScript Object Notation) 字符串：JSON.stringify(复杂数据类型)

  • JSON字符串：
    • 本质上是一个字符串
    • 属性名使用双引号引起来，不能单引号
    • 属性值如果是字符串型也必须双引号

（2）把取出来的字符串转换为对象：JSON.parse(JSON字符串)

  • 注意：数据多了会自动用数组存储起来

使用示例：

js
// 本地存储复杂数据类型
const goods = {
  name: '华为',
  price: 9999
}
// 1. 把对象转换为JSON字符串  JSON.stringify
localStorage.setItem('goods', JSON.stringify(goods))
// 2.取出goods JSON.parse
JSON.parse(localStorage.getItem('goods'))

sessionStorage ​

用法跟 localStorage 基本相同，区别是：当页面浏览器被关闭时，存储在sessionStorage的数据会被清除

  • 存储：sessionStorage.setItem(key, value)
  • 获取：sessionStorage.getItem(key)
  • 删除：sessionStorage.removeItem(key)

Cookie 是一种由网站存储在用户设备（通常是浏览器）上的小数据片段。它们用于互联网通信过程，以识别浏览器，关联用户的活动并维持状态信息。以下是其注意点：

  • Cookie 可以存储用户的偏好设置、登录状态、会话信息或其他数据
  • 每次用户请求同一服务器时，浏览器会在 HTTP 请求头中自动发送之前存储的 Cookie 信息
  • 会话 Cookie：这些是临时的，当用户关闭浏览器时它们就会被删除
  • 持久 Cookie：可以设置过期日期，即使关闭浏览器，它们也会保留，直到超过设定的过期时间
  • 敏感信息不应该直接存储在 Cookie 中，因为它们可以被用户查看和修改。存储在 Cookie 中的应该是一些非敏感信息或加密的会话标识符
  • 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个域名最多保存 50 个 cookie

除了通过document.cookie访问cookie外，一般也可以引入封装好的cookie库进行使用

总结 ​

cookie、localStorage 和 sessionStorage 的异同点：

存储方式生命周期存储容量存储位置
cookie默认保存在内存中，随浏览器关闭失效。如果设置过期时间，在到过期时间后失效4KB保存在客户端，每次请求时都会带上
localStorage理论上永久有效的，除非主动清除。约5MB（不同浏览器情况不同）保存在客户端，不与服务端交互。节省网络流量
sessionStorage仅在当前网页会话下有效，关闭页面或浏览器后会被清除约5MB（不同浏览器情况不同）保存在客户端，不与服务端交互。节省网络流量
最近更新