21 lines
28 KiB
HTML
21 lines
28 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-book4/browser-local-storage">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-beta.18">
|
||
<link rel="search" type="application/opensearchdescription+xml" title="HZFE - 剑指前端 Offer" href="/awesome-interview/opensearch.xml">
|
||
<link rel="preconnect" href="https://hm.baidu.com">
|
||
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script>
|
||
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async data-ad-client="ca-pub-9889934432771967"></script>
|
||
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9889934432771967" async crossorigin="anonymous"></script><title data-rh="true">本地存储方式及场景 | HZFE - 剑指前端 Offer</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://febook.hzfe.org/awesome-interview/book4/browser-local-storage"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="本地存储方式及场景 | HZFE - 剑指前端 Offer"><meta data-rh="true" name="description" content="相关问题"><meta data-rh="true" property="og:description" content="相关问题"><link data-rh="true" rel="icon" href="/awesome-interview/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://febook.hzfe.org/awesome-interview/book4/browser-local-storage"><link data-rh="true" rel="alternate" href="https://febook.hzfe.org/awesome-interview/book4/browser-local-storage" hreflang="en"><link data-rh="true" rel="alternate" href="https://febook.hzfe.org/awesome-interview/book4/browser-local-storage" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://PED5MQGL7T-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.62902d4b.css">
|
||
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.16895322.js" as="script">
|
||
<link rel="preload" href="/awesome-interview/assets/js/main.a6349f88.js" as="script">
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top navbarHideable_ObN2"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/awesome-interview/"><div class="navbar__logo"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_W2Cr themedImage--light_TfLj"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_W2Cr themedImage--dark_oUvU"></div><b class="navbar__title">剑指前端 Offer</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/hzfe/awesome-interview" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="searchBox_qEbK"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><div class="docPage_P2Lg"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><aside class="theme-doc-sidebar-container docSidebarContainer_rKC_"><div class="sidebar_RiAD sidebarWithHideableNavbar_d0QC"><a tabindex="-1" class="sidebarLogo_YUvz" href="/awesome-interview/"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_W2Cr themedImage--light_TfLj"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_W2Cr themedImage--dark_oUvU"><b>剑指前端 Offer</b></a><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/awesome-interview/about">关于我们</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/awesome-interview/">前言</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/awesome-interview/book1/browser-cross-origin">模拟题一</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/awesome-interview/book2/browser-render-mechanism">模拟题二</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/awesome-interview/book3/browser-event-loop">模拟题三</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" aria-expanded="true" href="/awesome-interview/book4/browser-router">模拟题四</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/browser-router">浏览器：前端路由实现</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/awesome-interview/book4/browser-local-storage">浏览器：本地存储方式及场景</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/engineer-front-end-testing">工程化：如何对前端代码实施测试</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/engineer-mfa">工程化：谈谈微前端</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/frame-react-event-mechanism">框架：React 事件机制原理</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/frame-react-vs-vue">框架：谈谈 React 和 Vue 的区别</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/js-ts-generics">基础：什么是 TypeScript 泛型</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/css-vertical-horizontal-center">样式：水平垂直居中方案</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/coding-apply-call-bind">编码：实现 apply/call/bind</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/awesome-interview/book4/array-repeat-number">算法：找到数组中重复的数字</a></li></ul></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_FykI"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_DTRl"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></aside><main class="docMainContainer_TCnq"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_DM6M"><div class="docItemContainer_vinB"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Xlws" aria-label="breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/awesome-interview/">🏠</a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><span class="breadcrumbs__link" itemprop="item name">模拟题四</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="item name">浏览器：本地存储方式及场景</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_jdIR theme-doc-toc-mobile tocMobile_TmEX"><button type="button" class="clean-btn tocCollapsibleButton_Fzxq">On this page</button></div><div class="theme-doc-markdown markdown"><h1>本地存储方式及场景</h1><h2 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="相关问题">相关问题<a class="hash-link" href="#相关问题" title="Direct link to heading"></a></h2><ul><li>cookie 的优缺点</li><li>cookie、Web Storage 以及 IndexedDB 区别</li></ul><h2 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="回答关键点">回答关键点<a class="hash-link" href="#回答关键点" title="Direct link to heading"></a></h2><p><code>cookie</code> <code>Web Storage</code> <code>IndexedDB</code></p><p>浏览器本地存储主要分为 cookie、Web Storage 以及 IndexedDB。其中 Web Storage 又可以分为 sessionStorage 和 localStorage。</p><ul><li>cookie：为了辨别用户身份而储存在客户端上的数据（通常经过加密）。cookie 通常由服务端生成，客户端维护，主要用于维持用户的状态。cookie 会随请求发送给服务器。</li><li>Web Storage：以键值对的形式来存储数据，提供除 cookie 之外存储会话数据的途径。存储限制大于 cookie。<ul><li>sessionStorage：可存储会话数据。</li><li>localStorage：同域之间，可跨会话的持久存储数据。</li></ul></li><li>IndexedDB：能存储大量结构化数据，适用于高性能搜索场景。</li></ul><h2 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="知识点深入">知识点深入<a class="hash-link" href="#知识点深入" title="Direct link to heading"></a></h2><h3 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="1-cookie">1. cookie<a class="hash-link" href="#1-cookie" title="Direct link to heading"></a></h3><p>cookie 通常由服务端生成，发送到客户端。客户端会将其存储起来，之后请求对应的服务端时带上。cookie 可以用于标识客户端，能够让使用无状态 HTTP 协议的服务器记住状态信息。</p><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="11-使用场景">1.1 使用场景<a class="hash-link" href="#11-使用场景" title="Direct link to heading"></a></h4><ol><li>会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）。</li><li>个性化设置（如用户自定义设置、主题等）。</li><li>浏览器行为跟踪（如跟踪分析用户行为等）。</li></ol><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="12-相关属性">1.2 相关属性<a class="hash-link" href="#12-相关属性" title="Direct link to heading"></a></h4><p>在收到 HTTP 请求时，服务端可以通过在响应头中增加 Set-Cookie 字段来告诉客户端存储对应的 cookie，前端也可以通过 JavaScript 来设置 cookie。之后向相同的服务端发送请求时，存储的 cookie 会作为请求头 Cookie 字段的值一起发送出去。可以通过不同属性的设置来让 cookie 拥有不同的特性：</p><ul><li>Expires 属性用于设置过期时间，Max-Age 用于设置有效时间段，过期后 cookie 会被删除。</li><li>Secure 属性代表 cookie 只会随 HTTPS 请求发送。</li><li>HttpOnly 属性代表 cookie 只用于发送给服务端，无法被 JavaScript 访问。</li><li>Domain 属性设置可接收 cookie 的 hosts，不设置则默认为当前 host。如果设置了 Domain，子域名也被包含在内。</li><li>Path 属性设置可接收 cookie 的 URL path，只有包含指定路径的 url 请求才会带上 cookie。如设置为 “/”，则子路径也包含在内。</li><li>SameSite 属性表示跨域时 cookie 的处理策略，包括 <code>Strict</code>, <code>Lax</code> 和 <code>None</code>。<ul><li>Strcit：cookie 只会在第一方上下文中发送，不会与第三方网站发起的请求一起发送。</li><li>Lax：cookie 允许与顶级导航一起发送，并将与第三方网站发起的 GET 请求一起发送，这也是浏览器的默认值。</li><li>None：cookie 将在所有上下文中发送，即允许跨域发送。使用 None 时，需在最新的浏览器版本中同时使用 Secure 属性，否则会报错。</li></ul></li></ul><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="13-优点">1.3 优点<a class="hash-link" href="#13-优点" title="Direct link to heading"></a></h4><ol><li>简单易用。</li><li>不占用服务器资源。</li><li>可设置过期时间，提升安全性。</li></ol><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="14-缺点">1.4 缺点<a class="hash-link" href="#14-缺点" title="Direct link to heading"></a></h4><ol><li>cookie 会被添加在每个请求中，增加了流量消耗。</li><li>cookie 在 HTTP 请求中是明文传输的，不够安全，使用 HTTPS 可避免该问题。</li><li>cookie 大小限制在 4KB，复杂场景会不够用。</li></ol><h3 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="2-sessionstorage">2. sessionStorage<a class="hash-link" href="#2-sessionstorage" title="Direct link to heading"></a></h3><p>sessionStorage 对象是当前源（和同源策略中的源一致，下同）下，存储会话数据的 Storage 实例。生命周期同当前页面保持一致，页面关闭时 sessionStorage 会被清空。sessionStorage 以键值对的方式存储数据，键值以字符串存储。</p><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="21-特点">2.1 特点<a class="hash-link" href="#21-特点" title="Direct link to heading"></a></h4><ol><li>sessionStorage 只能被当前标签页访问。</li><li>页面 sessionStorage 的生命周期和浏览器行为相关：关闭浏览器或标签页清除 sessionStorage，刷新标签页或恢复浏览器页面时保留 sessionStorage。</li><li>在页面触发打开新页面时，会复制会话上下文作为新会话的上下文。</li><li>复制标签页（浏览器标签右键菜单中的复制，非复制 URL）时会复制当前 sessionStorage 到新的标签页中。</li></ol><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="22-使用场景">2.2 使用场景<a class="hash-link" href="#22-使用场景" title="Direct link to heading"></a></h4><p>sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息。</p><h3 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="3-localstorage">3. localStorage<a class="hash-link" href="#3-localstorage" title="Direct link to heading"></a></h3><p>localStorage 同样也是获取当前源存储的 Storage 对象。存储的数据可以跨浏览器会话访问。</p><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="31-和-sessionstorage-区别">3.1 和 sessionStorage 区别<a class="hash-link" href="#31-和-sessionstorage-区别" title="Direct link to heading"></a></h4><ol><li>localStorage 没有过期时间（隐私窗口中的 localStorage 在最后一个隐私窗口关闭时会被清空）。</li><li>StorageEvent 只能监听同源页面的 localStorage 的改变，无法监听 sessionStorage 的改变。</li></ol><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="32-使用场景">3.2 使用场景<a class="hash-link" href="#32-使用场景" title="Direct link to heading"></a></h4><p>理论上 cookie 无法胜任的，可以用简单的键值对来存取的数据存储任务，都可以使用 localStorage 来处理。</p><h3 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="4-indexeddb">4. IndexedDB<a class="hash-link" href="#4-indexeddb" title="Direct link to heading"></a></h3><p>IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括 File 和 Blob 对象）。该 API 使用索引实现对数据的高性能搜索，使用上接近于数据库。能够解决 Web Storage 在存储大量的结构化数据时存储容量小，搜索速度慢等问题。</p><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="41-特点">4.1 特点<a class="hash-link" href="#41-特点" title="Direct link to heading"></a></h4><ol><li>键值对存储</li><li>遵守同源策略</li><li>支持二进制存储：不仅可以存储字符串，也可以存储 File 或 Blob 对象。</li><li>同步与异步：IndexedDB 操作默认为异步操作。IndexedDB 也有用于 Web Worker 的同步 API，但因为不清楚是都需要目前已从规范中移除，有相关需求时可以引入。</li><li>存储空间大：IndexedDB 的最大存储空间是动态的，取决于硬盘大小，最大空间取决于浏览器的实现。</li></ol><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="42-使用场景">4.2 使用场景<a class="hash-link" href="#42-使用场景" title="Direct link to heading"></a></h4><ol><li>存储数据量很大</li><li>存储数据为结构化数据</li><li>对数据搜索有性能要求</li></ol><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="43-使用须知">4.3 使用须知<a class="hash-link" href="#43-使用须知" title="Direct link to heading"></a></h4><p>IndexedDB 功能虽然很强大，但相关 API 使用起来相对来说比较复杂，需要一定的数据库开发经验，在应对简单场景时开发成本过高。</p><h3 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="5-cookieweb-storagesessionstroagelocalstorage-以及-indexeddb-区别">5. cookie、Web Storage（sessionStroage/localStorage） 以及 IndexedDB 区别<a class="hash-link" href="#5-cookieweb-storagesessionstroagelocalstorage-以及-indexeddb-区别" title="Direct link to heading"></a></h3><p>共同点：都是保存数据于浏览器端，遵循同源策略。</p><p>不同点：生命周期，存储空间最大值及与服务端交互方式。</p><table><thead><tr><th>特性</th><th>cookie</th><th>sessionStorage</th><th>localStorage</th><th>IndexedDB</th></tr></thead><tbody><tr><td>生命周期</td><td>可设置失效时间，默认为浏览器会话结束时清除 cookie</td><td>页面会话结束时清除 sessionStorage</td><td>持久存储</td><td>永久保存</td></tr><tr><td>存储空间最大值</td><td>4KB</td><td>一般为 5MB</td><td>同 sessionStorage</td><td>取决于用户设备容量和浏览器限额设置</td></tr><tr><td>是否与服务端交互</td><td>随请求发送给服务端，可设置多种属性控制</td><td>保存在浏览器端，不与服务端交互</td><td>同 sessionStorage</td><td>保存在浏览器端，不与服务端交互</td></tr></tbody></table><h2 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="拓展阅读">拓展阅读<a class="hash-link" href="#拓展阅读" title="Direct link to heading"></a></h2><h3 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="1-cache-api">1. Cache API<a class="hash-link" href="#1-cache-api" title="Direct link to heading"></a></h3><p>Cache API 为缓存的 Request/Response 对象提供存储机制。Cache API 和 workers 一样，是暴露在 Window 作用域下的，虽然被定义在 service worker 标准中，但是也可以脱离 service worker 单独使用。</p><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="11-特点">1.1 特点<a class="hash-link" href="#11-特点" title="Direct link to heading"></a></h4><ol><li>Window 和 WorkerGlobalScope 都提供了 caches 对象，caches 提供了一系列异步方法，可以创建和操作 Cache 对象。</li><li>一个源可以有多个不同名称的 Cache 对象，同一域名下的 cacheName + Cache 由同一 name to cache map 管理。</li><li>Cache 不能在不同域名之间共享，完全独立于浏览器的 HTTP cache，但同一域名下的 Window 对象和 ServiceWorker 对象可以共用。</li><li>Cache 完全由开发者控制，增加、删除、更新等操作都需要由开发者去执行。由于浏览器都硬性限制了一个域下缓存数据的大小，需要定期清理缓存条目。</li></ol><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="12-使用场景">1.2 使用场景<a class="hash-link" href="#12-使用场景" title="Direct link to heading"></a></h4><p>ServiceWorker 或对离线体验要求较高的场景比较适合使用 Cache API。</p><h4 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="13-使用须知">1.3 使用须知<a class="hash-link" href="#13-使用须知" title="Direct link to heading"></a></h4><ol><li>Cache.put, Cache.add 和 Cache.addAll 只能在 GET 请求下使用。</li><li>自 Chrome 46 版本起，Cache API 不支持 HTTP 请求，只保存 HTTPS 请求。</li><li>匹配算法主要取决于缓存值中的 VARY Header，因此匹配新的 key 时需要查看缓存中条目的键和值。</li></ol><h2 class="anchor anchorWithHideOnScrollNavbar_R0VQ" id="参考资料">参考资料<a class="hash-link" href="#参考资料" title="Direct link to heading"></a></h2><ol><li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage" target="_blank" rel="noopener noreferrer">Client-side storage</a></li><li><a href="https://en.wikipedia.org/wiki/HTTP_cookie" target="_blank" rel="noopener noreferrer">HTTP cookie</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener noreferrer">IndexedDB API</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache" target="_blank" rel="noopener noreferrer">Cache</a></li></ol></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/awesome-interview/book4/browser-router"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">浏览器：前端路由实现</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/awesome-interview/book4/engineer-front-end-testing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">工程化：如何对前端代码实施测试</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_cNA8 thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#相关问题" class="table-of-contents__link toc-highlight">相关问题</a></li><li><a href="#回答关键点" class="table-of-contents__link toc-highlight">回答关键点</a></li><li><a href="#知识点深入" class="table-of-contents__link toc-highlight">知识点深入</a><ul><li><a href="#1-cookie" class="table-of-contents__link toc-highlight">1. cookie</a><ul><li><a href="#11-使用场景" class="table-of-contents__link toc-highlight">1.1 使用场景</a></li><li><a href="#12-相关属性" class="table-of-contents__link toc-highlight">1.2 相关属性</a></li><li><a href="#13-优点" class="table-of-contents__link toc-highlight">1.3 优点</a></li><li><a href="#14-缺点" class="table-of-contents__link toc-highlight">1.4 缺点</a></li></ul></li><li><a href="#2-sessionstorage" class="table-of-contents__link toc-highlight">2. sessionStorage</a><ul><li><a href="#21-特点" class="table-of-contents__link toc-highlight">2.1 特点</a></li><li><a href="#22-使用场景" class="table-of-contents__link toc-highlight">2.2 使用场景</a></li></ul></li><li><a href="#3-localstorage" class="table-of-contents__link toc-highlight">3. localStorage</a><ul><li><a href="#31-和-sessionstorage-区别" class="table-of-contents__link toc-highlight">3.1 和 sessionStorage 区别</a></li><li><a href="#32-使用场景" class="table-of-contents__link toc-highlight">3.2 使用场景</a></li></ul></li><li><a href="#4-indexeddb" class="table-of-contents__link toc-highlight">4. IndexedDB</a><ul><li><a href="#41-特点" class="table-of-contents__link toc-highlight">4.1 特点</a></li><li><a href="#42-使用场景" class="table-of-contents__link toc-highlight">4.2 使用场景</a></li><li><a href="#43-使用须知" class="table-of-contents__link toc-highlight">4.3 使用须知</a></li></ul></li><li><a href="#5-cookieweb-storagesessionstroagelocalstorage-以及-indexeddb-区别" class="table-of-contents__link toc-highlight">5. cookie、Web Storage（sessionStroage/localStorage） 以及 IndexedDB 区别</a></li></ul></li><li><a href="#拓展阅读" class="table-of-contents__link toc-highlight">拓展阅读</a><ul><li><a href="#1-cache-api" class="table-of-contents__link toc-highlight">1. Cache API</a><ul><li><a href="#11-特点" class="table-of-contents__link toc-highlight">1.1 特点</a></li><li><a href="#12-使用场景" class="table-of-contents__link toc-highlight">1.2 使用场景</a></li><li><a href="#13-使用须知" class="table-of-contents__link toc-highlight">1.3 使用须知</a></li></ul></li></ul></li><li><a href="#参考资料" class="table-of-contents__link toc-highlight">参考资料</a></li></ul></div></div></div><div class="row"><div class="col"><div class="react-utterences"><div>Loading script...</div></div></div><div class="col col--3"></div></div></div></main></div></div></div>
|
||
<script src="/awesome-interview/assets/js/runtime~main.16895322.js"></script>
|
||
<script src="/awesome-interview/assets/js/main.a6349f88.js"></script>
|
||
</body>
|
||
</html> |