前端开发入门指南Day10: BOM：浏览器窗口的控制（Location对象、定时器函数、本地存储）

Ava_J

已于 2024-11-30 20:28:12 修改

阅读量326

点赞数 9

分类专栏：前端开发入门指南文章标签：前端 javascript 开发语言

于 2024-11-30 19:44:11 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63887085/article/details/144159530

版权

前端开发入门指南专栏收录该内容

17 篇文章

订阅专栏

你有没有想过，当我们使用浏览器时，是如何控制窗口大小、获取屏幕信息、存储数据的呢？今天，让我们一起探索浏览器对象模型（Browser Object Model，简称BOM）的世界！

一、认识BOM：浏览器的"指挥中心" 🎮

BOM就像是浏览器的控制面板，通过它，我们可以操控浏览器窗口、获取各种信息，就像驾驶舱里的各种仪表和控制器。window对象是BOM中最核心的对象，它代表了浏览器窗口。

// window对象是全局对象，下面两种写法是等价的
window.document.title = "新标题";
document.title = "新标题";

// 获取窗口的尺寸信息
console.log("窗口内部宽度：", window.innerWidth);
console.log("窗口内部高度：", window.innerHeight);

// 获取屏幕信息
console.log("屏幕宽度：", screen.width);
console.log("屏幕高度：", screen.height);

二、浏览器的"导航仪"：Location对象 🧭

location对象就像浏览器的GPS系统，它告诉我们当前页面的地址信息，并且可以帮助我们进行页面跳转。

// 获取当前页面的URL信息
console.log("完整URL：", location.href);
console.log("域名：", location.hostname);
console.log("路径：", location.pathname);

// 页面跳转
function goToHomePage() {
    location.href = "index.html";  // 跳转到首页
}

function refreshPage() {
    location.reload();  // 刷新页面
}

三、时间管理：定时器 ⏰

定时器就像是浏览器的闹钟系统，可以帮我们在特定时间执行任务。

// 1. 一次性定时器
function showGreeting() {
    console.log("欢迎来到我的网站！");
}
// 3秒后显示欢迎信息
const timeoutId = setTimeout(showGreeting, 3000);

// 取消定时器
clearTimeout(timeoutId);

// 2. 循环定时器
function updateClock() {
    const now = new Date();
    console.log("当前时间：", now.toLocaleTimeString());
}
// 每秒更新一次时间
const intervalId = setInterval(updateClock, 1000);

// 停止更新
clearInterval(intervalId);

四、数据管理员：本地存储 💾

localStorage和sessionStorage就像浏览器的记事本，可以帮我们存储一些数据。

// 1. localStorage：永久存储
// 存储数据
localStorage.setItem("username", "张三");
localStorage.setItem("theme", "dark");

// 读取数据
const username = localStorage.getItem("username");
console.log("用户名是：", username);

// 删除特定数据
localStorage.removeItem("theme");

// 清空所有数据
localStorage.clear();

// 2. sessionStorage：临时存储（关闭标签页就消失）
sessionStorage.setItem("tempData", "一些临时数据");

五、实用小例子 🌟

1. 自动保存的笔记本

const notepad = {
    // 保存笔记
    saveNote(content) {
        localStorage.setItem("myNote", content);
        console.log("笔记已保存！");
    },
    
    // 加载笔记
    loadNote() {
        return localStorage.getItem("myNote") || "";
    }
};

// 使用示例
const textarea = document.querySelector("#noteInput");
textarea.value = notepad.loadNote();  // 加载已保存的笔记

// 当用户输入时自动保存
textarea.addEventListener("input", function() {
    notepad.saveNote(this.value);
});

2. 简单的主题切换器

const themeManager = {
    setTheme(theme) {
        document.body.className = theme;
        localStorage.setItem("theme", theme);
    },
    
    loadTheme() {
        const savedTheme = localStorage.getItem("theme") || "light";
        this.setTheme(savedTheme);
    }
};

// 页面加载时恢复主题
themeManager.loadTheme();

六、浏览器事件 📣

// 1. 页面加载完成事件
window.addEventListener("load", function() {
    console.log("页面完全加载完成！");
});

// 2. 窗口大小改变事件
window.addEventListener("resize", function() {
    console.log("窗口大小改变了！");
    console.log("新的宽度：", window.innerWidth);
});

// 3. 页面滚动事件
window.addEventListener("scroll", function() {
    console.log("页面滚动了！");
    console.log("滚动位置：", window.scrollY);
});