{"id":589,"date":"2025-12-07T10:08:58","date_gmt":"2025-12-07T02:08:58","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=589"},"modified":"2025-12-07T10:08:58","modified_gmt":"2025-12-07T02:08:58","slug":"%e5%89%8d%e7%ab%af%e5%b8%b8%e8%a7%81%e7%9a%84%e6%95%b0%e6%8d%ae%e7%bc%93%e5%ad%98%e6%96%b9%e6%a1%88%e5%8f%8a%e5%85%b6%e5%ae%9e%e7%8e%b0%e7%bb%86%e8%8a%82","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/07\/%e5%89%8d%e7%ab%af%e5%b8%b8%e8%a7%81%e7%9a%84%e6%95%b0%e6%8d%ae%e7%bc%93%e5%ad%98%e6%96%b9%e6%a1%88%e5%8f%8a%e5%85%b6%e5%ae%9e%e7%8e%b0%e7%bb%86%e8%8a%82\/","title":{"rendered":"\u524d\u7aef\u5e38\u89c1\u7684\u6570\u636e\u7f13\u5b58\u65b9\u6848\u53ca\u5176\u5b9e\u73b0\u7ec6\u8282"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u524d\u7aef\u5e38\u89c1\u7684\u6570\u636e\u7f13\u5b58\u65b9\u6848\u53ca\u5176\u5b9e\u73b0\u7ec6\u8282\uff08\u8d85\u5b8c\u6574\u603b\u7ed3\uff09<\/strong>\uff0c\u6db5\u76d6\u6d4f\u89c8\u5668\u7aef\u6240\u6709\u4e3b\u6d41\u7f13\u5b58\u65b9\u5f0f\uff0c\u5e76\u7ed9\u51fa\u4f18\u7f3a\u70b9\u3001\u4f7f\u7528\u573a\u666f\u3001\u4ee3\u7801\u793a\u4f8b\u4e0e\u6ce8\u610f\u70b9\u3002<\/p>\n\n\n\n

\u5185\u5bb9\u7ed3\u6784\uff1a<\/p>\n\n\n\n

    \n
  1. \u524d\u7aef\u7f13\u5b58\u7684\u6838\u5fc3\u5206\u5c42<\/li>\n\n\n\n
  2. 7 \u5927\u5e38\u7528\u7f13\u5b58\u65b9\u6848<\/li>\n\n\n\n
  3. \u5404\u65b9\u6848\u4f18\u7f3a\u70b9\u5bf9\u6bd4<\/li>\n\n\n\n
  4. \u5e38\u89c1\u7684\u7f13\u5b58\u67b6\u6784\u6700\u4f73\u5b9e\u8df5\uff08\u542b Vue \/ React \uff09<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    \u2705 1. \u524d\u7aef\u7f13\u5b58\u7684\u6838\u5fc3\u5206\u5c42<\/h1>\n\n\n\n

    \u524d\u7aef\u7f13\u5b58\u53ef\u5206\u4e3a\u56db\u5927\u5c42\uff1a<\/p>\n\n\n\n

    \u5c42\u7ea7<\/th>\u6280\u672f<\/th>\u63cf\u8ff0<\/th><\/tr><\/thead>
    HTTP \u7f13\u5b58\u5c42<\/strong><\/td>Cache-Control \/ ETag<\/td>\u6d4f\u89c8\u5668\u81ea\u52a8\u7f13\u5b58\u8d44\u6e90\uff08HTML\/CSS\/JS\/\u56fe\u7247\uff09<\/td><\/tr>
    \u5185\u5b58\u7f13\u5b58<\/strong><\/td>JS \u53d8\u91cf\u3001Vue\/React \u72b6\u6001\u7ba1\u7406<\/td>\u9875\u9762\u5237\u65b0\u5373\u6d88\u5931\uff0c\u4f46\u6700\u5feb<\/td><\/tr>
    \u672c\u5730\u5b58\u50a8<\/strong><\/td>localStorage \/ sessionStorage<\/td>\u7b80\u5355\u7684 key-value \u5b58\u50a8<\/td><\/tr>
    \u6301\u4e45\u5316\u7f13\u5b58<\/strong><\/td>IndexedDB \/ CacheStorage<\/td>\u5b58\u5927\u91cf\u7ed3\u6784\u5316\u6570\u636e\u3001\u79bb\u7ebf\u80fd\u529b\u6700\u5f3a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n

    \u2705 2. \u524d\u7aef\u5e38\u89c1\u4e03\u5927\u7f13\u5b58\u65b9\u6848<\/h1>\n\n\n\n

    \u2460 HTTP \u7f13\u5b58\uff08\u5f3a\u7f13\u5b58 + \u534f\u5546\u7f13\u5b58\uff09<\/strong><\/h2>\n\n\n\n

    \u6d4f\u89c8\u5668\u539f\u751f\u673a\u5236\uff0c\u4e3b\u8981\u9488\u5bf9\u9759\u6001\u8d44\u6e90\u3002<\/p>\n\n\n\n

    \u5f3a\u7f13\u5b58\uff08\u76f4\u63a5\u8fd4\u56de\u7f13\u5b58\uff0c\u4e0d\u53d1\u8bf7\u6c42\uff09<\/h3>\n\n\n\n
      \n
    • Cache-Control: max-age=31536000<\/code><\/li>\n\n\n\n
    • Expires: xxx<\/code><\/li>\n<\/ul>\n\n\n\n

      \u534f\u5546\u7f13\u5b58\uff08\u5411\u670d\u52a1\u7aef\u786e\u8ba4\u662f\u5426\u8fc7\u671f\uff09<\/h3>\n\n\n\n
        \n
      • ETag \/ If-None-Match<\/code><\/li>\n\n\n\n
      • Last-Modified \/ If-Modified-Since<\/code><\/li>\n<\/ul>\n\n\n\n

        \u2714 \u4f18\u70b9\uff1a\u6027\u80fd\u6700\u4f73\uff0c\u7701\u6d41\u91cf
        \u2718 \u7f3a\u70b9\uff1a\u524d\u7aef\u65e0\u6cd5\u7cbe\u51c6\u63a7\u5236\uff0c\u53ea\u9002\u7528\u4e8e\u9759\u6001\u6587\u4ef6<\/p>\n\n\n\n

        \n\n\n\n

        \u2461 \u5185\u5b58\u7f13\u5b58\uff08Memory Cache\uff09<\/strong><\/h2>\n\n\n\n

        \u5b58\u50a8\u5728\u5185\u5b58\uff0c\u9875\u9762\u5173\u95ed\u540e\u6d88\u5931\uff1a<\/p>\n\n\n\n

        \u5178\u578b\u573a\u666f<\/h3>\n\n\n\n
          \n
        • Vue \u4e2d\u7684 store<\/code>\uff08pinia\/vuex\uff09<\/li>\n\n\n\n
        • React \u4e2d\u7684 useState<\/code> \/ useContext<\/code><\/li>\n\n\n\n
        • \u5168\u5c40 JS \u5bf9\u8c61\u7f13\u5b58<\/li>\n<\/ul>\n\n\n\n

          \u793a\u4f8b<\/h3>\n\n\n
          \nconst cache = {};\n\nfunction getData() {\n  if (cache.data) return Promise.resolve(cache.data);\n\n  return fetch('\/api\/data').then(res => {\n    cache.data = res;\n    return res;\n  });\n}\n\n<\/pre><\/div>\n\n\n
          \u2714 \u4f18\u70b9\uff1a\u6700\u5feb\u901f\u3001\u96f6 IO
          \u2718 \u7f3a\u70b9\uff1a\u5237\u65b0\u9875\u9762\u5c31\u6ca1\u4e86<\/p>\n\n\n\n
          \n\n\n\n
          \u2462 localStorage\uff08\u6c38\u4e45\u4fdd\u5b58\uff09<\/strong><\/h2>\n\n\n
          \nlocalStorage.setItem("token", "123456");\nlocalStorage.getItem("token");\nlocalStorage.removeItem("token");\n\n<\/pre><\/div>\n\n\n
          \u7279\u70b9<\/h3>\n\n\n\n
            \n
          • \u6c38\u4e45\u4fdd\u5b58\uff0c\u9664\u975e\u7528\u6237\u624b\u52a8\u6e05\u9664<\/li>\n\n\n\n
          • \u5927\u7ea6 5MB \u5927\u5c0f<\/li>\n\n\n\n
          • \u540c\u6b65 API\uff08\u4f1a\u963b\u585e\u4e3b\u7ebf\u7a0b\uff09<\/li>\n<\/ul>\n\n\n\n
            \u2714 \u7528\u4e8e\u6301\u4e45\u6570\u636e\uff1atoken\u3001\u7528\u6237\u504f\u597d\u8bbe\u7f6e
            \u2718 \u4e0d\u9002\u5408\u5b58\u5927\u91cf\u6570\u636e\uff08\u540c\u6b65\u963b\u585e\uff09<\/p>\n\n\n\n
            \n\n\n\n
            \u2463 sessionStorage\uff08\u4f1a\u8bdd\u7ea7\u522b\u7f13\u5b58\uff09<\/strong><\/h2>\n\n\n
            \nsessionStorage.setItem("step", "2");\n\n<\/pre><\/div>\n\n\n
            \u7279\u70b9\uff1a<\/p>\n\n\n\n
              \n
            • \u6807\u7b7e\u9875\u7ea7\u522b\u72ec\u7acb<\/li>\n\n\n\n
            • \u9875\u9762\u5173\u95ed\u5373\u5931\u6548<\/li>\n<\/ul>\n\n\n\n
              \u2714 \u9002\u5408\uff1a\u8868\u5355\u5206\u6b65\u9aa4\u586b\u5199\u3001\u4e34\u65f6\u72b6\u6001\u4fdd\u6301
              \u2718 \u548c localStorage \u4e00\u6837\u662f\u540c\u6b65 API<\/p>\n\n\n\n
              \n\n\n\n
              \u2464 Cookie\uff08\u5e26\u81ea\u52a8\u9644\u52a0\u529f\u80fd\uff09<\/strong><\/h2>\n\n\n\n
              \u524d\u7aef\uff1a<\/p>\n\n\n
              \ndocument.cookie = "id=123; max-age=3600; path=\/";\n\n<\/pre><\/div>\n\n\n
              \u670d\u52a1\u7aef\u54cd\u5e94\u5934\uff1a<\/p>\n\n\n
              \nSet-Cookie: token=xxx; HttpOnly; Secure; SameSite=Lax\n\n<\/pre><\/div>\n\n\n
              \u7279\u70b9\uff1a<\/p>\n\n\n\n
                \n
              • \u4f1a\u81ea\u52a8\u968f\u8bf7\u6c42\u53d1\u9001\u5230\u670d\u52a1\u7aef<\/li>\n\n\n\n
              • \u6709\u8fc7\u671f\u65f6\u95f4<\/li>\n\n\n\n
              • 4KB \u5de6\u53f3<\/li>\n<\/ul>\n\n\n\n
                \u2714 \u6700\u9002\u5408\uff1asessionID\u3001\u7b80\u5355 token
                \u2718 \u4e0d\u9002\u5408\u5b58\u5927\u91cf\u6570\u636e<\/p>\n\n\n\n
                \n\n\n\n
                \u2465 IndexedDB\uff08\u6d4f\u89c8\u5668\u6570\u636e\u5e93\uff0c\u9002\u5408\u5927\u91cf\u6570\u636e\uff09<\/strong><\/h2>\n\n\n\n
                \u9002\u7528\u573a\u666f\uff1a\u5927\u6570\u636e\u7ed3\u6784\u5316\u5b58\u50a8\u3001\u79bb\u7ebf\u5e94\u7528\u3002<\/p>\n\n\n\n
                \u793a\u4f8b\uff08\u7b80\u5316\u7248\uff09<\/h3>\n\n\n
                \nconst dbRequest = indexedDB.open("MyDB", 1);\n\ndbRequest.onupgradeneeded = function() {\n  const db = dbRequest.result;\n  db.createObjectStore("users", { keyPath: "id" });\n};\n\ndbRequest.onsuccess = function() {\n  const db = dbRequest.result;\n  const tx = db.transaction("users", "readwrite");\n  tx.objectStore("users").put({ id: 1, name: 'Tom' });\n};\n\n<\/pre><\/div>\n\n\n
                \u2714 \u4f18\u70b9<\/p>\n\n\n\n