在JavaScript中，有多种方法可以用来遍历数组或对象的属性。以下是三种常见的循环方法：forEach、for-in 和 for-of。每种方法都有其特定的用途和适用场景。1. forEachforEach 方法用于遍历数组中的每一个元素，并为每个元素执行一次提供的回调函数。语法：array.forEach(function(currentValue, index, array) { // 你的迭代逻辑 });示例：const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number, index) => { console.log(`Index: ${index}, Value: ${number}`); });特点：forEach 不会改变原数组。没有返回值（返回 undefined）。不能使用 break 或 continue 语句来中断循环。2. for-infor-in 循环用于遍历对象的可枚举属性（包括原型链上的属性，除非使用 hasOwnProperty 方法进行过滤）。语法：for (let key in object) { // 你的迭代逻辑 }示例：const person = { name: 'Alice', age: 25, city: 'New York' }; for (let key in person) { if (person.hasOwnProperty(key)) { console.log(`${key}: ${person[key]}`); } }特点：遍历对象的可枚举属性。枚举顺序不是按照属性在对象中出现的顺序。可以遍历到对象原型链上的属性。3. for-offor-of 循环用于遍历可迭代对象（包括数组、字符串、Map、Set 等）的值。语法：for (let value of iterable) { // 你的迭代逻辑 }示例：const numbers = [1, 2, 3, 4, 5]; for (let number of numbers) { console.log(number); } // 字符串 const str = 'Hello'; for (let char of str) { console.log(char); }特点：直接遍历可迭代对象的值。适用于数组、字符串、Map、Set 等。可以使用 break、continue 和 return 语句来中断循环。总结**forEach**：适用于遍历数组，不能中断循环，没有返回值。**for-in**：适用于遍历对象的可枚举属性，包括原型链上的属性（需要过滤）。**for-of**：适用于遍历可迭代对象的值，可以中断循环，适用于数组、字符串、Map、Set 等。选择哪种循环方法取决于你的具体需求和数据类型。

节流（Throttling）和防抖（Debouncing）是两种常用的优化函数执行频率的技术。节流（Throttling）: 控制一定时间内函数的执行次数。function throttle(fn, wait) { let timeout = null; return function() { let context = this; let args = arguments; if (!timeout) { timeout = setTimeout(() => { fn.apply(context, args); timeout = null; }, wait); } }; }// 使用示例 window.addEventListener('resize', throttle(function() { console.log(window.innerWidth, window.innerHeight); }, 200));防抖（Debouncing）: 当持续触发事件时，一定时间内只执行最后一次。function debounce(fn, wait) { let timeout = null; return function() { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); let callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait); if (callNow) fn.apply(context, args); }; }// 使用示例 window.addEventListener('resize', debounce(function() { console.log(window.innerWidth, window.innerHeight); }, 200));节流通过设置一个timeout控制函数执行的频率，防抖通过清除已经设置的timeout再次执行函数。

在Javascript生产环境中防止代码被调试是一个复杂但重要的任务，它有助于保护代码逻辑、敏感数据和业务逻辑不被轻易窥探或篡改。以下是一些常用的方法和策略：1. 代码混淆与加密代码混淆：通过改变代码的结构而不改变其功能，使得代码难以被人类阅读和理解。这包括改变变量名、函数名、删除空格和注释、改变控制流等。混淆后的代码对于调试器来说更难分析。代码加密：将JavaScript代码进行加密处理，然后在运行时通过解密函数来执行。这增加了分析和调试的难度，因为调试器无法直接看到原始的代码逻辑。需要注意的是，加密应确保是可逆的，以便在需要时能够正确解密并执行代码。2. 使用防调试技术检测调试器：通过检测浏览器是否开启了调试工具，如检查特定的全局变量或函数是否被修改或注入。一旦发现调试器，可以采取相应的措施，如抛出错误、终止代码执行或重定向页面等。自毁代码：在检测到调试器时，让代码自我销毁或变得不可执行。这可以通过抛出异常、修改关键变量或函数、甚至完全清空代码内容来实现。3. 利用JavaScript特性try-catch语句：在敏感代码块中使用try-catch语句来捕获异常，并防止调试器中断程序的执行。这可以防止调试器在敏感代码处停止执行。eval函数：虽然eval函数的使用存在安全风险，但在某些情况下，它可以用来隐藏代码的执行逻辑，使得调试器难以追踪。然而，需要谨慎使用，因为eval函数会执行传入的任何字符串作为代码，这可能导致安全问题。4. 服务器端验证与防护敏感操作验证：对于涉及敏感数据的操作，如数据库查询、API调用等，应在服务器端进行严格的验证和防护。确保客户端的请求符合预期，并且无法被轻易伪造或篡改。监控与日志：对生产环境中的JavaScript代码执行情况进行监控，并记录详细的日志。这有助于及时发现并响应潜在的调试或攻击行为。5. 外部库和工具使用防调试库：有一些JavaScript库可以帮助识别和防止调试器的使用，如AntiDebug.js和Detectify等。这些库通常提供了丰富的API和配置选项，可以根据实际需求进行定制。6. 安全最佳实践遵循安全编码规范：遵循业界公认的安全编码规范，如OWASP Top 10等，以减少代码中的安全漏洞和弱点。定期安全审计：对生产环境中的JavaScript代码进行定期的安全审计，以发现和修复潜在的安全问题。需要注意的是，尽管这些方法可以在一定程度上提高JavaScript代码的安全性并防止被调试，但它们并不是绝对安全的。因此，在开发过程中应综合考虑多种策略和方法，以确保代码的安全性。同时，也应持续关注最新的安全漏洞和攻击技术，以便及时调整和优化防护措施。

在CSS中，直接通过marginTop属性减去元素自身高度的一半并不是直接支持的，因为CSS本身并不提供直接计算元素尺寸（如高度）并在样式中动态应用这些计算结果的机制。不过，你可以通过一些技巧来实现类似的效果，尤其是在你想要垂直居中某个元素时。方法一：使用Flexbox如果你的布局允许，使用Flexbox是最简单且最强大的方法之一来实现垂直居中。你不需要知道元素的确切高度，Flexbox会为你处理这些。<div class="flex-container"> <div class="centered-child">我是居中的元素</div> </div> <style> .flex-container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中（如果需要）*/ height: 100vh; /* 示例：容器高度为视窗高度 */ } .centered-child { /* 你的样式 */ } </style>方法二：使用CSS Grid与Flexbox类似，CSS Grid也提供了强大的布局能力，包括垂直居中。<div class="grid-container"> <div class="centered-child">我是居中的元素</div> </div> <style> .grid-container { display: grid; place-items: center; /* 简写，同时设置justify-items和align-items为center */ height: 100vh; /* 示例：容器高度为视窗高度 */ } .centered-child { /* 你的样式 */ } </style>方法三：使用绝对定位和transform（适用于已知或未知高度）如果你需要更传统的解决方案，并且希望手动控制元素的位置，可以使用绝对定位和transform属性。这种方法的好处是，它不需要你事先知道元素的确切高度。<div class="positioned-container"> <div class="absolutely-centered">我是居中的元素</div> </div> <style> .positioned-container { position: relative; height: 100vh; /* 示例：容器高度 */ } .absolutely-centered { position: absolute; top: 50%; transform: translateY(-50%); /* 向上移动自身高度的一半 */ /* 其他样式 */ } </style>这种方法通过transform: translateY(-50%);实现了向上移动元素自身高度的一半，从而实现了垂直居中的效果。这是处理未知高度元素垂直居中的常用技巧。

在React中全局改变字体大小可以通过多种方式实现，但最直接和常用的方法是通过CSS或CSS-in-JS库（如styled-components, emotion等）来设定全局样式。以下是一些实现方法：方法1：使用全局CSS文件创建全局CSS文件：在你的项目中创建一个全局的CSS文件，比如命名为global.css。设置全局字体大小：在global.css中，使用*选择器或者html选择器来设置全局字体大小，并可以进一步设置body或其他元素的具体字体大小。/* global.css */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; /* 基础字体大小 */ } body { font-family: Arial, sans-serif; line-height: 1.6; }在React项目中引入全局CSS：确保在你的React项目的入口文件（如index.js或App.js）中引入了这个全局CSS文件。如果你使用的是Create React App，可以通过在src/index.js或src/App.js的顶部添加import './global.css';来实现。方法2：使用CSS变量（自定义属性）如果你想要更灵活地控制字体大小（例如，根据不同屏幕尺寸改变字体大小），你可以使用CSS自定义属性（也称为CSS变量）。在全局CSS中定义变量：/* global.css */ :root { --base-font-size: 16px; } html { font-size: var(--base-font-size); } @media (min-width: 768px) { :root { --base-font-size: 18px; } }引入CSS文件：同上，确保在你的React项目中引入了global.css。方法3：使用CSS-in-JS库如果你倾向于使用CSS-in-JS库，如styled-components或emotion，你可以在根组件或全局样式组件中设置字体大小。使用styled-components// GlobalStyles.js import { createGlobalStyle } from 'styled-components'; const GlobalStyles = createGlobalStyle` :root { --base-font-size: 16px; } html { font-size: var(--base-font-size); } @media (min-width: 768px) { :root { --base-font-size: 18px; } } `; export default GlobalStyles; // App.js import React from 'react'; import GlobalStyles from './GlobalStyles'; function App() { return ( <> <GlobalStyles /> {/* 其他组件 */} </> ); } export default App;以上就是在React中全局改变字体大小的几种方法。选择哪种方法取决于你的项目需求和个人偏好。

在TypeScript（以及JavaScript）中，||（逻辑或操作符）和??（空值合并操作符）都用于处理可能为null或undefined的值，但它们的行为和用途有所不同。|| 逻辑或操作符||操作符用于逻辑或运算，如果它的第一个操作数是truthy（在JavaScript中，除了false、0、""、null、undefined和NaN之外的所有值都被认为是truthy），则返回第一个操作数；否则，返回第二个操作数。重要的是要注意，||并不严格检查null或undefined，而是检查任何被视为falsy的值。因此，如果你使用||来提供一个默认值，而原始值可能是0、""或false（这些值在JavaScript中被视为falsy），那么这些值将会被错误地替换为默认值。?? 空值合并操作符??操作符是一个逻辑操作符，它仅当左侧的表达式结果是null或undefined时，才会返回右侧的表达式。它的主要目的是提供一种更直观的方式来为可能为null或undefined的变量提供一个默认值，而不会错误地替换掉那些被认为是falsy但实际上是有意义的值（如0、""或false）。示例let a = 0; let b = a || 5; // b 将会是 5，因为 0 是 falsy let c = a ?? 5; // c 将会是 0，因为 a 不是 null 或 undefined let d: string | undefined = undefined; let e = d || "default"; // e 将会是 "default"，因为 d 是 falsy let f = d ?? "default"; // f 也会是 "default"，但这里的逻辑更直接地指向了 null 或 undefined 的情况 let g: string | null = null; let h = g || "default"; // h 将会是 "default" let i = g ?? "default"; // i 也会是 "default"，但使用 ?? 更清晰地表达了意图总结来说，虽然||和??在某些情况下看起来可以互换使用，但??在处理可能为null或undefined的值时提供了更精确的控制，并且不会错误地替换掉那些被认为是falsy但实际上有意义的值。

前言在数字化时代，Web应用的安全性成为了不可忽视的重要环节。随着网络攻击手段的不断演进，跨站请求伪造（CSRF）和用户追踪成为了网络安全的两大威胁。为了更有效地保护用户数据，Chrome 51及后续版本引入了SameSite Cookie属性，这是一个旨在增强Web应用安全性的重要特性。本文将深入探讨SameSite Cookie的三种设置类型及其工作原理，帮助开发者更好地理解并应用这一安全特性。SameSite Cookie属性简介SameSite Cookie属性是一个HTTP响应头部字段，用于指定浏览器是否应该允许跨站请求携带Cookie。这一特性通过限制Cookie的发送范围，有效降低了CSRF攻击的风险，并有助于阻止第三方恶意追踪用户行为。SameSite Cookie的三种类型SameSite=None行为描述：当Cookie的SameSite属性设置为None时，该Cookie将在所有跨源请求中发送，其行为类似于没有设置SameSite属性的旧版Cookie。然而，值得注意的是，如果设置了SameSite=None，还必须同时设置Secure属性（即Cookie必须通过HTTPS传输），否则浏览器将忽略SameSite属性，按照旧版行为处理。使用场景：适用于那些确实需要在跨站请求中传递Cookie的场景，如API调用、OAuth认证流程等。SameSite=Lax行为描述：设置为Lax的Cookie将仅在安全的顶级导航上下文（如用户点击链接或提交表单导致的页面跳转）中发送，且这些请求必须是GET请求。对于POST请求、iframe加载、AJAX调用等跨站请求，浏览器将不会发送这些Cookie。使用场景：适用于大多数Web应用，因为它既保证了跨站请求的安全性，又保留了用户在浏览时正常的Cookie传递需求。SameSite=Strict行为描述：设置为Strict的Cookie仅在完全同源的请求中发送，即用户直接在浏览器地址栏中输入网址或通过书签访问网站时。对于任何形式的跨站请求，包括第三方链接、图片加载等，浏览器都不会发送这些Cookie。使用场景：适用于对安全性要求极高的场景，如银行、金融等敏感领域的应用。通过严格限制Cookie的发送，可以最大程度地减少CSRF攻击的风险。开发者应如何应用评估需求：首先，开发者需要评估自己的Web应用是否需要跨站请求传递Cookie。如果不需要，建议将Cookie的SameSite属性设置为Strict。修改服务器配置：在服务器响应中设置Cookie的SameSite属性。这通常需要在HTTP响应头部中添加Set-Cookie字段，并指定SameSite的值。测试与验证：在更改配置后，进行全面的测试以确保应用的功能和安全性不受影响。特别是要注意检查那些依赖跨站请求传递Cookie的功能是否仍然正常工作。关注兼容性：虽然SameSite Cookie属性在主流浏览器中得到了广泛支持，但仍有部分旧版浏览器可能不支持这一特性。因此，开发者需要关注浏览器的兼容性问题，并考虑采取适当的回退措施。结语SameSite Cookie属性的引入是Web安全领域的一项重要进步，它为我们提供了一种简单而有效的方式来减少CSRF攻击的风险并保护用户隐私。作为开发者，我们应该积极学习和应用这一特性，为我们的Web应用筑起一道坚固的安全防线。

在数字化时代，用户体验（UX）和可访问性（Accessibility）成为了网站设计中不可或缺的一部分。随着设备和技术的发展，用户对于个性化体验的需求日益增长，其中之一就是根据用户的偏好自动调整网站的主题颜色。幸运的是，CSS Media Queries 提供了一个强大的特性——prefers-color-scheme，它允许网站根据用户的系统颜色偏好（深色模式或浅色模式）自动切换主题。什么是 prefers-color-scheme？prefers-color-scheme 是一个 CSS 媒体查询特性，它允许网页根据用户的系统颜色偏好（深色模式或浅色模式）来应用不同的样式。这一特性极大地提升了用户体验，因为它允许网站自动适应用户的视觉偏好，无需用户手动切换主题。如何使用 prefers-color-scheme？基本语法prefers-color-scheme 可以与 CSS 的 @media 规则一起使用，来定义在不同颜色偏好下的样式。其基本语法如下：@media (prefers-color-scheme: dark) { /* 深色模式下的样式 */ body { background-color: #333; color: #fff; } } @media (prefers-color-scheme: light) { /* 浅色模式下的样式 */ body { background-color: #fff; color: #333; } } /* 如果没有指定偏好，可以设置一个默认样式 */ body { background-color: #fff; /* 默认浅色模式 */ color: #333; }实际应用在实际应用中，prefers-color-scheme 可以用来改变整个网站的主题，包括背景色、文字颜色、链接颜色、按钮样式等。以下是一个简单的示例，展示了如何为深色和浅色模式设置不同的按钮样式：/* 深色模式按钮 */ @media (prefers-color-scheme: dark) { .button { background-color: #4CAF50; /* 绿色 */ color: #000; border: 1px solid #333; } } /* 浅色模式按钮 */ @media (prefers-color-scheme: light) { .button { background-color: #f44336; /* 红色 */ color: #fff; border: 1px solid #ddd; } } /* 通用样式 */ .button { padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; }注意事项兼容性：虽然大多数现代浏览器都支持 prefers-color-scheme，但在一些旧版浏览器上可能无法正常工作。因此，建议为不支持此特性的浏览器设置一个合理的默认样式。性能考虑：虽然 prefers-color-scheme 的使用对性能影响微乎其微，但在设计网站时仍需考虑整体性能优化。用户控制：虽然 prefers-color-scheme 提供了自动切换主题的能力，但最好也提供用户手动切换主题的功能，以满足用户的个性化需求。结论prefers-color-scheme 是一个强大的 CSS 特性，它允许网站根据用户的系统颜色偏好自动切换主题，从而提升用户体验和可访问性。通过合理使用这一特性，我们可以创建更加智能、更加人性化的网站，让用户在浏览时感到更加舒适和自在。

在JavaScript中，判断一个元素是否无法滚动（即已经滚动到顶部或底部），可以通过检查该元素的scrollTop属性与scrollHeight和clientHeight之间的关系来实现。scrollTop表示元素内部被卷上去的高度，scrollHeight是元素内容的总高度（包括不可见部分），而clientHeight是元素内部的高度，包括padding但不包括border、margin、horizontal scrollbar（如果存在的话）、或::before/::after伪元素的高度。判断元素是否滚动到顶部如果元素已经滚动到顶部，那么scrollTop的值应该为0（或者非常接近0，考虑到可能的浮点数精度问题）。function isScrolledToTop(element) { return element.scrollTop === 0; }判断元素是否滚动到底部要判断元素是否滚动到底部，可以比较scrollTop加上clientHeight是否等于或大于scrollHeight。function isScrolledToBottom(element) { return element.scrollTop + element.clientHeight >= element.scrollHeight; }示例以下是一个简单的示例，展示了如何在一个可滚动的div元素上应用这些函数：HTML:<div id="scrollableDiv" style="height: 200px; overflow-y: auto;"> <!-- 足够的内容以使其可滚动 --> <div style="height: 1000px;">滚动内容...</div> </div> <button onclick="checkScroll()">检查滚动位置</button>JavaScript:function checkScroll() { var scrollableDiv = document.getElementById('scrollableDiv'); if (isScrolledToTop(scrollableDiv)) { console.log('已经滚动到顶部'); } else if (isScrolledToBottom(scrollableDiv)) { console.log('已经滚动到底部'); } else { console.log('在中间位置'); } } function isScrolledToTop(element) { return element.scrollTop === 0; } function isScrolledToBottom(element) { return element.scrollTop + element.clientHeight >= element.scrollHeight; }在这个示例中，我们有一个可滚动的div元素，并添加了一个按钮来检查该元素当前的滚动位置。点击按钮时，会调用checkScroll函数，该函数使用isScrolledToTop和isScrolledToBottom函数来判断元素是否滚动到了顶部或底部，并打印相应的消息到控制台。

在JavaScript中，没有原生的“滚动结束”事件可以直接监听。不过，你可以通过监听滚动事件（scroll）并使用一些技术来模拟一个“滚动结束”或“滚动停止”的行为。这种方法通常涉及到设置一个定时器（setTimeout 或 requestAnimationFrame），当滚动事件触发时重置定时器，定时器到时（即用户停止滚动一段时间后）则认为滚动结束。以下是一个使用setTimeout来实现“滚动结束”事件的示例：let scrollTimeout; // 监听滚动事件 window.addEventListener('scroll', function() { // 如果已经设置了定时器，则清除它 if (scrollTimeout) { clearTimeout(scrollTimeout); } // 设置一个新的定时器，等待一段时间（例如50毫秒）来检测是否停止滚动 scrollTimeout = setTimeout(function() { // 在这里执行你希望在滚动结束时执行的代码 console.log('滚动结束了！'); // 注意：此时你可以放心地更新页面布局或执行重绘等操作 // 清除定时器，尽管在这个场景中不是必须的，因为我们已经执行了回调函数 // 但如果在回调函数中需要重置某些状态，确保不会重复触发，这个清除是有用的 clearTimeout(scrollTimeout); scrollTimeout = null; }, 50); // 可以调整这个值以适应不同的滚动速度或延迟需求 });这个方法的一个好处是它可以适应不同用户的滚动速度。不过，如果你发现即使停止滚动后仍然频繁触发“滚动结束”的逻辑，你可能需要增加延迟时间（即setTimeout中的时间）。此外，还有一个使用requestAnimationFrame的方法，这种方法可能更加精确，尤其是在需要精确控制动画或重绘的时机时。不过，由于requestAnimationFrame设计之初是为了动画而不是检测滚动停止，所以上述的setTimeout方法对于大多数“滚动结束”事件的模拟已经足够好用了。请记得，在用户快速滚动时，这些方法可能不会按预期工作，因为滚动事件可能会在定时器到时之前连续触发，从而重置定时器。但通常情况下，对于用户体验而言，这种方法已经足够好了。

在JavaScript中，不同的存储机制对应着不同的函数或API。以下是您提到的存储机制及其对应的JavaScript函数或API：Cookie：设置Cookie：document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";读取Cookie：通过访问document.cookie属性。会话存储（SessionStorage）：设置会话存储项：sessionStorage.setItem('key', 'value');读取会话存储项：var value = sessionStorage.getItem('key');Indexed DB：Indexed DB是一个复杂的API，不直接对应一个简单的函数。你需要通过一系列步骤来打开数据库、创建对象仓库、进行事务处理以及读写数据。打开数据库：var request = indexedDB.open("MyDatabase", 1);在成功回调中，你可以创建对象仓库、读写数据等。本地存储（LocalStorage）：设置本地存储项：localStorage.setItem('key', 'value');读取本地存储项：var value = localStorage.getItem('key');缓存存储（Cache API）：缓存存储主要通过caches对象来访问，它提供了多个方法用于管理缓存，如open、match、add、addAll、put、delete等。打开缓存：caches.open('my-cache-name').then(function(cache) { /* 使用cache对象 */ });添加请求到缓存：cache.add(request).then(function() { /* 添加成功 */ });每种存储机制都有其特定的用途和限制，选择哪种取决于你的具体需求，如数据量、持久性、浏览器兼容性等。

缓存存储和本地存储是Web开发中常用的两种数据存储方式，它们在多个方面存在区别。以下是对这两种存储方式的详细比较：缓存存储定义与功能：缓存存储是一种临时性的数据存储方式，用于提高网页加载速度。它通过将数据存储在内存或磁盘中，当用户再次访问相同的资源时，浏览器会优先从缓存中读取数据，而不是从服务器重新请求。特点：临时性：缓存的数据通常是临时的，可以在浏览器关闭后自动清除，或者根据HTTP头部信息设置的过期时间来清除。自动管理：缓存的管理大多由浏览器自动完成，用户通常不需要手动干预。性能优化：缓存的主要目的是减少网络请求，提高页面加载速度，优化用户体验。本地存储本地存储通常指的是HTML5 Web Storage API中的localStorage和sessionStorage，以及IndexedDB等存储机制。定义与功能：本地存储是一种持久化的数据存储方式，数据存储在浏览器端，不会随页面刷新或浏览器关闭而消失。它允许网站在用户的浏览器中存储数据，以便在用户重新访问网站时能够恢复之前的状态或数据。特点：持久性：本地存储的数据会长期保存在浏览器中，直到被手动清除或浏览器清除缓存。存储容量：相比cookie，本地存储提供了更大的存储容量（如localStorage和sessionStorage通常提供5MB的存储空间，而IndexedDB的存储空间则更大）。数据安全：本地存储的数据仅在用户的浏览器中可用，不会发送到服务器，除非网站代码显式地这样做。灵活性：本地存储支持存储多种类型的数据，包括字符串、对象等（对于非字符串类型的数据，通常需要使用JSON进行序列化）。缓存存储与本地存储的区别缓存存储本地存储定义与功能临时性数据存储，用于提高网页加载速度持久化数据存储，用于在浏览器中保存数据存储位置内存或磁盘浏览器端（localStorage和sessionStorage在浏览器本地存储，IndexedDB在浏览器数据库中）数据持久性临时性，可自动清除或根据过期时间清除持久性，直到被手动清除或浏览器清除缓存存储容量取决于浏览器和缓存策略较大（如localStorage和sessionStorage通常5MB，IndexedDB更大）数据安全性较低（数据可能被清除）较高（数据仅在用户浏览器中，除非显式发送）应用场景提高页面加载速度，减少网络请求在浏览器中保存用户状态、偏好设置等需要持久保存的数据综上所述，缓存存储和本地存储在定义、功能、存储位置、数据持久性、存储容量、数据安全性和应用场景等方面存在明显的区别。开发人员应根据具体需求选择合适的存储方式。

 大家好，6月份干货合集又来了，本次带来的内容涵盖了，java，Android，html，git，mysql，linux，网络协议，Jenkins等诸多内容供您选择 1.模拟买票小练习-线程资源同步小练习-synchronized使用 https://bbs.huaweicloud.com/forum/thread-02109154511981591054-1-1.html  2.Android Intent-Filter匹配规则解析 https://bbs.huaweicloud.com/forum/thread-02109154511945084053-1-1.html  3.web前端入门面对的git、angular和web开发必备的技术以及前端开发如何的运用技术？ https://bbs.huaweicloud.com/forum/thread-02109154511910212052-1-1.html  4.前端技术分享（html总结） https://bbs.huaweicloud.com/forum/thread-02109154511861684051-1-1.html  5.0基础小白如何玩转前端开发？ https://bbs.huaweicloud.com/forum/thread-02109154466914607049-1-1.html  6.RTSP 和 RTMP通过ffmpeg实现将本地摄像头推流到RTSP服务器-转载 https://bbs.huaweicloud.com/forum/thread-0244153476749248016-1-1.html  7.mysql8.0 性能优化配置 innodb_buffer_pool_size-转载 https://bbs.huaweicloud.com/forum/thread-02109153476715536012-1-1.html  8.linux 服务器无 sudo 权限非 root 用户安装特定版本 cuda -转载 https://bbs.huaweicloud.com/forum/thread-0224153476680638017-1-1.html  9.网络网络层之(6)ICMPv4协议-转载 https://bbs.huaweicloud.com/forum/thread-0273153476617308017-1-1.html  10.Window下SRS服务器的搭建-转载 https://bbs.huaweicloud.com/forum/thread-0264153476579428008-1-1.html  11.探索SRS-GB28181：一款强大的国标GB28181视频服务器-转载 https://bbs.huaweicloud.com/forum/thread-0210153476525852014-1-1.html  12.容器化部署 Jenkins，并配置SSH远程操作服务器-转载 https://bbs.huaweicloud.com/forum/thread-0224153476500551016-1-1.html  13.如何查看ubuntu服务器上防火墙信息-转载 https://bbs.huaweicloud.com/forum/thread-02127153476446295011-1-1.html  14.探索GoServer：高效、易用的Golang服务器框架 -转载 https://bbs.huaweicloud.com/forum/thread-0210153476421991013-1-1.html  15.使用Linux命令修改服务器时间及设置时区-转载 https://bbs.huaweicloud.com/forum/thread-0273153476396290016-1-1.html  16.pg_rman在恢复服务器上恢复源库的备份-转载 https://bbs.huaweicloud.com/forum/thread-0244153476353118015-1-1.html  17.linux之用户和权限-转载     https://bbs.huaweicloud.com/forum/thread-0273153476326497015-1-1.html  18.Linux-查看服务器--硬件配置信息-转载 https://bbs.huaweicloud.com/forum/thread-0273153476291979014-1-1.html  19.Python如何对文件进行重命名操作？-转载 

前言在前端开发中，我们经常需要遍历 DOM 树来查找特定的元素。虽然 querySelector 和 querySelectorAll 是非常强大的工具，但在某些情况下，我们可能只关心当前元素或其祖先元素中最近的一个满足特定条件的元素。这时，JavaScript 的 Element.closest() 方法就派上了用场。closest() 方法是什么closest() 方法返回调用它的元素本身或其最近的祖先元素（包括父元素），该元素匹配给定的选择器字符串。如果没有找到匹配的元素，则返回 null。如何使用 closest()使用 closest() 方法的基本语法如下：element.closest(selectorString);element：你想要开始搜索的 DOM 元素。selectorString：一个 CSS 选择器字符串，用于匹配你想要找到的元素。示例假设我们有以下的 HTML 结构：<div class="container"> <div class="item"> <button id="myButton">点击我</button> </div> <div class="item"> <!-- 其他内容 --> </div> </div>如果我们想要从 myButton 按钮开始，找到最近的带有 container 类的祖先元素，我们可以这样做：document.getElementById('myButton').addEventListener('click', function() { var container = this.closest('.container'); if (container) { console.log('找到了容器元素:', container); } else { console.log('没有找到匹配的容器元素'); } });在这个例子中，当用户点击按钮时，会触发一个事件监听器。该监听器使用 closest() 方法来查找最近的带有 container 类的祖先元素。如果找到了这样的元素，它就会被存储在 container 变量中，并在控制台中打印出来。如果没有找到匹配的元素，则会打印出相应的消息。注意事项closest() 方法从当前元素开始向上搜索 DOM 树，直到找到匹配的元素或到达根元素（通常是 <html> 元素）。如果当前元素本身匹配给定的选择器，那么 closest() 将返回当前元素。如果给定的选择器无效或无法解析，closest() 将抛出一个 SyntaxError。不同于 querySelector() 和 querySelectorAll()，closest() 只返回第一个匹配的元素（如果有的话），而不是一个包含所有匹配元素的 NodeList。总结closest() 方法是 JavaScript 中一个非常有用的工具，它允许我们轻松地找到当前元素或其最近的祖先元素中匹配特定选择器的元素。无论你是在处理事件处理程序、构建复杂的 UI 组件，还是进行任何需要遍历 DOM 树的操作时，它都可以为你节省大量的时间和代码。

 大家好，本次带来的是5月份技术合集，其中包含了JavaScript，java，python，golang，openflow，linux供大家学习交流。 1.正则表达式常见密码验证方式总结大全【转】 https://bbs.huaweicloud.com/forum/thread-0235152528388647043-1-1.html  2.正则表达式中的$分组使用示例详解【转】 https://bbs.huaweicloud.com/forum/thread-0220152528348235034-1-1.html  3.正则表达式匹配双引号常用例子总结【转】 https://bbs.huaweicloud.com/forum/thread-02105152528298749035-1-1.html  4.python和JavaScript的正则表达式详细使用对比【转】 https://bbs.huaweicloud.com/forum/thread-0220152524278914033-1-1.html  5.日期校验 / 时间校验正则表达式深入解析(超实用!)【转】 https://bbs.huaweicloud.com/forum/thread-0297152524193613042-1-1.html  6.Python使用xpath对解析内容进行数据提取【转】 https://bbs.huaweicloud.com/forum/thread-02105152523702186034-1-1.html  7.基于Go实现TCP长连接上的请求数控制【转】 https://bbs.huaweicloud.com/forum/thread-0249152523497606033-1-1.html  8.Golang使用原生http实现中间件的代码详解【转】 https://bbs.huaweicloud.com/forum/thread-0297152523442936041-1-1.html  9.Python中GPU计算的库pycuda的使用【转】 https://bbs.huaweicloud.com/forum/thread-0297152523272604040-1-1.html  10.python打印exception信息的方法【转】 https://bbs.huaweicloud.com/forum/thread-0297152522000640037-1-1.html  11.详解如何利用Python代码删除Word文档空白行【转】 https://bbs.huaweicloud.com/forum/thread-0220152518833622030-1-1.html  12.使用Python和大模型进行数据分析和文本生成【转】 https://bbs.huaweicloud.com/forum/thread-0266152521305596026-1-1.html  13.使用Python进行数据清洗和预处理的实现代码【转】 https://bbs.huaweicloud.com/forum/thread-02127152520239578032-1-1.html  14.使用Python进行物联网设备的控制与数据收集【转】 https://bbs.huaweicloud.com/forum/thread-0235152519161548040-1-1.html  15.利用Python自动化识别与删除Excel表格空白行和列【转】 https://bbs.huaweicloud.com/forum/thread-0249152519105690032-1-1.html  16.通用数据模型 https://bbs.huaweicloud.com/forum/thread-02127152343988086023-1-1.html  17.容器网络 https://bbs.huaweicloud.com/forum/thread-0219152343799742022-1-1.html  18.BFD for openflow https://bbs.huaweicloud.com/forum/thread-02127152343656881022-1-1.html  19.Linux systemd 定时任务 https://bbs.huaweicloud.com/forum/thread-0235152250634012021-1-1.html  20.Linux启动过程以及7种运行级别 https://bbs.huaweicloud.com/forum/thread-0266152250544314007-1-1.html