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

Cookie

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

Web Storage

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

IndexedDB

存儲大小通常超過250MB，支持事務(wù)和索引查詢。適用于復(fù)雜、大量結(jié)構(gòu)化數(shù)據(jù)（如離線應(yīng)用緩存）。

Cache API

配合Service Worker緩存網(wǎng)絡(luò)請求，適用于PWA應(yīng)用的資源離線存儲。

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

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

import { ref } from 'vue'; // 只打包ref相關(guān)代碼

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

Vue中nextTick的理解與作用

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

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

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

Real DOM

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

Virtual DOM

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

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

HashRouter

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

BrowserRouter

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

React Fiber架構(gòu)的理解與解決的問題

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

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

類組件：

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

函數(shù)組件：

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

TypeScript中的類型斷言

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

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

JavaScript事件代理與應(yīng)用場景

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

場景：動態(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)分為宏任務(wù)（如setTimeout）和微任務(wù)（如Promise）。

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

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

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

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

TypeScript泛型的理解與應(yīng)用場景

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

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

場景：API響應(yīng)類型封裝、工具函數(shù)。

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

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

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

React中setState的同步/異步性

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

Vue中keep-alive的應(yīng)用場景

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

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

useMemo緩存計算結(jié)果，useCallback緩存函數(shù)本身。

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

Redux的工作原理

單向數(shù)據(jù)流：
Action → Dispatch → Reducer → Store → View。

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

React合成事件

封裝原生事件，提供跨瀏覽器一致性，事件委托到根容器，提升性能。

JavaScript數(shù)字精度丟失問題與解決

原因：浮點數(shù)IEEE 754標(biāo)準(zhǔn)存儲導(dǎo)致（如0.1 + 0.2 !== 0.3）。

解決：

• 使用toFixed(2)格式化顯示。
• 轉(zhuǎn)為整數(shù)運算后再除法（如(0.1*10 + 0.2*10)/10）。

總結(jié) 

到此這篇關(guān)于JavaScript存儲方式Cookie到IndexedDB的文章就介紹到這了,更多相關(guān)JS存儲方式Cookie到IndexedDB內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論