![\"\u5c01\u9762\u4fe1\u606f\u56fe\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261010223258-6acabd1a86188.png\")
<\/p>\n<\/p>\n
\u5728\u8df5\u884c\u300c\u672c\u5730\u4f18\u5148（Local-First）\u300d\u4e0e\u300c\u6570\u636e\u4e3b\u6743\u5b8c\u5168\u5c5e\u4e8e\u7528\u6237\u300d\u7684\u624b\u8d26\u5de5\u5177\u5f00\u53d1\u4e2d，\u6700\u6838\u5fc3\u7684\u4e00\u9053\u5b89\u5168\u751f\u547d\u7ebf\u5c31\u662f：\u6570\u636e\u5bfc\u51fa\u4e0e\u79bb\u7ebf\u5f52\u6863\u5907\u4efd\u3002<\/p>\n
\u7528\u6237\u5728\u4f60\u7684\u79bb\u7ebf\u624b\u8d26\u91cc\u5199\u4e86\u534a\u5e74\u65e5\u8bb0\u3001\u5b58\u4e86\u51e0\u767e\u5f20\u624b\u7ed8\u6c34\u5f69\u63d2\u753b\u4e0e\u5404\u79cd\u5bfc\u51fa\u957f\u56fe，\u6570\u636e\u5168\u90e8\u4fdd\u5b58\u5728\u6d4f\u89c8\u5668\u5e95\u5c42\u7684 IndexedDB \u4e2d\u3002\u8fd9\u65f6\u5019\u7528\u6237\u4f1a\u4ea7\u751f\u4e00\u79cd\u6781\u5176\u5f3a\u70c8\u7684\u672c\u80fd\u8bc9\u6c42：\u300c\u6211\u80fd\u4e0d\u80fd\u628a\u6211\u7684\u6240\u6709\u6570\u636e\u5b8c\u6574\u4e0b\u8f7d\u6210\u4e00\u4e2a\u672c\u5730 .json \u5907\u4efd\u6587\u4ef6，\u5b58\u5230\u6211\u7684 U \u76d8\u6216\u8005\u673a\u68b0\u786c\u76d8\u91cc？\u300d<\/p>\n
\u5728\u8fc7\u53bb，\u5f88\u591a\u524d\u7aef\u5f00\u53d1\u8005\u7684\u5bfc\u51fa\u4ee3\u7801\u90fd\u5199\u5f97\u5f88\u539f\u59cb：<\/p>\n
\/\/ \u6781\u5176\u5371\u9669\u7684\u5185\u5b58\u81ea\u6740\u5f0f\u5bfc\u51fa\u5199\u6cd5
\nconst allData = await localDB.getAllNotes();
\nconst jsonString = JSON.stringify(allData); \/\/ \u5185\u5b58\u77ac\u95f4\u66b4\u6da8！
\nconst blob = new Blob([jsonString], { type: 'application\/json' });
\nconst url = URL.createObjectURL(blob);
\n\/\/ \u6a21\u62df <a> \u6807\u7b7e\u4e0b\u8f7d…<\/p>\n
\u5f53\u6570\u636e\u53ea\u6709\u51e0\u5341\u6761\u65f6，\u8fd9\u6bb5\u4ee3\u7801\u8fd0\u8f6c\u826f\u597d\u3002\u4f46\u5f53\u7528\u6237\u7684\u6570\u636e\u5e93\u81a8\u80c0\u5230\u51e0\u767e\u5146（\u5305\u542b\u9ad8\u5206\u8fa8\u7387\u753b\u4f5c Base64 \u6216\u4e8c\u8fdb\u5236\u50cf\u7d20）\u65f6：<\/p>\n
\u8981\u5b9e\u73b0\u771f\u6b63\u5de5\u4e1a\u7ea7\u7684\u5927\u6570\u636e\u65e0\u611f\u5bfc\u51fa，\u5fc5\u987b\u91c7\u7528\u6d41\u5f0f\u7ba1\u9053\u601d\u60f3（Streams Pipeline）：\u5229\u7528\u73b0\u4ee3 Web \u6807\u51c6\u7684 Web Streams API（ReadableStream + TextEncoderStream），\u914d\u5408\u6e38\u6807（Cursor）\u505a\u5230\u8fb9\u4ece\u6570\u636e\u5e93\u8bfb\u53d6\u3001\u8fb9\u5e8f\u5217\u5316\u5207\u7247\u3001\u8fb9\u6d41\u5f0f\u51b2\u5237\u8fdb\u4e0b\u8f7d\u7ba1\u9053，\u8ba9\u6574\u573a\u6570\u767e\u5146\u7684\u5bfc\u51fa\u8fc7\u7a0b，\u5185\u5b58\u5360\u7528\u6052\u5b9a\u538b\u5236\u5728 5MB \u4ee5\u5185！<\/p>\n
\u4eca\u5929\u8fd9\u7bc7\u6587\u7ae0，\u6211\u5c06\u5e26\u5927\u5bb6\u5b8c\u6574\u624b\u5199\u8fd9\u5957\u57fa\u4e8e Web Streams \u7684\u7eaf\u524d\u7aef\u6d41\u5f0f\u5907\u4efd\u7cfb\u7edf\u3002<\/p>\n
\u4e3a\u4ec0\u4e48\u6d41\u5f0f\u5bfc\u51fa\u80fd\u5f7b\u5e95\u6d88\u706d\u5185\u5b58\u6ea2\u51fa？\u6211\u4eec\u6765\u770b\u4e24\u79cd\u6a21\u5f0f\u5728\u7cfb\u7edf\u5806\u5185\u5b58\u4e2d\u7684\u6d41\u5411\u5bf9\u6bd4：<\/p>\n
+————————————————————-+
\n| Web Streams \u6d41\u5f0f\u5907\u4efd\u7ba1\u9053\u67b6\u6784 |
\n+————————————————————-+
\n| [ IndexedDB \u6e38\u6807\u5e95\u5c42\u6e90 ] |
\n| – \u9010\u6761\u8bfb\u51fa\u5355\u7bc7\u624b\u8d26 (\u907f\u514d\u6279\u91cf\u81a8\u80c0) |
\n| | |
\n| v controller.enqueue(jsonChunk) |
\n| [ ReadableStream \u5b57\u7b26\u6d41 ] |
\n| – \u8f93\u51fa JSON \u6570\u7ec4\u5f00\u5408: "[" -> \u8bb0\u5f551 -> "," -> \u8bb0\u5f552 -> "]"|
\n| | |
\n| v .pipeThrough() |
\n| [ TextEncoderStream \u539f\u751f\u6d41\u5f0f\u8f6c\u7801\u5668 ] |
\n| – \u6beb\u79d2\u7ea7\u8f6c\u6362\u4e3a UTF-8 \u4e8c\u8fdb\u5236 Uint8Array \u5757 |
\n| | |
\n| v .pipeTo() |
\n| [ \u672c\u5730\u6587\u4ef6\u7cfb\u7edf \/ File System Access API \/ \u6d41\u5f0f\u4e0b\u8f7d\u7ba1\u9053 ] |
\n| – \u76f4\u63a5\u5199\u5165\u672c\u5730\u78c1\u76d8 handbook-backup-2026.json! |
\n| * \u5168\u7a0b\u5185\u5b58\u5f00\u9500\u6052\u5b9a\u5728 3MB ~ 5MB，\u5bfc\u51fa 1GB \u6570\u636e\u4e5f\u5982\u4e1d\u822c\u987a\u6ed1! |
\n+————————————————————-+<\/p>\n
\u6211\u4eec\u6765\u52a8\u624b\u5b9e\u73b0\u8fd9\u4e2a\u96f6\u4f9d\u8d56\u7684\u539f\u751f\u6d41\u5f0f\u5907\u4efd\u5f15\u64ce：<\/p>\n
\/\/ stream-backup-exporter.js：\u57fa\u4e8e Web Streams \u7684\u5927\u5bb9\u91cf\u6d41\u5f0f\u5bfc\u51fa\u5f15\u64ce
\nexport class StreamHandbookExporter {
\n constructor(dbInstance) {
\n this.db = dbInstance;
\n }<\/p>\n
\/\/ \u6784\u5efa\u53ea\u8bfb\u624b\u8d26\u6d41
\n createReadableStream() {
\n const db = this.db;<\/p>\n
return new ReadableStream({
\n async start(controller) {
\n \/\/ 1. \u53d1\u9001 JSON \u6570\u7ec4\u7684\u5f00\u7aef\u7b26\u53f7 "["
\n controller.enqueue('[\\\\n');<\/p>\n
const transaction = db.transaction(['notes'], 'readonly');
\n const store = transaction.objectStore('notes');
\n const request = store.openCursor();<\/p>\n
let isFirst = true;<\/p>\n
request.onsuccess = (event) => {
\n const cursor = event.target.result;
\n if (cursor) {
\n \/\/ \u5982\u679c\u4e0d\u662f\u7b2c\u4e00\u6761，\u8ffd\u52a0\u9017\u53f7\u5206\u9694\u7b26
\n const prefix = isFirst ? ' ' : ',\\\\n ';
\n isFirst = false;<\/p>\n
\/\/ \u4ec5\u5bf9\u5f53\u524d\u5355\u6761\u624b\u8d26\u8bb0\u5f55\u8fdb\u884c\u5e8f\u5217\u5316，\u5185\u5b58\u5f00\u9500\u5fae\u4e4e\u5176\u5fae！
\n const jsonChunk = prefix + JSON.stringify(cursor.value);
\n controller.enqueue(jsonChunk);<\/p>\n
\/\/ \u524d\u8fdb\u5230\u4e0b\u4e00\u6761\u8bb0\u5f55
\n cursor.continue();
\n } else {
\n \/\/ 2. \u904d\u5386\u7ed3\u675f，\u5c01\u53e3 JSON \u6570\u7ec4 "]"
\n controller.enqueue('\\\\n]');
\n controller.close();
\n }
\n };<\/p>\n
request.onerror = (event) => {
\n controller.error(new Error(`\u6570\u636e\u5e93\u6e38\u6807\u5f02\u5e38: ${event.target.error}`));
\n };
\n }
\n });
\n }<\/p>\n
\/\/ \u89e6\u53d1\u6d41\u5f0f\u4e0b\u8f7d（\u7ed3\u5408\u73b0\u4ee3 File System Access API \u6216\u517c\u5bb9\u6027\u56de\u9000）
\n async exportToFile(suggestedFileName = 'cozy-handbook-backup.json') {
\n const textStream = this.createReadableStream();<\/p>\n
\/\/ \u5c06\u5b57\u7b26\u4e32\u6d41\u901a\u8fc7\u539f\u751f\u7ba1\u9053\u8f6c\u5316\u4e3a\u4e8c\u8fdb\u5236\u6d41
\n const binaryStream = textStream.pipeThrough(new TextEncoderStream());<\/p>\n
\/\/ \u65b9\u6848 A：\u73b0\u4ee3\u684c\u9762\u7aef File System Access API（Chrome \/ Edge \u7b49，\u771f\u6d41\u5f0f\u76f4\u5199\u78c1\u76d8）
\n if ('showSaveFilePicker' in window) {
\n try {
\n const handle = await window.showSaveFilePicker({
\n suggestedName: suggestedFileName,
\n types: [
\n {
\n description: 'JSON \u624b\u8d26\u5168\u91cf\u5907\u4efd\u6587\u4ef6',
\n accept: { 'application\/json': ['.json'] }
\n }
\n ]
\n });<\/p>\n
const writable = await handle.createWritable();
\n \/\/ \u76f4\u63a5\u5c06\u53ef\u8bfb\u6d41\u5bfc\u5165\u78c1\u76d8\u5199\u5165\u6d41！
\n await binaryStream.pipeTo(writable);
\n console.log('[\u6d41\u5f0f\u5907\u4efd] \u5df2\u901a\u8fc7\u6587\u4ef6\u7cfb\u7edf\u539f\u751f\u6d41\u5f0f\u76f4\u5199\u5b8c\u6210！');
\n return;
\n } catch (err) {
\n if (err.name === 'AbortError') {
\n console.log('[\u6d41\u5f0f\u5907\u4efd] \u7528\u6237\u53d6\u6d88\u4e86\u4fdd\u5b58');
\n return;
\n }
\n console.warn('[\u6d41\u5f0f\u5907\u4efd] FileSystemAPI \u5931\u8d25，\u56de\u9000\u81f3\u517c\u5bb9\u4e0b\u8f7d:', err);
\n }
\n }<\/p>\n
\/\/ \u65b9\u6848 B：\u901a\u7528\u6d4f\u89c8\u5668\u56de\u9000（\u5229\u7528 Response \u5c06\u6d41\u5305\u88c5\u4e3a\u4e0b\u8f7d）
\n const response = new Response(binaryStream);
\n const blob = await response.blob();
\n const downloadUrl = URL.createObjectURL(blob);<\/p>\n
const a = document.createElement('a');
\n a.href = downloadUrl;
\n a.download = suggestedFileName;
\n document.body.appendChild(a);
\n a.click();
\n a.remove();
\n URL.revokeObjectURL(downloadUrl);
\n console.log('[\u6d41\u5f0f\u5907\u4efd] \u517c\u5bb9\u6027\u5bfc\u51fa\u5b8c\u6210！');
\n }
\n}<\/p>\n
\u5728\u624b\u8d26\u8bbe\u7f6e\u9762\u677f\u4e2d，\u7ed9\u7528\u6237\u63d0\u4f9b\u4e00\u4e2a\u6781\u5177\u5b89\u5168\u611f\u7684\u5bfc\u51fa\u6309\u94ae\u4e0e\u72b6\u6001\u53cd\u9988：<\/p>\n
<!– backup-panel.html –>
\n<div class="backup-card">
\n <h4>🍂 \u672c\u5730\u624b\u8d26\u5b89\u5168\u5f52\u6863<\/h4>
\n <p>\u5c06\u4fdd\u5b58\u5728\u60a8\u8bbe\u5907\u4e2d\u7684\u6240\u6709\u65e5\u8bb0\u3001\u63d2\u753b\u4e0e\u6807\u7b7e\u5b8c\u6574\u6d41\u5f0f\u5bfc\u51fa\u4e3a JSON \u5907\u4efd\u6587\u4ef6\u3002<\/p>
\n <button id="exportStreamBtn" class="cozy-btn">\u5f00\u59cb\u65e0\u635f\u6d41\u5f0f\u5bfc\u51fa<\/button>
\n <div id="exportStatus" class="status-msg"><\/div>
\n<\/div><\/p>\n
\/\/ backup-main.js：\u88c5\u914d\u5bfc\u51fa\u5668
\nimport { localDB } from '.\/local-handbook-db.js';
\nimport { StreamHandbookExporter } from '.\/stream-backup-exporter.js';<\/p>\n
const exportBtn = document.querySelector('#exportStreamBtn');
\nconst statusMsg = document.querySelector('#exportStatus');<\/p>\n
exportBtn.addEventListener('click', async () => {
\n exportBtn.disabled = true;
\n statusMsg.textContent = '\u6b63\u5728\u5efa\u7acb\u6d41\u5f0f\u4f20\u8f93\u7ba1\u9053，\u5bfc\u51fa\u671f\u95f4\u53ef\u81ea\u7531\u5207\u6362\u7a97\u53e3…';<\/p>\n
try {
\n const exporter = new StreamHandbookExporter(localDB.db);
\n const fileName = `\u542c\u6c50\u624b\u8d26\u5168\u91cf\u5907\u4efd_${new Date().toISOString().slice(0, 10)}.json`;<\/p>\n
await exporter.exportToFile(fileName);
\n statusMsg.textContent = '\u5907\u4efd\u5df2\u6210\u529f\u4fdd\u5b58\u5728\u60a8\u7684\u672c\u5730\u78c1\u76d8\u4e2d \u2728';
\n } catch (err) {
\n statusMsg.textContent = `\u5bfc\u51fa\u5f02\u5e38: ${err.message}`;
\n } finally {
\n exportBtn.disabled = false;
\n }
\n});<\/p>\n
\u771f\u6b63\u7684\u81ea\u7531，\u662f\u62e5\u6709\u968f\u65f6\u5e26\u8d70\u81ea\u5df1\u6240\u6709\u6570\u5b57\u8d44\u4ea7\u7684\u6743\u5229\u3002<\/p>\n
\u901a\u8fc7 Web Streams API \u7684\u7cbe\u5bc6\u7ba1\u9053，\u6211\u4eec\u8ba9\u4f53\u79ef\u5e9e\u5927\u7684\u624b\u8d26\u8bb0\u5fc6\u80fd\u591f\u50cf\u5c71\u6cc9\u4e00\u6837\u5e73\u7a33\u3001\u6e05\u900f\u3001\u5b89\u5168\u5730\u6d41\u6dcc\u56de\u4f7f\u7528\u8005\u7684\u672c\u5730\u786c\u76d8\u91cc\u3002<\/p>\n
\u4e0d\u5c06\u7528\u6237\u7684\u6570\u636e\u4f5c\u4e3a\u4eba\u8d28\u6263\u7559\u5728\u5c01\u95ed\u7684\u4e91\u7aef，\u628a\u638c\u63a7\u6743\u5b8c\u5b8c\u6574\u6574\u5730\u4ea4\u8fd8\u7ed9\u6bcf\u4e00\u4e2a\u4eba，\u8fd9\u5c31\u662f\u72ec\u7acb\u8f6f\u4ef6\u5f00\u53d1\u4e2d\u6700\u53ef\u8d35\u7684\u5de5\u7a0b\u4f26\u7406\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728\u8df5\u884c\u300c\u672c\u5730\u4f18\u5148（Local-First）\u300d\u4e0e\u300c\u6570\u636e\u4e3b\u6743\u5b8c\u5168\u5c5e\u4e8e\u7528\u6237\u300d\u7684\u624b\u8d26\u5de5\u5177\u5f00\u53d1\u4e2d，\u6700\u6838\u5fc3\u7684\u4e00\u9053\u5b89\u5168\u751f\u547d\u7ebf\u5c31\u662f：\u6570\u636e\u5bfc\u51fa\u4e0e\u79bb\u7ebf\u5f52\u6863\u5907\u4efd\u3002
\n\u7528\u6237\u5728\u4f60\u7684\u79bb\u7ebf\u624b\u8d26\u91cc\u5199\u4e86\u534a\u5e74\u65e5\u8bb0\u3001\u5b58\u4e86\u51e0\u767e\u5f20\u624b\u7ed8\u6c34\u5f69\u63d2\u753b\u4e0e\u5404\u79cd\u5bfc\u51fa\u957f\u56fe，\u6570\u636e\u5168\u90e8\u4fdd\u5b58\u5728\u6d4f\u89c8\u5668\u5e95\u5c42\u7684 IndexedDB \u4e2d\u3002\u8fd9\u65f6\u5019\u7528\u6237\u4f1a\u4ea7\u751f\u4e00\u79cd\u6781\u5176\u5f3a\u70c8\u7684\u672c\u80fd\u8bc9\u6c42：\u300c\u6211\u80fd\u4e0d\u80fd\u628a\u6211\u7684\u6240\u6709\u6570\u636e\u5b8c\u6574\u4e0b\u8f7d\u6210\u4e00\u4e2a\u672c\u5730 .json \u5907\u4efd\u6587\u4ef6，\u5b58\u5230\u6211\u7684 <\/p>\n","protected":false},"author":2,"featured_media":115097,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[66,723,50,87,51],"topic":[],"class_list":["post-115098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-ai","tag-react","tag-50","tag-87","tag-51"],"yoast_head":"\n