JS基础—BOM操作

113 阅读1分钟

认识BOM

BOM:浏览器对象模型(Browser Object Model)简称 BOM,由浏览器提供的用于处理文档之外的所有内容的其他对象

BOM主要包括以下的对象模型:

window:包括全局属性、方法,控制浏览器窗口相关的属性、方法

console.log(globalThis === window); // true

location:浏览器连接到的对象的位置(URL)

// 常见的属性
console.log(location.href); // 超链接URL
console.log(location.protocol); // 当前协议
console.log(location.host); // 主机地址
console.log(location.hash); // 哈希值
console.log(location.port); // 端口
console.log(location.pathname); // 路径
console.log(location.hostname); // 主机地址
console.log(location.search); // 查询字符串

// 常见的方法
location.assign('www.baidu.com') // 打开一个网页,可以进行返回
location.replace('www.baidu.com') // 打开一个网页,不可以进行返回
location.reload() // 重新加载页面,可以传入一个布尔类型

history:操作浏览器的历史

// 前端路由核心:修改url页面不刷新
history.back() // 返回上一级,等价于history.go(-1)
history.forward() // 前进下一页,等价于history.go(1)
history.go(2)  // 前进2步
history.pushState() // 打开一个指定的地址
history.replaceState() // 打开一个新的地址,并且使用replace

JSON序列化

var obj = {
    name: 'www',
    age: 19,
    friend: {
        name: 'qq',
        age: 20
    }
}

var jsonObj = JSON.stringify(obj,function (key,value) {
    // 将name的值全部转成wqq
    if(key === 'name') {
        return 'wqq'
    }
    return value
})

// 将obj对象进行序列化
localStorage.setItem('info',JSON.stringify(obj))
// 将字符串转为对象
localStorage.getItem(JSON.parse('info'))