[{"data":1,"prerenderedAt":721},["ShallowReactive",2],{"navigation_docs":3,"-web-dev-browser-browser-storage-comprehensive-guide":352,"-web-dev-browser-browser-storage-comprehensive-guide-surround":716},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":215,"body":354,"description":701,"extension":702,"links":703,"meta":704,"navigation":713,"path":216,"seo":714,"stem":217,"__hash__":715},"docs/web_dev/browser/browser-storage-comprehensive-guide.md",{"type":355,"value":356,"toc":688},"minimark",[357,361,365,368,371,375,378,395,401,407,410,443,445,449,460,463,466,492,494,498,501,504,527,538,540,544,547,554,556,560,563,566,590,593,595,599,609,612,614,617,643,645,648,680,682,685],[358,359,215],"h1",{"id":360},"瀏覽器儲存空間完整解析cookielocalstorageindexeddb-到-cache-storage",[362,363,364],"p",{},"在現代前端開發中，「資料要存在哪裡？」其實是一個非常關鍵的設計問題。瀏覽器提供了多種儲存機制，它們看起來都可以存資料，但在容量、生命週期、是否自動送到 server，以及設計目的上都有本質差異。",[362,366,367],{},"如果沒有建立清楚的心智模型，很容易出現錯誤的使用方式，例如把大量 JSON 存進 Cookie，或把登入憑證隨便丟進 localStorage。這篇文章會幫你建立一個完整的架構理解：從整體分類出發，再逐一深入每一種儲存機制的特性與實務用途。",[369,370],"hr",{},[372,373,374],"h2",{"id":374},"瀏覽器儲存空間的整體心智模型",[362,376,377],{},"你可以把瀏覽器中的儲存空間分成兩大類：",[379,380,381,389],"ol",{},[382,383,384,388],"li",{},[385,386,387],"strong",{},"會參與 HTTP 溝通的儲存","：也就是 Cookie。",[382,390,391,394],{},[385,392,393],{},"純前端本地儲存","：包含 localStorage、sessionStorage、IndexedDB 以及 Cache Storage。",[362,396,397,398],{},"最重要的區別只有一個問題：",[385,399,400],{},"這份資料會不會隨著 HTTP request 自動送到 server？",[362,402,403,406],{},[385,404,405],{},"只有 Cookie 會。其他全部都不會。"," 這個差異，會直接影響效能、安全性與設計選擇。",[362,408,409],{},"為了幫助你建立直覺印象，可以用這樣的比喻理解：",[411,412,413,419,425,431,437],"ul",{},[382,414,415,418],{},[385,416,417],{},"Cookie","：是會寄給 server 的小紙條。",[382,420,421,424],{},[385,422,423],{},"localStorage","：是瀏覽器的記事本。",[382,426,427,430],{},[385,428,429],{},"sessionStorage","：是分頁專用記事本。",[382,432,433,436],{},[385,434,435],{},"IndexedDB","：是瀏覽器內建資料庫。",[382,438,439,442],{},[385,440,441],{},"Cache Storage","：是資源快取倉庫。",[369,444],{},[372,446,448],{"id":447},"_1️⃣-cookie唯一會自動送到-server-的儲存方式","1️⃣ Cookie：唯一會自動送到 Server 的儲存方式",[362,450,451,452,456,457,459],{},"Cookie 是瀏覽器最早出現的儲存機制，也是唯一會自動隨 HTTP request 一起送到 server 的資料。當 server 回應時設定 ",[453,454,455],"code",{},"Set-Cookie","，瀏覽器會儲存這份資料。之後每次發送同網域請求時，都會自動附帶 ",[453,458,417],{}," header。",[362,461,462],{},"這就是為什麼 Cookie 常被用來保存登入狀態。其核心特性在於容量非常小（大約 4KB），而且每一次 request 都會被送出。如果你在 Cookie 中放入大量資料，會直接拖慢所有請求的效能。",[362,464,465],{},"此外，Cookie 還可以設定：",[411,467,468,474,480,486],{},[382,469,470,473],{},[385,471,472],{},"過期時間","（Expires / Max-Age）",[382,475,476,479],{},[385,477,478],{},"HttpOnly","（避免被 JavaScript 讀取）",[382,481,482,485],{},[385,483,484],{},"Secure","（只在 HTTPS 傳送）",[382,487,488,491],{},[385,489,490],{},"SameSite","（控制跨站請求行為）",[369,493],{},[372,495,497],{"id":496},"_2️⃣-localstorage最常見的前端儲存方式","2️⃣ localStorage：最常見的前端儲存方式",[362,499,500],{},"localStorage 是瀏覽器提供的 key-value 儲存空間，存在於使用者本機，不會自動送到 server。",[362,502,503],{},"它的特點包括：",[411,505,506,511,517,522],{},[382,507,508],{},[385,509,510],{},"不會參與 HTTP 傳輸",[382,512,513,516],{},[385,514,515],{},"關閉瀏覽器後仍然存在","（永久儲存，除非手動清除）",[382,518,519],{},[385,520,521],{},"容量約 5–10MB",[382,523,524],{},[385,525,526],{},"同一個 domain 可以共用",[362,528,529,530,533,534,537],{},"例如，亮／暗模式切換（Dark Mode）的偏好設定存入 localStorage 是最典型的場景。需注意 localStorage 只能儲存字串，存取 JSON 須經 ",[453,531,532],{},"JSON.stringify()"," 與 ",[453,535,536],{},"JSON.parse()"," 轉換。",[369,539],{},[372,541,543],{"id":542},"_3️⃣-sessionstorage分頁等級的暫存空間","3️⃣ sessionStorage：分頁等級的暫存空間",[362,545,546],{},"sessionStorage 和 localStorage 的 API 幾乎完全相同，但生命週期不同。",[362,548,549,550,553],{},"最大的差別是：",[385,551,552],{},"當該分頁（tab）關閉時，sessionStorage 會立即消失。"," 而且每個分頁的 sessionStorage 是獨立的，彼此不共享。這種特性使它非常適合暫存多步驟流程中的狀態，例如表單填寫進度或臨時 UI 狀態。",[369,555],{},[372,557,559],{"id":558},"_4️⃣-indexeddb真正的瀏覽器資料庫","4️⃣ IndexedDB：真正的瀏覽器資料庫",[362,561,562],{},"如果 localStorage 是記事本，那 IndexedDB 就是完整資料庫。它支援儲存結構化資料，不只字串，還可以存 JSON、Blob、圖片、檔案等大量資料。",[362,564,565],{},"IndexedDB 的特性：",[411,567,568,574,580,585],{},[382,569,570,573],{},[385,571,572],{},"容量很大","（可達數百 MB，依瀏覽器而定）",[382,575,576,579],{},[385,577,578],{},"非同步 API","（不阻塞 UI 渲染）",[382,581,582],{},[385,583,584],{},"支援索引與查詢",[382,586,587],{},[385,588,589],{},"不會自動送到 server",[362,591,592],{},"由於它支援大量資料與查詢功能，因此常用於離線應用、文件儲存、或 PWA 的離線資料存取。",[369,594],{},[372,596,598],{"id":597},"_5️⃣-cache-storageservice-worker-的資源倉庫","5️⃣ Cache Storage：Service Worker 的資源倉庫",[362,600,601,602,605,606],{},"Cache Storage 通常會與 Service Worker 一起出現。它的用途不是儲存任意資料，而是儲存 ",[385,603,604],{},"HTTP response","。它的設計目的只有一個：",[385,607,608],{},"快取網站資源，支援離線存取。",[362,610,611],{},"在 PWA 架構中，Service Worker 會攔截 request，優先從 Cache Storage 讀取資源（HTML, CSS, JS, 圖片等），若沒有再向 server 請求。",[369,613],{},[372,615,616],{"id":616},"工程師必須記住的四個關鍵差異",[379,618,619,625,631,637],{},[382,620,621,624],{},[385,622,623],{},"傳輸","：只有 Cookie 會自動送到 server。",[382,626,627,630],{},[385,628,629],{},"容量","：Cookie \u003C localStorage \u003C IndexedDB。",[382,632,633,636],{},[385,634,635],{},"生命週期","：sessionStorage 隨分頁關閉消失，其他通常為永久儲存（Cookie 可設定）。",[382,638,639,642],{},[385,640,641],{},"型態","：只有 IndexedDB 支援真正的結構化與二進位資料。",[369,644],{},[372,646,647],{"id":647},"實務選擇指南",[411,649,650,656,662,668,674],{},[382,651,652,655],{},[385,653,654],{},"登入 session / Server 驗證"," → 使用 Cookie。",[382,657,658,661],{},[385,659,660],{},"UI 設定 / 使用者偏好"," → 使用 localStorage。",[382,663,664,667],{},[385,665,666],{},"分頁暫存流程 / 臨時狀態"," → 使用 sessionStorage。",[382,669,670,673],{},[385,671,672],{},"大量離線資料 / 複雜結構"," → 使用 IndexedDB。",[382,675,676,679],{},[385,677,678],{},"PWA 快取資源 / 離線資源"," → 使用 Cache Storage。",[369,681],{},[372,683,684],{"id":684},"結語",[362,686,687],{},"瀏覽器提供多種儲存機制，不是為了讓你隨意選擇，而是針對不同層級的需求設計。理解它們的核心差異，能讓你的架構更清晰，也能避免效能與安全問題。只要明確了資料的使用對象、生命週期、容量需求，就能選出最正確的儲存方式。",{"title":689,"searchDepth":690,"depth":690,"links":691},"",2,[692,693,694,695,696,697,698,699,700],{"id":374,"depth":690,"text":374},{"id":447,"depth":690,"text":448},{"id":496,"depth":690,"text":497},{"id":542,"depth":690,"text":543},{"id":558,"depth":690,"text":559},{"id":597,"depth":690,"text":598},{"id":616,"depth":690,"text":616},{"id":647,"depth":690,"text":647},{"id":684,"depth":690,"text":684},"一次搞懂瀏覽器五種常見儲存方式的差異、容量限制、生命週期與實務使用場景，建立清晰的前端儲存心智模型。","md",null,{"tags":705,"category":203,"date":712},[706,707,708,709,710,711],"browser","cookie","localstorage","indexeddb","pwa","frontend","2026-02-13",true,{"title":215,"description":701},"_8tDWtR1CNKZEnka0u22vtPEyTazmXGZlDDZ3FliuWM",[717,719],{"title":209,"path":210,"stem":211,"description":718,"children":-1},"深入了解瀏覽器渲染原理、DOM/Virtual DOM、渲染策略（SSR/CSR）以及瀏覽器存儲技術。",{"title":219,"path":220,"stem":221,"description":720,"children":-1},"掌握高效操作 DOM 的技巧，了解其運作機制，並學習如何優化 Web 應用的效能。",1776690845242]