javaEE -18（ 15000字 JavaScript入门 - 3 ）

ice___Cpu

已于 2024-12-16 16:36:50 修改

阅读量1.7k

点赞数 28

分类专栏： javaEE 文章标签： java-ee javascript 前端

于 2023-12-27 10:38:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_73232539/article/details/135235829

版权

javaEE 专栏收录该内容

25 篇文章

订阅专栏

一：事件（高级）

1.1 注册事件（绑定事件）

注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式	方法监听注册方式
使用 on 开头的事件，例如 onclick	使用 W3C 推荐的 addEventListener() 方法
注册事件具有唯一性，后注册的处理函数会覆盖前面的处理函数	支持同一个元素的同一个事件注册多个监听器
同一个元素的同一个事件只能绑定一个处理函数	按注册顺序依次执行所有绑定的事件处理函数

1.1.1 addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

参数	描述
type	事件类型字符串，例如 click、mouseover，注意不要带 on。
listener	事件处理函数，事件发生时会调用该监听函数。
useCapture	可选参数，布尔值，默认值为 false。学完 DOM 事件流后再进一步学习。

const button = document.querySelector('button');

button.addEventListener('click', () => {//点击按钮时触发
  console.log('第一个事件被触发！');
});

button.addEventListener('mouseover', () => {//鼠标悬停时触发
  console.log('第二个事件被触发！');
});

在这里插入图片描述

1.2 删除事件（解绑事件）

删除事件的方式同样也有两种：

eventTarget.onclick = null;//传统注册方式
eventTarget.removeEventListener(type, listener[, useCapture]);//方法监听注册方式

参数	描述
type	要移除的事件类型（如 click）。
listener	要移除的函数对象。
useCapture	如果使用了捕获阶段监听器，则移除时必须指定相同的 useCapture 值，否则无法移除成功。

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked!');
}

button.addEventListener('click', handleClick);

// 等待一段时间后移除事件监听器
setTimeout(() => {
  button.removeEventListener('click', handleClick);
}, 3000);

1.3 DOM 事件流

事件流描述的是事件在页面中传播的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程称为 DOM 事件流，DOM 事件流分为 3 个阶段：

捕获阶段：事件从文档的根节点逐层向下传播，直到到达事件目标元素。这个过程称为捕获。
目标阶段：事件在目标元素上被触发，这个元素被称为事件目标。
冒泡阶段：事件从目标元素逐层向上传播回文档的根节点，这个过程称为冒泡。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 事件流示例</title>
    <style>
        div, section, button {
            padding: 20px;
            margin: 10px;
        }

        div {
            background-color: lightblue;
        }

        section {
            background-color: lightgreen;
        }

        button {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div>
        <section>
            <button>点击我</button>
        </section>
    </div>

    <script>
        const div = document.querySelector('div');
        const section = document.querySelector('section');
        const button = document.querySelector('button');

        // 事件捕获阶段处理程序
        div.addEventListener('click', (event) => {
            console.log('捕获阶段：div');
        }, true);  // 设置为 true 表示在捕获阶段执行

        section.addEventListener('click', (event) => {
            console.log('捕获阶段：section');
        }, true);

        button.addEventListener('click', (event) => {
            console.log('捕获阶段：button');
        }, true);

    /*  使用完后解除掉注释
      
      // 事件冒泡阶段处理程序
        div.addEventListener('click', (event) => {
            console.log('冒泡阶段：div');
        }, false);  // 设置为 false（默认）表示在冒泡阶段执行

        section.addEventListener('click', (event) => {
            console.log('冒泡阶段：section');
        }, false);

        button.addEventListener('click', (event) => {
            console.log('冒泡阶段：button');
        }, false); 
        
    */
    </script>
</body>
</html>

在这里插入图片描述

当你点击按钮触发事件之后，会在捕获或冒泡阶段逐级触发该事件，接着各级会分别调用对应的回调函数。

注意：

实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

1.4 事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {}）
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

事件对象是由浏览器在每次事件触发时自动生成的，并作为参数传递给事件处理函数。我们无需手动传递参数。事件发生后，与该事件相关的所有信息都会存储在事件对象中。事件对象包含许多属性和方法，例如键盘按键的状态、鼠标的位置、鼠标按钮的状态等，方便开发者获取事件详细信息，比如：

谁绑定了这个事件。
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

以下是一些常见的事件对象属性和方法：

属性/方法	描述
event.type	返回事件的类型。
event.target	返回触发事件的元素。
event.srcElement	返回触发事件的元素（兼容旧浏览器）。
event.clientX	返回鼠标事件发生时的 X 坐标。
event.clientY	返回鼠标事件发生时的 Y 坐标。
event.keyCode	返回键盘事件中按下的键的键码。
event.key	返回键盘事件中按下的键的键值。
event.preventDefault()	阻止事件的默认行为。
event.stopPropagation()	停止事件在 DOM 树中的传播。

target 和 this 的区别：

属性	描述
this	指向事件绑定的元素。
e.target	指向事件触发的元素。

event.preventDefault() 用于阻止浏览器执行事件的默认行为。通常浏览器在触发某些事件时会执行预设的默认动作。例如：

行为	描述
点击链接	会跳转到目标页面。
表单提交	会刷新页面并发送数据。
按下键盘上的某些按键	可能触发特殊行为（如 F5 刷新页面）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>preventDefault 与 stopPropagation 三层嵌套示例</title>
</head>
<body>
    <div id="outerDiv" style="padding: 20px; background-color: lightgray;">
        外层 div
        <div id="middleDiv" style="padding: 20px; background-color: lightblue;">
            中间层 div
            <a href="https://www.example.com" id="myLink" style="background-color: lightcoral; padding: 10px;">点击我</a>
        </div>
    </div>

    <script>
        const outerDiv = document.getElementById('outerDiv');
        const middleDiv = document.getElementById('middleDiv');
        const link = document.getElementById('myLink');

        // 外层 div 的点击事件
        outerDiv.addEventListener('click', function(event) {
            console.log('外层 div 被点击');
        });

        // 中间层 div 的点击事件
        middleDiv.addEventListener('click', function(event) {
            console.log('中间层 div 被点击');
        });

        // 链接的点击事件，阻止默认行为和冒泡
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止链接跳转
            event.stopPropagation(); // 阻止事件冒泡到中间层和外层 div
            console.log('链接被点击，但没有跳转，也没有冒泡');
        });
    </script>
</body>
</html>

在这里插入图片描述

1.5 常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

鼠标事件对象 Event 的常用方法：

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区域的 X 坐标
e.clientY	返回鼠标相对于浏览器窗口可视区域的 Y 坐标
e.pageX	返回鼠标相对于文档页面的 X 坐标
e.pageY	返回鼠标相对于文档页面的 Y 坐标
e.screenX	返回鼠标相对于电脑屏幕的 X 坐标
e.screenY	返回鼠标相对于电脑屏幕的 Y 坐标

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件坐标示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        #output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>

<h2>鼠标坐标示例</h2>
<p>移动鼠标或点击页面，查看不同的坐标信息。</p>

<div id="output">
    <p><strong>clientX</strong>: <span id="clientX">0</span></p>
    <p><strong>clientY</strong>: <span id="clientY">0</span></p>
    <p><strong>pageX</strong>: <span id="pageX">0</span></p>
    <p><strong>pageY</strong>: <span id="pageY">0</span></p>
    <p><strong>screenX</strong>: <span id="screenX">0</span></p>
    <p><strong>screenY</strong>: <span id="screenY">0</span></p>
</div>

<script>
    // 获取页面中的元素
    const clientXOutput = document.getElementById('clientX');
    const clientYOutput = document.getElementById('clientY');
    const pageXOutput = document.getElementById('pageX');
    const pageYOutput = document.getElementById('pageY');
    const screenXOutput = document.getElementById('screenX');
    const screenYOutput = document.getElementById('screenY');

    // 监听鼠标移动事件
    document.addEventListener('mousemove', function(event) {
        // 获取鼠标的不同坐标信息并显示
        clientXOutput.textContent = event.clientX;
        clientYOutput.textContent = event.clientY;
        pageXOutput.textContent = event.pageX;
        pageYOutput.textContent = event.pageY;
        screenXOutput.textContent = event.screenX;
        screenYOutput.textContent = event.screenY;
    });
</script>

</body>
</html>

在这里插入图片描述

1.6 常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时并弹起时触发（已废弃）

onkeypress 的特点：

事件类型	描述
onkeypress	不识别功能键（如左右箭头、Shift 等）。
onkeydown 和 onkeyup	不区分字母大小写，而 onkeypress 区分字母大小写。

键盘事件对象 Event 的常用方法：

键盘事件对象	说明
keyCode	返回按键的 ASCII 值

二： BOM 浏览器对象模型

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window，BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

比较项	DOM（文档对象模型）	BOM（浏览器对象模型）
定义	将文档视为一个对象进行操作	将浏览器视为一个对象进行操作
顶级对象	document	window
学习重点	操作和管理页面元素	浏览器窗口交互及相关操作
标准规范	遵循 W3C 标准规范	由浏览器厂商定义，兼容性较差
范围	专注于文档内容	包含 DOM，范围更广

在这里插入图片描述

2.1 window 对象的常见事件

2.1.1 窗口加载事件

2.1.1.1 onload

window.onload 是窗口加载事件,当文档内容完全加载完成会触发该事件，调用的处理函数。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>load 事件示例</title>
</head>
<body>

    <img id="myImage" src="https://via.placeholder.com/150" alt="示例图片">
    <p id="text">图片还没加载...</p>

    <script>
        // 在 window 完全加载后执行
        window.onload = function() {
            const text = document.getElementById('text');
            text.innerHTML = '页面和图片加载完成！';
        };
    </script>

</body>
</html>

2.1.1.2 DOMContentLoaded

document.addEventListener('DOMContentLoaded',function(){})

当 DOM 加载完成时，会触发 DOMContentLoaded 事件。相比于 onload 事件需要等待页面的所有资源加载完成，DOMContentLoaded 更加高效。对于包含大量图片的页面，onload 的触发可能会较晚，从而影响交互效果和用户体验。因此在需要快速响应用户操作时使用 DOMContentLoaded 事件更加合适。

2.1.2 调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){});

window.onresize 是调整窗口大小加载事件, 只要窗口大小发生像素变化，就会触发这个事件，程序员经常利用这个事件完成响应式布局。

2.2 定时器

window 对象为我们提供了两种非常实用的定时器方法：

setTimeout()：用于在指定时间后执行一次代码或函数。
setInterval()：用于以固定时间间隔重复执行代码或函数。

2.2.1 setTimeout() 定时器

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数，举个例子：

function sayHello() {
  console.log('Hello, world!');
}

window.setTimeout(sayHello, 2000);//2秒之后调用 sayHello

注意事项：

window 可以省略，直接调用定时器方法即可。
延迟时间默认是 0 毫秒，但如果指定时间，必须以毫秒为单位。
为了管理多个定时器，通常会将定时器赋值给一个标识符，以便后续操作。

2.2.2 停止 setTimeout() 定时器

clearTimeout() 方法能够取消先前通过调用 setTimeout() 建立的定时器，举个例子：

const delayedFunction = () => {
  console.log('Delayed function called!');
};

// 创建定时器，延迟 2 秒后调用 delayedFunction
const timeoutID = window.setTimeout(delayedFunction, 2000);

// 取消定时器
window.clearTimeout(timeoutID);

注意事项：

可以省略 window，直接调用定时器方法。
clearTimeout 里面的参数就是定时器的标识符。

2.2.3 setInterval() 定时器

setInterval() 方法会每隔一定时间就去调用一次回调函数，举个例子：

function IntervalFunction() {
  console.log("每秒执行一次");
}

// 每 1000 毫秒调用 IntervalFunction()
window.setInterval(IntervalFunction(), 1000);

注意：

可以省略 window，直接调用定时器方法。
间隔时间默认为 0 毫秒，如果指定时间，必须以毫秒为单位，表示每隔指定的毫秒数自动调用一次函数。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
第一次执行不是立刻执行，而是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

2.2.4 停止 setInterval() 定时器

clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器。

window.clearInterval(intervalID);

注意事项：

可以省略 window，直接调用定时器方法。
clearInterval 里面的参数就是定时器的标识符。

2.3 JS 执行机制

以下代码执行的结果是什么？为什么？

console.log(1);

setTimeout(function () {
	console.log(3);
}, 1000);

console.log(2);

这段代码的输出结果是：

1
2
3

JavaScript 是单线程的，这意味着所有任务需要按顺序排队执行。只有前一个任务完成后，才会执行下一个任务。然而，这种机制可能导致问题：如果某个任务执行时间过长，会阻塞后续任务，影响页面的渲染，从而造成页面卡顿或加载不连贯的现象。为了解决这一问题，JavaScript 引入了异步机制。通过异步优化，可以优先输出关键任务 1 2 ，再在适当的时机执行输出其他任务 3。

2.3.1 简单理解同步和异步

类型	描述
同步	任务按顺序执行，前一个任务完成后才会执行下一个任务，执行顺序与任务排列一致。
异步	长时间任务可以与其他任务同时处理，任务完成后再返回结果，提高程序效率。

2.3.2 同步任务和异步任务

类型	描述
同步任务	所有同步任务都在主线程上执行，形成一个执行栈，按照代码顺序依次执行。
异步任务	任务在主线程之外执行，常见异步任务包括普通事件（如 click、resize）、资源加载（如 load、error）以及定时器（如 setTimeout、setInterval）。

异步任务相关回调函数添加到任务队列中，任务队列也称为消息队列。
在这里插入图片描述

2.3.3 JS 执行机制

优先执行执行栈中的同步任务，按照代码顺序依次执行。
将异步任务放入任务队列中等待执行。
当执行栈中的所有同步任务执行完毕后，系统会按照任务队列中的顺序依次读取异步任务，将其移入执行栈并开始执行，从而结束异步任务的等待状态。

在这里插入图片描述

2.4 location 对象

window 对象提供了一个 location 属性，用于获取或设置窗口的 URL 同时也可用于解析 URL。由于 location 属性返回的是一个对象，因此也被称为 location 对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location 对象示例</title>
</head>
<body>

    <h1>使用 window.location 对象</h1>

    <p>当前页面的 URL 信息：</p>
    <ul>
        <li>完整的 URL: <span id="full-url"></span></li>
        <li>协议: <span id="protocol"></span></li>
        <li>主机名: <span id="hostname"></span></li>
        <li>路径: <span id="pathname"></span></li>
        <li>查询字符串: <span id="search"></span></li>
        <li>哈希值: <span id="hash"></span></li>
    </ul>

    <button onclick="redirect()">点击跳转到百度</button>

    <script>
        // 获取并展示当前页面的 URL 信息
        document.getElementById('full-url').textContent = window.location.href;
        document.getElementById('protocol').textContent = window.location.protocol;
        document.getElementById('hostname').textContent = window.location.hostname;
        document.getElementById('pathname').textContent = window.location.pathname;
        document.getElementById('search').textContent = window.location.search;
        document.getElementById('hash').textContent = window.location.hash;

        // 使用 location 对象来跳转到其他页面
        function redirect() {
            window.location.href = 'https://www.baidu.com'; // 跳转到百度
        }
    </script>

</body>
</html>

在这里插入图片描述

2.4.1 URL

URL 即统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它，URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link // 例子

组成	说明
protocol	通信协议常用的http, ftp, maito等
host	主机（域名） www.itheima.com
port	端口号可选，省略时使用方案的默认端口如http的默认端口为80
path	路径由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符号分隔开来
fragment	片段 #后面内容常见于锚链接错误点

2.4.2 location 对象的属性和方法

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名） www.itheima.com
location.port	返回端口号，如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接错点
location.assign()	跟 href 一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者 f5 如果参数为true 强制刷新 ctrl+f5

2.5 navigator 对象

navigator 对象是 JavaScript 中的一个内置对象，提供了与浏览器相关的信息。它包含了有关浏览器和设备的信息，可用于检测浏览器的功能和特性，并根据不同的浏览器环境进行相应的操作，下面是一些常用的属性和方法：

属性/方法	描述
userAgent	返回浏览器的用户代理字符串，包含浏览器名称、版本号、操作系统等详细信息。
appName	返回浏览器的名称，常见值有 “Netscape”、“Microsoft Internet Explorer”、“Chrome”、“Firefox” 等。
appVersion	返回浏览器的版本号。
platform	返回浏览器运行的平台，如 “Win32”、“Win64”、“MacIntel” 等。
language	返回浏览器的首选语言，通常由操作系统或浏览器设置决定。
cookiesEnabled	返回一个布尔值，表示浏览器是否启用了Cookie。
geolocation	返回一个 Geolocation 对象，用于获取用户的地理位置信息。
userAgentData	返回一个 UserAgentData 对象，提供有关浏览器的更详细信息，如品牌、版本号、移动设备类型等。
registerProtocolHandler()	向浏览器注册自定义的协议处理程序。
javaEnabled()	返回一个布尔值，表示浏览器是否启用了Java。

2.6 history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是 1 前进1个页面如果是 -1 后退 1 个页面

三： PC 端网页特效

3.1 元素偏移量 offset 系列

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置、大小等，offset 系列常用属性：

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素如果父级都没有定位则返回 body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

在这里插入图片描述

3.2 元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

在这里插入图片描述

3.3 元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

在这里插入图片描述

如果浏览器的高度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。

3.4 mouseenter 和 mouseover

当鼠标移动到元素上时就会触发 mouseenter 事件，类似于 mouseover，它们两者之间的差别是

事件	描述
mouseover	鼠标经过自身元素时触发，经过子元素时也会触发。
mouseenter	鼠标仅在进入自身元素时触发，不会触发子元素的事件。

四：本地存储

随着互联网的快速发展，基于网页的应用越来越普遍也变的越来越复杂，为了满足各种各样的需求会经常性在本地存储大量的数据，HTML5 规范提出了相关解决方案，本地存储的特性：

数据存储在用户的浏览器中，无需依赖服务器。
数据的设置和读取非常方便，即使页面刷新也不会丢失。
容量较大，sessionStorage 约 5 M、localStorage 约 20 M
只能存储字符串，若需存储对象，可通过 JSON.stringify() 将对象编码为字符串后存储。

4.1 window.sessionStorage

sessionStorage 特点：

数据的生命周期仅限于当前浏览器窗口，关闭窗口后数据会被清除。
在同一页面或标签页中，数据可以被共享使用。
以键值对的形式存储和操作，使用简单方便。

sessionStorage.setItem(key, value) // 存储数据
sessionStorage.getItem(key) // 获取数据
sessionStorage.removeItem(key) // 删除数据
sessionStorage.clear() // 删除所有数据

4.2 window.localStorage

localStorage 特点：

数据的生命周期是永久的，除非手动删除，否则即使关闭页面或浏览器，数据仍然存在。
支持多个页面之间共享数据。
以键值对的形式存储和操作，使用方便。

localStorage.setItem(key, value) // 存储数据
localStorage.getItem(key) // 获取数据
localStorage.removeItem(key) // 删除数据
localStorage.clear() // 删除所有数据

4.3 案例演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SessionStorage 和 LocalStorage 演示</title>
</head>
<body>
    <h1>SessionStorage 和 LocalStorage 演示</h1>
    <p>打开浏览器控制台 (F12) 查看输出</p>

    <script>
        // 演示 sessionStorage 的使用
        console.log("=== sessionStorage 示例 ===");

        // 设置 sessionStorage 数据
        sessionStorage.setItem("sessionKey", "sessionValue");
        console.log("sessionStorage 设置: sessionKey = sessionValue");

        // 获取 sessionStorage 数据
        let sessionValue = sessionStorage.getItem("sessionKey");
        console.log("sessionStorage 获取: sessionKey =", sessionValue);

/*      // 删除指定的 sessionStorage 数据
        sessionStorage.removeItem("sessionKey");
        console.log("sessionStorage 删除: sessionKey 已删除");

        // 清除所有 sessionStorage 数据
        sessionStorage.setItem("anotherSessionKey", "anotherSessionValue");
        sessionStorage.clear();
        console.log("sessionStorage 清除: 所有数据已清除");
*/ 

        // 演示 localStorage 的使用
        console.log("\n=== localStorage 示例 ===");

        // 设置 localStorage 数据
        localStorage.setItem("localKey", "localValue");
        console.log("localStorage 设置: localKey = localValue");

        // 获取 localStorage 数据
        let localValue = localStorage.getItem("localKey");
        console.log("localStorage 获取: localKey =", localValue);
/*
        // 删除指定的 localStorage 数据
        localStorage.removeItem("localKey");
        console.log("localStorage 删除: localKey 已删除");

        // 清除所有 localStorage 数据
        localStorage.setItem("anotherLocalKey", "anotherLocalValue");
        localStorage.clear();
        console.log("localStorage 清除: 所有数据已清除");
 */       
    </script>
</body>
</html>