前端本地存储数据库 IndexedDB 和 Web SQL、Web Storage 的对比
介绍将大量数据储存在客户端，这样可以减少从服务器获取数据的压力，提升用户体验。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；Storage 存储在 5MB 左右，各浏览器不同，而且不提供搜索功能，也不能建立自定义的索引。所以，需要一种新的解决方案在客户端存储数据。
IndexedDB 是一种将数据持久存储在用户浏览器中的方法，它可以创建具有丰富查询能力的 Web 应用程序，并且可以在线和离线工作，它的存储空间比 Storage 大得多，一般来说不少于 250MB，甚至没有上限。IndexedDB 适用于存储大量数据的应用程序（例如，图书馆中的目录）和不需要持续互联网连接即可工作的应用程序（例如，邮件客户端、待办事项列表和记事本）。
同源策略
与大多数 Web 存储解决方案一样，IndexedDB 遵循同源策略。
可以访问相同域内存储的数据，但无法跨不同域访问数据。
第三方窗口内容（例如 <iframe> 内容）可以访问其嵌入来源的 IndexedDB 存储，除非浏览器设置为从不接受第三方 cookie。
面 ...
前端本地存储数据库 IndexedDB 的增删改查
介绍
IndexedDB 是一种浏览器底层 API，目前各浏览器都已支持，兼容性很好。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
特点
IndexedDB 内部采用对象仓库（object store）存放键值对数据。可以存储结构化克隆算法支持的任何对象。每一个数据记录都有对应的主键，主键是独一无二的，并且不能有重复。
使用索引实现对数据的高性能搜索。
IndexedDB API 大部分都是异步的。不会通过返回值提供数据，而是要传递一个回调函数来获取返回值。
同大多数 Web 存储解决方案一样，IndexedDB 遵循同源策略。即可以访问相同域内存储的数据，但无法跨不同域访问数据。
可以存储文件/二进制对象。
在 Web Worker 中可用。
IndexedDB 属于 NoSQL 和事务型面向对象数据库系统。对数据库的所有操作，都要通过事务完成。下面我们通过一个项目管理的增删改查来演示 IndexedDB API 的使用。
连接数据库为了获取数据库的访问权限，需要在 w ...
圣诞即将到来，纯 CSS 制作一个圣诞礼物动画
介绍CSS 动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：
能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。
动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。
让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。通过使用 @keyframes 建立两个或两个以上关键帧来实现动画。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。因为动画的时间设置是通过 CSS 样式定义的，关键帧使用 percentage 来指定动画发生的时间点。0% 表示动画的第一时刻，100% 表示动画的最终时刻。因为这两 ...
Vue3+Vite 中 JSX 的使用方式
介绍JSX（JavaScript 和 XML），是一个 HTML-in-JavaScript 的语法扩展，首先在 React 中被进入。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 是在 JavaScript 语法上的拓展，因此类似于 HTML 的代码可以和 JS 共存。例如：
123const button = <MyButton color="blue" shadowSize={2}> Click Me</MyButton>
该 button 常量称为 JSX 表达式。可以使用它在我们的应用程序中渲染 <MyButton> 标签。浏览器是无法读取直接解析 JSX 的。JSX 表达式经过（ Babel 或 Parcel 之类的工具）编译之后是这样的：
12345React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')
实际上，J ...
✏️修改常见的原生表单控件的默认样式
介绍HTML 原生的表单控件样式在各个浏览器上面由用户代理默认设置样式，如果在页面上应用了其他颜色或主题时，我们通常也相应的更改这些输入框或按钮的颜色或背景，否则会出现颜色与背景或主题不融入的样式不一致问题。
一般而言，HTML 中表单控件的效果都是通过浏览器的 Shadow Dom 创建的，脱离文档主树，不受大环境 CSS 影响，要控制其 UI 只能使用浏览器开发的伪元素 API 接口。并且，只有部分的样式可以重置。而其余的默认样式我们是无法使用浏览器自带的开发工具查看到的，因为其并不属于文档树，只是背后的一棵子树。
针对特定表单控件，浏览器提供了特定的伪元素用来改变样式。
input[type=search]有如下 2 个伪元素可以改变搜索控件的 UI：
::-webkit-search-cancel-button - 搜索框右边的清除按钮，用来清除输入内容，在有内容时才显示。
::-webkit-search-results-button - 搜索框左边的菜单按钮，用来显示历史记录，现在浏览器已经不显示了。
input[type=number]有如下 ...
修改单选框、复选框、下拉框的默认样式
介绍HTML 原生的单选框、复选框元素样式在各个浏览器上面由用户代理默认设置样式，如果在页面上应用了其他颜色或主题时，我们通常也相应的更改这些输入框或按钮的颜色或背景，否则会出现颜色与背景或主题不融入的样式不一致问题。
appearance通常的做法是使用 display: none、绝对定位或隐藏它们，然后使用 :before 或 :after 伪元素实现样式。
从 Chrome 83 开始支持的 appearance CSS 属性提供了更有效的用于控制基于操作系统主题的 UI 控件的原生外观的方法。目前，除了 IE，其他浏览器都已支持，兼容性很好。
单选框1234567891011121314151617181920212223242526<body> <label> <input type="radio" name="contact" value="email" checked>Email </label> <label> <input ...
Koa2 和 Express 的使用对比
介绍服务器端 Web 框架用来：从数据库中获取数据然后显示到一个页面中、确认用户输入的数据以及保存到一个数据库中、检查用户的权限、登陆用户、路由跳转等。
ExpressExpress 是目前最流行的 NodeJS Web 框架（基于使用 Express 的 知名企业 的数量、维护代码库的人数），也是许多其它流行 NodeJS 框架的底层库。它提供了以下机制：
为不同 URL 路径中使用不同 HTTP 动词的请求（路由）编写处理程序。
集成了“视图”渲染引擎，以便通过将数据插入模板来生成响应。
设置常见 web 应用设置，比如用于连接的端口，以及渲染响应模板的位置。
在请求处理管道的任何位置添加额外的请求处理“中间件”。
Koa虽然 Express 的 API 很简单，但是它是基于 ES5 的语法，要实现异步，需要回调。如果异步嵌套层次过多，代码会变得很臃肿。NodeJs 开始支持 ES6 后，Express 的原班团队又基于 ES6 的 Generator 语法重新编写了 Koa 1.0。使用 generator 语法实现异步，类似于下面：
12345678910var koa = ...
Web 应用程序的文件系统写入能力
介绍NodeJS 之前，JS 操作文件只能通过 HTML <input type="file"> 元素或 XMLHttpRequest（或之后的 fetch），来对本地文件进行一些浏览和上传操作。NodeJS 给予了 JS 操作系统底层 API 的能力，但这只能局限在 NodeJS 项目中。
File System Access API 允许直接读取、写入或保存对用户设备上的文件和文件夹的更改。此 API 使开发人员能够构建功能强大的 Web 应用程序，例如 IDE、文本编辑器、图片编辑器和视频编辑器等等。
从 Chrome 86 开始支持 File System Access API，目前只有基于 Chromium 系列的浏览器全面支持，Safari 部分支持（支持读取，不支持写入和保存），而 Firefox 未支持。
下面我们从制作一个网页文本编辑器，来演示文件系统访问 API。
读取文件大多数与文件和目录的交互都是通过句柄（FileSystemHandle 的子类）完成的。获取句柄的方法通常是 window.showOpenFilePicker ...
不使用 input file 元素，JS 如何操作文件
介绍NodeJS 之前，JS 操作文件只能通过 HTML <input type="file"> 元素或 XMLHttpRequest（或之后的 fetch），来对本地文件进行一些浏览和上传操作。NodeJS 给予了 JS 操作系统底层 API 的能力，但这只能局限在 NodeJS 项目中。
从 Chrome 86 开始，在浏览器中 File System Access API 提供了 JS 操作文件的能力，目前只有基于 Chromium 系列的浏览器全面支持，Safari 部分支持，而 Firefox 未支持。该 API 允许读取文件、写入或保存文件以及访问目录结构，包括本地文件系统和网络文件系统。
接口大多数与文件和目录的交互都是通过句柄（FileSystemHandle 的子类）完成的。FileSystemHandle 有两个子类：FileSystemFileHandle 和 FileSystemDirectoryHandle，分别用于文件和目录。
获取句柄的方法通常是 window.showOpenFilePicker 和 window.sho ...
如何更简单地更改 input type=file 文件选择框的样式
介绍HTML 原生的 <input type="file"> 文件选择框元素样式在各个浏览器上面由用户代理默认设置样式，如果在页面上应用了其他颜色或主题时，我们通常也相应的更改这些输入框或按钮的颜色或背景，否则会出现颜色与背景或主题不融入的样式不一致问题。
通常的做法是隐藏文件选择输入框，然后使用 <label> 元素模拟文件选择框，点击 <label> 元素就会自动触发文件选择输入框的点击选择行为，再通过监听文件选择框的 change 事件还可以将文件信息显示在页面上。HTML 结构示意如下：
12345678910111213141516171819202122232425262728293031323334353637383940<body> <label for="fileInput">Choose a file to upload</label> <input id="fileInput" onchange="updateFi ...