{"id":3387,"date":"2024-11-10T08:17:20","date_gmt":"2024-11-10T00:17:20","guid":{"rendered":"https:\/\/fwq.ai\/blog\/3387\/"},"modified":"2024-11-10T08:17:20","modified_gmt":"2024-11-10T00:17:20","slug":"js%e5%a6%82%e4%bd%95%e5%ad%98%e8%b6%85%e9%95%bf%e7%9a%84%e5%ad%97%e7%ac%a6%e4%b8%b2","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/3387\/","title":{"rendered":"js\u5982\u4f55\u5b58\u8d85\u957f\u7684\u5b57\u7b26\u4e32"},"content":{"rendered":"

\n javascript \u8d85\u957f\u5b57\u7b26\u4e32\u5b58\u50a8\u65b9\u6cd5\uff1a\u62c6\u5206\u5b57\u7b26\u4e32\u4e3a\u8f83\u5c0f\u5757\u5e76\u5b58\u50a8\u5728\u6570\u7ec4\u4e2d\u3002\u4f7f\u7528 blob \u5bf9\u8c61\u5b58\u50a8\u4e8c\u8fdb\u5236\u6570\u636e\uff0c\u5305\u62ec\u8d85\u957f\u5b57\u7b26\u4e32\u3002\u4f7f\u7528 indexeddb \u5b58\u50a8\u5927\u91cf\u7684\u952e\u503c\u5bf9\u6570\u636e\uff0c\u5305\u62ec\u8d85\u957f\u5b57\u7b26\u4e32\u3002\u4f7f\u7528 web storage api\uff08localstorage \u548c sessionstorage\uff09\u5b58\u50a8\u8d85\u957f\u5b57\u7b26\u4e32\u3002\u4f7f\u7528\u5916\u90e8\u5b58\u50a8\u5e93\uff08\u4f8b\u5982\u4e91\u5b58\u50a8\u6216\u6570\u636e\u5e93\uff09\u5b58\u50a8\u5927\u91cf\u8d85\u957f\u5b57\u7b26\u4e32\u3002\n<\/p><\/blockquote>\n

\"js\u5982\u4f55\u5b58\u8d85\u957f\u7684\u5b57\u7b26\u4e32\u63d2\u56fe\"<\/p>\n

\u5982\u4f55\u4f7f\u7528 JavaScript \u5b58\u50a8\u8d85\u957f\u5b57\u7b26\u4e32<\/strong><\/p>\n

JavaScript \u4e2d\u7684\u5b57\u7b26\u4e32\u6709\u9ed8\u8ba4\u7684\u957f\u5ea6\u9650\u5236\uff0c\u8d85\u8fc7\u6b64\u9650\u5236\u5c06\u5bfc\u81f4\u5b58\u50a8\u548c\u5904\u7406\u95ee\u9898\u3002\u5bf9\u4e8e\u9700\u8981\u5b58\u50a8\u8d85\u957f\u5b57\u7b26\u4e32\u7684\u60c5\u51b5\uff0c\u6709\u51e0\u79cd\u65b9\u6cd5\u53ef\u4ee5\u89e3\u51b3\u6b64\u95ee\u9898\uff1a<\/p>\n

1. \u62c6\u5206\u5b57\u7b26\u4e32<\/strong><\/p>\n

\u5c06\u8d85\u957f\u5b57\u7b26\u4e32\u62c6\u5206\u6210\u8f83\u5c0f\u7684\u5757\u5e76\u5c06\u5176\u5b58\u50a8\u5728\u6570\u7ec4\u4e2d\u3002<\/p>\n

const longString = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\"\n\n\/\/ \u62c6\u5206\u5b57\u7b26\u4e32\nconst chunks = longString.match(\/(.{1,1000})\/gs);<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2. \u4f7f\u7528 Blob \u5bf9\u8c61<\/strong><\/p>\n
Blob \u5bf9\u8c61\u5141\u8bb8\u5b58\u50a8\u5927\u5757\u4e8c\u8fdb\u5236\u6570\u636e\uff0c\u5305\u62ec\u8d85\u957f\u5b57\u7b26\u4e32\u3002<\/p>\n
const blob = new Blob([longString], {type: 'text\/plain'});<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
3. \u4f7f\u7528 IndexedDB<\/strong><\/p>\n
IndexedDB \u662f\u4e00\u4e2a\u6d4f\u89c8\u5668 API\uff0c\u7528\u4e8e\u5b58\u50a8\u5927\u91cf\u7684\u6570\u636e\uff0c\u5305\u62ec\u8d85\u957f\u5b57\u7b26\u4e32\u3002<\/p>\n
\/\/ \u6253\u5f00 IndexedDB \u6570\u636e\u5e93\nconst request = indexedDB.open('my-database');\n\nrequest.onsuccess = function() {\n  const db = request.result;\n\n  \/\/ \u521b\u5efa\u4e00\u4e2a\u4e8b\u52a1\n  const tx = db.transaction('strings', 'readwrite');\n\n  \/\/ \u521b\u5efa\u4e00\u4e2a\u5bf9\u8c61\u5b58\u50a8\n  const store = tx.objectStore('strings');\n\n  \/\/ \u6dfb\u52a0\u8d85\u957f\u5b57\u7b26\u4e32\n  store.put({id: 1, value: longString});\n\n  \/\/ \u63d0\u4ea4\u4e8b\u52a1\n  tx.commit();\n};<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
4. \u4f7f\u7528 Web Storage<\/strong><\/p>\n
Web Storage API \u63d0\u4f9b localStorage \u548c sessionStorage \u5bf9\u8c61\uff0c\u7528\u4e8e\u5728\u6d4f\u89c8\u5668\u4e2d\u5b58\u50a8\u6570\u636e\u3002\u5b83\u4eec\u53ef\u4ee5\u5b58\u50a8\u8d85\u957f\u5b57\u7b26\u4e32\uff0c\u4f46\u53d7\u5230\u6d4f\u89c8\u5668\u9650\u5236\u3002<\/p>\n
\/\/ \u4f7f\u7528 localStorage\nlocalStorage.setItem('long-string', longString);<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
5. \u4f7f\u7528\u5916\u90e8\u5b58\u50a8\u5e93<\/strong><\/p>\n
\u5982\u679c\u60a8\u9700\u8981\u5b58\u50a8\u5927\u91cf\u8d85\u957f\u5b57\u7b26\u4e32\uff0c\u53ef\u4ee5\u4f7f\u7528\u5916\u90e8\u5b58\u50a8\u5e93\uff0c\u4f8b\u5982\u4e91\u5b58\u50a8\u6216\u6570\u636e\u5e93\u3002<\/p>\n
\u7ed3\u8bba<\/strong><\/p>\n
\u4e0a\u8ff0\u65b9\u6cd5\u63d0\u4f9b\u4e86\u89e3\u51b3 JavaScript \u4e2d\u8d85\u957f\u5b57\u7b26\u4e32\u5b58\u50a8\u95ee\u9898\u7684\u66ff\u4ee3\u65b9\u6848\u3002\u9009\u62e9\u6700\u9002\u5408\u7279\u5b9a\u7528\u4f8b\u7684\u65b9\u6cd5\u53d6\u51b3\u4e8e\u5b57\u7b26\u4e32\u7684\u5927\u5c0f\u3001\u6027\u80fd\u8981\u6c42\u548c\u53ef\u7528\u8d44\u6e90\u3002<\/p>\n
\u4ee5\u4e0a\u5c31\u662fjs\u5982\u4f55\u5b58\u8d85\u957f\u7684\u5b57\u7b26\u4e32\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
javascript \u8d85\u957f\u5b57\u7b26\u4e32\u5b58\u50a8\u65b9\u6cd5\uff1a\u62c6\u5206\u5b57\u7b26\u4e32\u4e3a\u8f83\u5c0f\u5757\u5e76\u5b58\u50a8\u5728\u6570\u7ec4\u4e2d\u3002\u4f7f\u7528 blob \u5bf9\u8c61\u5b58\u50a8\u4e8c\u8fdb\u5236\u6570\u636e\uff0c\u5305\u62ec\u8d85\u957f\u5b57\u7b26\u4e32\u3002\u4f7f\u7528 indexeddb \u5b58\u50a8\u5927\u91cf\u7684\u952e\u503c\u5bf9\u6570\u636e\uff0c\u5305\u62ec\u8d85\u957f\u5b57\u7b26\u4e32\u3002\u4f7f\u7528 web storage api\uff08localstorage \u548c sessionstorage\uff09\u5b58\u50a8\u8d85\u957f\u5b57\u7b26\u4e32\u3002\u4f7f\u7528\u5916\u90e8\u5b58\u50a8\u5e93\uff08\u4f8b\u5982\u4e91\u5b58\u50a8\u6216\u6570\u636e\u5e93\uff09\u5b58\u50a8\u5927\u91cf\u8d85\u957f\u5b57\u7b26\u4e32\u3002 \u5982\u4f55\u4f7f\u7528 JavaScript \u5b58\u50a8\u8d85\u957f\u5b57\u7b26\u4e32 JavaScript \u4e2d\u7684\u5b57\u7b26\u4e32\u6709\u9ed8\u8ba4\u7684\u957f\u5ea6\u9650\u5236\uff0c\u8d85\u8fc7\u6b64\u9650\u5236\u5c06\u5bfc\u81f4\u5b58\u50a8\u548c\u5904\u7406\u95ee\u9898\u3002\u5bf9\u4e8e\u9700\u8981\u5b58\u50a8\u8d85\u957f\u5b57\u7b26\u4e32\u7684\u60c5\u51b5\uff0c\u6709\u51e0\u79cd\u65b9\u6cd5\u53ef\u4ee5\u89e3\u51b3\u6b64\u95ee\u9898\uff1a 1. \u62c6\u5206\u5b57\u7b26\u4e32 \u5c06\u8d85\u957f\u5b57\u7b26\u4e32\u62c6\u5206\u6210\u8f83\u5c0f\u7684\u5757\u5e76\u5c06\u5176\u5b58\u50a8\u5728\u6570\u7ec4\u4e2d\u3002 const longString = “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-3387","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/3387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=3387"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/3387\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=3387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=3387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=3387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}