如何在浏览器中存储数据

在前端开发中,“让浏览器记住一些东西”几乎是所有稍微复杂一点的应用都会遇到的需求:保存用户登录状态、记录偏好设置、缓存接口数据、支持离线应用等。浏览器本地存储做得好,可以显著减少网络请求、提升页面性能和用户体验;做不好,则会很容易出现数据混乱、XS...

前端

跨域

一、跨域问题的本质:同源策略与安全边界1.1 什么是跨域?跨域(Cross-Origin)的核心根源,是浏览器内置的同源策略,指的是浏览器出于安全考虑,限制一个源(Origin)的脚本访问另一个源的资源。这里的”源”由三个要素组成,所谓「同源」,要求...

前端

Agent Skill 与 MCP

Agent Skill什么是 Agent Skill 专业概念:Agent Skill(智能体技能)是一种模块化的能力扩展包,用于增强通用 AI 智能体的功能。它封装了特定领域的指令、元数据和可选资源文件(如脚本、模板、文档),让 AI 在遇到匹配场...

分享会

clsx 和 twMerge 解决 CSS 类名冲突问题

1. clsx 和 twMerge 与函数解析 以下这段代码是现代前端开发(尤其是使用 Tailwind CSS 和 shadcn/ui 的项目中)的一个工具函数。它通过组合两个强大的库,解决了 CSS 类名合并中的冲突和逻辑判断问题。 1...

问题

使用 indexOf 查找对象结合 Pinia 持久化引发的问题

1. 问题最近写代码的时候我遇到一个问题,我在开启了数据持久化的 Pinia 仓库里面写了一个类似“点击切换选中状态”的逻辑:如果数组里没有就 push 进去,有了就 splice 掉。代码如下: 123456789// Pinia 仓库逻辑cons...

问题

Pinia 状态管理

一、为什么要讲 Pinia原因 Vue3 官方推荐的状态管理方案 用来替代 Vuex(Vuex 5 已停止推进) 更符合 Vue3 中 Composition API 的设计理念 比起 Vuex 使用更加方便 vuex 与 pinia 对比...

分享会

选项式 API 与组合式 API 的区别

Vue 作为前端三大框架之一,从 Vue 2到 Vue 3的迭代不仅带来了性能的飞跃,更在代码组织、逻辑复用等核心层面进行了架构升级。其中,选项式 API(Options API)与组合式 API(Composition API)作为两代框架的...

前端

JavaScript Promise

一、为什么需要 Promise?—— 告别回调地狱在 Promise 出现之前,JavaScript 处理异步操作的主流方式是回调函数。比如我们需要按顺序执行三个异步请求(第一个请求的结果作为第二个的参数,第二个的结果作为第三个的参数),代码会变成这...

前端

Vue2 中的 Vuex

##一、为什么需要 Vuex?? 在 Vue2 项目开发中,如果你遇到以下问题,就该考虑使用 Vuex 了: 多个组件共享同一状态(如用户信息、购物车数据),组件间传参层层嵌套,代码冗余且易出错; 不同组件需要修改同一状态,通过事件总线(Even...

前端

捕获、冒泡和事件委托

一、DOM 和 DOM 树DOM 概念:DOM(Document Object Model —— 文档对象模型)是一种将 HTML、XML 文档结构转化为树状对象的编程接口。它把文档里的元素、文本、属性等都变成可操作的 “节点对象”,让编程语言(比如...

分享会
12