第十篇-JavaScript BOM-下

JavaScript 历 史

在 JavaScript 中，你可以使用 history 对象提供的方法来实现前进和后退的功能。

要向前导航，可以使用 history.forward() 方法。它会将用户跳转到最近的一个访问页面。

要向后导航，可以使用 history.back() 方法。它会将用户跳转到上一个访问页面。

下面是一些实际例子:

// 向前导航
window.history.forward()

// 向后导航
window.history.back()

//加载历史列表中某个页面， number 为负数表示后退，为正数表示前进，为 0 表示当前页面

window.history.go(number)

需要注意，这些方法仅会在用户访问历史记录中有可用页面时才有效。如果已经到达历史记录的起点或终点，这些方法将不起作用。

JavaScript 弹窗

JavaScript中的弹窗有几种类型，其中包括alert、confirm和prompt。

1. alert弹窗： 使用alert函数可以创建一个简单的弹窗，只含有一个确定按钮。弹窗中显示指定的文本。 例如：alert("这是一个alert弹窗");

2. confirm弹窗： 使用confirm函数可以创建一个确认弹窗，包含确定和取消按钮。弹窗中显示指定的文本，并返回用户点击的按钮结果。点击确定返回true，点击取消返回false。 例如：var result = confirm("这是一个confirm弹窗"); if(result){ console.log("用户点击了确定按钮"); } else { console.log("用户点击了取消按钮"); }

3. prompt弹窗： 使用prompt函数可以创建一个带有输入框的弹窗。弹窗中显示指定的文本，并返回用户输入的内容。 例如：var name = prompt("请输入您的姓名"); console.log("您输入的姓名是：" + name);

这些弹窗函数可以通过在HTML中的<script>标签中直接调用，或者在外部的JavaScript文件中调用

JavaScript 浏览器信息

您可以使用以下JavaScript代码获取浏览器的相关信息：

// 浏览器名称和版本
console.log(navigator.userAgent);

// 浏览器语言
console.log(navigator.language);

// 浏览器是否支持cookie
console.log(navigator.cookieEnabled);

// 浏览器是否支持Java
console.log(navigator.javaEnabled());

// 浏览器是否支持WebSockets
console.log(!!window.WebSocket);

// 浏览器是否支持Local Storage
console.log(!!window.localStorage);

// 浏览器是否支持Geolocation
console.log(!!navigator.geolocation);

// 浏览器是否支持拖放
console.log('draggable' in document.createElement('span'));

// 浏览器是否支持触摸事件
console.log('ontouchstart' in window);

// 浏览器是否支持Web Workers
console.log(!!window.Worker);

JavaScript 定时器

JavaScript中的定时器是用来在指定的时间间隔执行一段代码的工具。有两种类型的定时器：setTimeout和setInterval。

setTimeout函数用于在指定的延迟时间后执行一次代码。它接受两个参数：要执行的代码和延迟时间（以毫秒为单位）。例如：

setTimeout(function() {
  console.log("Hello, world!");
}, 1000); // 1秒后输出 "Hello, world!"

setInterval函数用于按照指定的时间间隔重复执行一段代码。它也接受两个参数：要执行的代码和时间间隔（以毫秒为单位）。例如：

setInterval(function() {
  console.log("Hello, world!");
}, 1000); // 每隔1秒输出 "Hello, world!"

要停止定时器的执行，可以使用clearTimeout函数（用于停止setTimeout）和clearInterval函数（用于停止setInterval）。这些函数接受一个参数，即要停止的定时器的标识符。例如：

var timerId = setTimeout(function() {
  console.log("Hello, world!");
}, 1000); // 1秒后输出 "Hello, world!"

clearTimeout(timerId); // 停止定时器的执行

需要注意，定时器的执行时间并不是精确的。它依赖于浏览器的事件处理机制和其他因素，可能会有一些延迟。

JavaScript 本地存储

JavaScript提供了多种本地存储的方式，其中最常用的有以下几种：

1、localStorage：localStorage为每个域名提供了一个独立的存储空间，可以存储大量数据，数据永久性保存在用户的浏览器中，除非用户手动清除或者网站代码清除才会被删除。

2、sessionStorage：sessionStorage也是为每个域名提供了一个独立的存储空间，但是数据只在当前会话期间有效，即当用户关闭浏览器标签页或者窗口时会被删除。

Js 中除了本地存储以外，还有一种 cookie 也可以存储数据。并且 cookie 可以设置失效时间

 //存值

document.cookie = ‘数据’;

//返回所有数据以 ; 分割

document.cookie

//失效时间，若不设置时间，默认关闭浏览器时清除

document.cookie = ‘数据;expires=时间’

删除 cookie 可以通过给指定数据设置过去的时间，使其失效自动删除。

注意：时间格式必须是 UTC 或 GMT 时间。

例如：Tue Dec 07 2021 19:29:59 GMT+0800 (中国标准时间)