Javascript本地存儲的方式有哪些？區(qū)別及應用場景？

Cookie

存儲大小約4KB，每次HTTP請求自動攜帶，可設置過期時間。適用于會話管理、用戶標識等小數據存儲場景，但頻繁請求會增加帶寬消耗。

Web Storage

• localStorage：存儲大小約5MB，數據永久存儲，除非手動清除。適用于長期保存的靜態(tài)數據（如用戶偏好設置）。
• sessionStorage：存儲大小約5MB，數據僅在當前會話有效，關閉標簽頁后清除。適用于臨時數據（如表單填寫中途保存）。

IndexedDB

存儲大小通常超過250MB，支持事務和索引查詢。適用于復雜、大量結構化數據（如離線應用緩存）。

Cache API

配合Service Worker緩存網絡請求，適用于PWA應用的資源離線存儲。

Vue 3中Treeshaking特性是什么？舉例說明

Treeshaking指通過靜態(tài)代碼分析移除未使用的代碼（Dead Code），減少打包體積。Vue 3的模塊化設計支持按需引入。
例如：

import { ref } from 'vue'; // 只打包ref相關代碼

若未使用computed，則不會將其打包。

Vue中nextTick的理解與作用

nextTick將回調延遲到下次DOM更新周期后執(zhí)行，確保操作基于最新的DOM狀態(tài)。
應用場景：

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

Real DOM與Virtual DOM的區(qū)別及優(yōu)缺點

Real DOM

直接操作瀏覽器渲染樹，更新慢且重繪成本高，但精確控制性強。

Virtual DOM

內存中的輕量DOM表示，通過Diff算法批量更新Real DOM，提升性能，但需要額外內存和計算開銷。

React Router中HashRouter和BrowserRouter的區(qū)別與原理

HashRouter

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

BrowserRouter

基于HTML5 History API（如/home），需服務器支持重定向，URL更簡潔，適合SEO。

React Fiber架構的理解與解決的問題

Fiber將渲染任務拆分為可中斷的小任務單元，解決同步渲染導致的頁面卡頓問題，支持優(yōu)先級調度和時間切片。

React類組件與函數組件的區(qū)別

類組件：

• 使用生命周期方法和this.state管理狀態(tài)。
• 適合復雜邏輯和狀態(tài)管理。

函數組件：

• 通過Hooks（如useState）管理狀態(tài)，代碼更簡潔。
• 性能更優(yōu)，適合無狀態(tài)或簡單交互場景。

TypeScript中的類型斷言

類型斷言強制指定值的類型，繞過類型檢查：

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

JavaScript事件代理與應用場景

事件代理利用事件冒泡在父元素處理子元素事件，減少監(jiān)聽器數量。

場景：動態(tài)列表項點擊（如ul代理li的點擊事件）。

防抖與節(jié)流的區(qū)別及實現(xiàn)

防抖：連續(xù)觸發(fā)時只執(zhí)行最后一次（如搜索框輸入）。

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

節(jié)流：固定間隔執(zhí)行一次（如滾動事件）。

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

事件循環(huán)的工作原理

事件循環(huán)分為宏任務（如setTimeout）和微任務（如Promise）。

執(zhí)行順序：同步代碼 → 微任務隊列清空 → 宏任務隊列取一個任務 → 重復。

回流與重繪的觸發(fā)場景

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

重繪：樣式改變但不影響布局（如顏色）。優(yōu)化：避免頻繁讀寫DOM，使用transform替代top/left。

TypeScript泛型的理解與應用場景

泛型創(chuàng)建可復用的類型組件：

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

場景：API響應類型封裝、工具函數。

Vue動態(tài)添加data屬性的問題與解決

直接添加屬性非響應式，需使用Vue.set或this.$set：

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

React中setState的同步/異步性

在React事件處理中為異步（批量更新），在setTimeout或原生事件中為同步。

Vue中keep-alive的應用場景

緩存組件狀態(tài)，避免重復渲染。場景：標簽頁切換、表單保存后返回。

React中useMemo與useCallback的區(qū)別

useMemo緩存計算結果，useCallback緩存函數本身。

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

Redux的工作原理

單向數據流：
Action → Dispatch → Reducer → Store → View。

解決組件間狀態(tài)共享問題，支持中間件擴展。

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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！