JavaScript存储方式Cookie到IndexedDB全解析

Javascript本地存储的方式有哪些？区别及应用场景？

Cookie

存储大小约4KB，每次HTTP请求自动携带，可设置过期时间。适用于会话管理、用户标识等小数据存储场景，但频繁请求会增加带宽消耗。

Web Storage

• localStorage：存储大小约5MB，数据永久存储，除非手动清除。适用于长期保存的静态数据（如用户偏好设置）。
• sessionStorage：存储大小约5MB，数据仅在当前会话有效，关闭标签页后清除。适用于临时数据（如表单填写中途保存）。

IndexedDB

存储大小通常超过250MB，支持事务和索引查询。适用于复杂、大量结构化数据（如离线应用缓存）。

Cache API

配合Service Worker缓存网络请求，适用于PWA应用的资源离线存储。

Vue 3中Treeshaking特性是什么？举例说明

Treeshaking指通过静态代码分析移除未使用的代码（Dead Code），减少打包体积。Vue 3的模块化设计支持按需引入。
例如：

import { ref } from 'vue'; // 只打包ref相关代码

若未使用computed，则不会将其打包。

Vue中nextTick的理解与作用

nextTick将回调延迟到下次DOM更新周期后执行，确保操作基于最新的DOM状态。
应用场景：

this.message = '更新';
this.$nextTick(() => {
  console.log(document.getElementById('el').textContent); // 获取更新后的DOM
});

Real DOM与Virtual DOM的区别及优缺点

Real DOM

直接操作浏览器渲染树，更新慢且重绘成本高，但精确控制性强。

Virtual DOM

内存中的轻量DOM表示，通过Diff算法批量更新Real DOM，提升性能，但需要额外内存和计算开销。

React Router中HashRouter和BrowserRouter的区别与原理

HashRouter

使用URL的#部分（如/home#section），无需服务器配置，兼容性好，但SEO不友好。

BrowserRouter

基于HTML5 History API（如/home），需服务器支持重定向，URL更简洁，适合SEO。

React Fiber架构的理解与解决的问题

Fiber将渲染任务拆分为可中断的小任务单元，解决同步渲染导致的页面卡顿问题，支持优先级调度和时间切片。

React类组件与函数组件的区别

类组件：

• 使用生命周期方法和this.state管理状态。
• 适合复杂逻辑和状态管理。

函数组件：

• 通过Hooks（如useState）管理状态，代码更简洁。
• 性能更优，适合无状态或简单交互场景。

TypeScript中的类型断言

类型断言强制指定值的类型，绕过类型检查：

const str: any = 'hello';
const len = (str as string).length;

JavaScript事件代理与应用场景

事件代理利用事件冒泡在父元素处理子元素事件，减少监听器数量。

场景：动态列表项点击（如ul代理li的点击事件）。

防抖与节流的区别及实现

防抖：连续触发时只执行最后一次（如搜索框输入）。

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

节流：固定间隔执行一次（如滚动事件）。

function throttle(fn, interval) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      fn(...args);
      last = now;
    }
  };
}

事件循环的工作原理

事件循环分为宏任务（如setTimeout）和微任务（如Promise）。

执行顺序：同步代码 → 微任务队列清空 → 宏任务队列取一个任务 → 重复。

回流与重绘的触发场景

回流：布局改变（如窗口大小、元素位置）。

重绘：样式改变但不影响布局（如颜色）。优化：避免频繁读写DOM，使用transform替代top/left。

TypeScript泛型的理解与应用场景

泛型创建可复用的类型组件：

function identity<T>(arg: T): T {
  return arg;
}

场景：API响应类型封装、工具函数。

Vue动态添加data属性的问题与解决

直接添加属性非响应式，需使用Vue.set或this.$set：

this.$set(this.data, 'newProp', value);

React中setState的同步/异步性

在React事件处理中为异步（批量更新），在setTimeout或原生事件中为同步。

Vue中keep-alive的应用场景

缓存组件状态，避免重复渲染。场景：标签页切换、表单保存后返回。

React中useMemo与useCallback的区别

useMemo缓存计算结果，useCallback缓存函数本身。

const memoValue = useMemo(() => compute(a), [a]);
const memoFn = useCallback(() => compute(a), [a]);

Redux的工作原理

单向数据流：
Action → Dispatch → Reducer → Store → View。

解决组件间状态共享问题，支持中间件扩展。

React合成事件

封装原生事件，提供跨浏览器一致性，事件委托到根容器，提升性能。

JavaScript数字精度丢失问题与解决

原因：浮点数IEEE 754标准存储导致（如0.1 + 0.2 !== 0.3）。

解决：

• 使用toFixed(2)格式化显示。
• 转为整数运算后再除法（如(0.1*10 + 0.2*10)/10）。

总结 

到此这篇关于JavaScript存储方式Cookie到IndexedDB的文章就介绍到这了,更多相关JS存储方式Cookie到IndexedDB内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论