diff --git a/apps/web/src/components/editor/DocumentStorageDialog.vue b/apps/web/src/components/editor/DocumentStorageDialog.vue
new file mode 100644
index 000000000..6c90685de
--- /dev/null
+++ b/apps/web/src/components/editor/DocumentStorageDialog.vue
@@ -0,0 +1,504 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/yup'
+import { Field, Form } from 'vee-validate'
+import * as yup from 'yup'
+import { usePostStore } from '@/stores/post'
+import { store } from '@/utils'
+import { documentStorage } from '@/utils/documentStorage'
+
+const isOpen = defineModel<boolean>(`open`, { default: false })
+
+const postStore = usePostStore()
+
+// WebDAV 配置
+const webdavSchema = toTypedSchema(yup.object({
+  url: yup.string().required(`WebDAV 地址不能为空`).url(`请输入有效的 URL`),
+  username: yup.string().required(`用户名不能为空`),
+  password: yup.string().required(`密码不能为空`),
+  path: yup.string().optional(),
+}))
+
+const webdavConfig = store.reactive(`webdavDocConfig`, {
+  url: ``,
+  username: ``,
+  password: ``,
+  path: `/md-documents`,
+})
+
+async function webdavSubmit(formValues: any) {
+  Object.assign(webdavConfig.value, formValues)
+  toast.success(`WebDAV 配置已保存`)
+}
+
+// 腾讯云 COS 配置
+const cosSchema = toTypedSchema(yup.object({
+  secretId: yup.string().required(`Secret ID 不能为空`),
+  secretKey: yup.string().required(`Secret Key 不能为空`),
+  bucket: yup.string().required(`Bucket 不能为空`),
+  region: yup.string().required(`Region 不能为空`),
+  path: yup.string().optional(),
+}))
+
+const cosConfig = store.reactive(`cosDocConfig`, {
+  secretId: ``,
+  secretKey: ``,
+  bucket: ``,
+  region: ``,
+  path: `md-documents`,
+})
+
+async function cosSubmit(formValues: any) {
+  Object.assign(cosConfig.value, formValues)
+  toast.success(`腾讯云 COS 配置已保存`)
+}
+
+const options = [
+  {
+    value: `localStorage`,
+    label: `LocalStorage`,
+    description: `浏览器本地存储，数据保存在当前浏览器`,
+  },
+  {
+    value: `webdav`,
+    label: `WebDAV`,
+    description: `支持 WebDAV 协议的云存储服务`,
+  },
+  {
+    value: `cos`,
+    label: `腾讯云 COS`,
+    description: `腾讯云对象存储服务`,
+  },
+]
+
+const docStorageType = store.reactive(`docStorageType`, `localStorage`)
+const activeName = ref(`settings`)
+const isSyncing = ref(false)
+const connectionStatus = ref<boolean | null>(null)
+
+async function changeDocStorage() {
+  if (isSyncing.value) {
+    return
+  }
+
+  const newType = docStorageType.value
+
+  // 检查配置
+  if (newType !== `localStorage`) {
+    const config = await store.get(`${newType}DocConfig`)
+    if (!config) {
+      toast.error(`请先配置 ${options.find(o => o.value === newType)?.label} 参数`)
+      // 回滚选择
+      docStorageType.value = documentStorage.getCurrentType()
+      return
+    }
+  }
+
+  // 确认切换
+  // eslint-disable-next-line no-alert
+  const confirmed = window.confirm(`切换存储平台将同步当前数据到新平台，是否继续？`)
+
+  if (!confirmed) {
+    // 回滚选择
+    docStorageType.value = documentStorage.getCurrentType()
+    return
+  }
+
+  isSyncing.value = true
+
+  try {
+    // 获取当前文档数据
+    const currentDocuments = postStore.posts
+    const currentId = postStore.currentPostId
+
+    // 同步到新存储
+    await documentStorage.syncToNewStorage(newType, currentDocuments, currentId)
+
+    toast.success(`文档存储已切换并同步`)
+  }
+  catch (error: any) {
+    console.error(`Failed to switch document storage:`, error)
+    toast.error(`切换失败: ${error.message}`)
+    // 回滚选择
+    docStorageType.value = documentStorage.getCurrentType()
+  }
+  finally {
+    isSyncing.value = false
+  }
+}
+
+async function testConnection() {
+  connectionStatus.value = null
+  try {
+    const result = await documentStorage.checkConnection()
+    connectionStatus.value = result
+    if (result) {
+      toast.success(`连接成功`)
+    }
+    else {
+      toast.error(`连接失败`)
+    }
+  }
+  catch (error: any) {
+    connectionStatus.value = false
+    toast.error(`连接失败: ${error.message}`)
+  }
+}
+
+// 手动同步
+async function manualSync() {
+  if (isSyncing.value) {
+    return
+  }
+
+  isSyncing.value = true
+
+  try {
+    const currentDocuments = postStore.posts
+    const currentId = postStore.currentPostId
+
+    // 获取当前所有配置
+    const localEngine = new (await import('@/utils/documentStorage')).LocalStorageDocumentEngine()
+    const config = await localEngine.getProjectConfig()
+
+    // 同步文档和配置
+    await documentStorage.saveDocuments(currentDocuments)
+    await documentStorage.saveCurrentDocumentId(currentId)
+
+    if (config) {
+      await documentStorage.saveProjectConfig(config)
+      toast.success(`文档和配置已同步到云端`)
+    }
+    else {
+      toast.success(`文档已同步到云端`)
+    }
+  }
+  catch (error: any) {
+    console.error(`Failed to sync documents:`, error)
+    toast.error(`同步失败: ${error.message}`)
+  }
+  finally {
+    isSyncing.value = false
+  }
+}
+
+// 从云端加载
+async function loadFromCloud() {
+  if (isSyncing.value) {
+    return
+  }
+
+  // eslint-disable-next-line no-alert
+  const confirmed = window.confirm(`从云端加载将覆盖本地所有数据（包括文档和配置），是否继续？`)
+
+  if (!confirmed) {
+    return
+  }
+
+  isSyncing.value = true
+
+  try {
+    const result = await documentStorage.downloadFromRemote()
+    console.log('从云端下载的数据:', result)
+
+    if (result.documents.length > 0) {
+      // 更新文档
+      postStore.posts = result.documents
+      if (result.currentId) {
+        postStore.currentPostId = result.currentId
+      }
+
+      // 更新配置
+      if (result.config) {
+        console.log('开始应用配置:', result.config)
+        const localEngine = new (await import('@/utils/documentStorage')).LocalStorageDocumentEngine()
+        await localEngine.saveProjectConfig(result.config)
+        console.log('配置已保存到 localStorage')
+
+        toast.success(`文档和配置已从云端加载，刷新页面以应用配置`)
+      }
+      else {
+        toast.success(`文档已从云端加载`)
+      }
+    }
+    else {
+      toast.warning(`云端暂无数据`)
+    }
+  }
+  catch (error: any) {
+    console.error(`Failed to load documents:`, error)
+    toast.error(`加载失败: ${error.message}`)
+  }
+  finally {
+    isSyncing.value = false
+  }
+}
+
+onMounted(async () => {
+  // 初始化存储管理器
+  await documentStorage.init()
+  docStorageType.value = documentStorage.getCurrentType()
+})
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="md:max-w-max max-h-[90vh] overflow-y-auto" @pointer-down-outside="ev => ev.preventDefault()">
+      <DialogHeader>
+        <DialogTitle>文档存储配置</DialogTitle>
+        <DialogDescription>
+          配置文档的存储位置,支持本地存储和云端存储
+        </DialogDescription>
+      </DialogHeader>
+
+      <Tabs v-model="activeName" class="w-full md:w-max">
+        <TabsList class="grid w-full grid-cols-2 md:grid-cols-4 gap-1">
+          <TabsTrigger value="settings" class="text-xs md:text-sm whitespace-nowrap">
+            存储设置
+          </TabsTrigger>
+          <TabsTrigger value="webdav" class="text-xs md:text-sm whitespace-nowrap">
+            WebDAV
+          </TabsTrigger>
+          <TabsTrigger value="cos" class="text-xs md:text-sm whitespace-nowrap">
+            腾讯云 COS
+          </TabsTrigger>
+          <TabsTrigger value="sync" class="text-xs md:text-sm whitespace-nowrap">
+            同步管理
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="settings" class="space-y-4">
+          <div class="space-y-4">
+            <Label>
+              <span class="my-4 block">
+                存储平台
+              </span>
+              <Select v-model="docStorageType" :disabled="isSyncing" @update:model-value="changeDocStorage">
+                <SelectTrigger>
+                  <SelectValue placeholder="请选择存储平台" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem
+                    v-for="item in options"
+                    :key="item.value"
+                    :value="item.value"
+                  >
+                    <div class="flex flex-col">
+                      <span class="font-medium">{{ item.label }}</span>
+                      <span class="text-xs text-muted-foreground">{{ item.description }}</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </Label>
+
+            <Alert v-if="docStorageType === 'localStorage'">
+              <AlertDescription>
+                当前使用浏览器本地存储，数据仅保存在当前浏览器中。清除浏览器数据会导致文档丢失，建议定期备份或切换到云端存储。
+              </AlertDescription>
+            </Alert>
+
+            <Alert v-else-if="docStorageType === 'webdav'">
+              <AlertDescription>
+                使用 WebDAV 存储，数据将保存到您配置的 WebDAV 服务器。支持坚果云、Nextcloud 等服务。
+              </AlertDescription>
+            </Alert>
+
+            <Alert v-else-if="docStorageType === 'cos'">
+              <AlertDescription>
+                使用腾讯云 COS 对象存储，数据将保存到云端。需要开通腾讯云 COS 服务并配置访问密钥。
+              </AlertDescription>
+            </Alert>
+
+            <div v-if="docStorageType !== 'localStorage'" class="flex gap-2">
+              <Button :disabled="isSyncing" @click="testConnection">
+                测试连接
+              </Button>
+              <Badge v-if="connectionStatus === true" variant="success">
+                连接正常
+              </Badge>
+              <Badge v-else-if="connectionStatus === false" variant="destructive">
+                连接失败
+              </Badge>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="webdav">
+          <Form :validation-schema="webdavSchema" :initial-values="webdavConfig" @submit="webdavSubmit">
+            <Field v-slot="{ field, errorMessage }" name="url">
+              <FormItem label="WebDAV 地址" required :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  placeholder="如：https://dav.jianguoyun.com/dav/"
+                />
+              </FormItem>
+            </Field>
+
+            <Field v-slot="{ field, errorMessage }" name="username">
+              <FormItem label="用户名" required :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  placeholder="WebDAV 用户名"
+                />
+              </FormItem>
+            </Field>
+
+            <Field v-slot="{ field, errorMessage }" name="password">
+              <FormItem label="密码" required :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  type="password"
+                  placeholder="WebDAV 密码或应用密码"
+                />
+              </FormItem>
+            </Field>
+
+            <Field v-slot="{ field, errorMessage }" name="path">
+              <FormItem label="存储路径" :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  placeholder="如：/md-documents，可不填"
+                />
+              </FormItem>
+            </Field>
+
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0 h-auto text-left whitespace-normal"
+                as="a"
+                href="https://help.jianguoyun.com/?p=2064"
+                target="_blank"
+              >
+                如何使用坚果云 WebDAV？
+              </Button>
+            </FormItem>
+
+            <FormItem>
+              <Button type="submit">
+                保存配置
+              </Button>
+            </FormItem>
+          </Form>
+        </TabsContent>
+
+        <TabsContent value="cos">
+          <Form :validation-schema="cosSchema" :initial-values="cosConfig" @submit="cosSubmit">
+            <Field v-slot="{ field, errorMessage }" name="secretId">
+              <FormItem label="SecretId" required :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  placeholder="如：AKIDnQp1w3DOOCSs8F5MDp9tdoocsmdUPonW3"
+                />
+              </FormItem>
+            </Field>
+
+            <Field v-slot="{ field, errorMessage }" name="secretKey">
+              <FormItem label="SecretKey" required :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  type="password"
+                  placeholder="如：ukLmdtEJ9271f3DOocsMDsCXdS3YlbW0"
+                />
+              </FormItem>
+            </Field>
+
+            <Field v-slot="{ field, errorMessage }" name="bucket">
+              <FormItem label="Bucket" required :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  placeholder="如：md-documents-1234567890"
+                />
+              </FormItem>
+            </Field>
+
+            <Field v-slot="{ field, errorMessage }" name="region">
+              <FormItem label="Bucket 所在区域" required :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  placeholder="如：ap-guangzhou"
+                />
+              </FormItem>
+            </Field>
+
+            <Field v-slot="{ field, errorMessage }" name="path">
+              <FormItem label="存储路径" :error="errorMessage">
+                <Input
+                  v-bind="field"
+                  v-model="field.value"
+                  placeholder="如：md-documents，可不填"
+                />
+              </FormItem>
+            </Field>
+
+            <FormItem>
+              <Button
+                variant="link"
+                class="p-0 h-auto text-left whitespace-normal"
+                as="a"
+                href="https://cloud.tencent.com/document/product/436"
+                target="_blank"
+              >
+                如何使用腾讯云 COS？
+              </Button>
+            </FormItem>
+
+            <FormItem>
+              <Button type="submit">
+                保存配置
+              </Button>
+            </FormItem>
+          </Form>
+        </TabsContent>
+
+        <TabsContent value="sync" class="space-y-4">
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-sm font-medium mb-2">
+                数据同步
+              </h3>
+              <p class="text-sm text-muted-foreground mb-4">
+                手动同步本地数据到云端，或从云端加载数据到本地
+              </p>
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <Button :disabled="isSyncing || docStorageType === 'localStorage'" @click="manualSync">
+                <template v-if="isSyncing">
+                  同步中...
+                </template>
+                <template v-else>
+                  同步到云端
+                </template>
+              </Button>
+
+              <Button variant="outline" :disabled="isSyncing || docStorageType === 'localStorage'" @click="loadFromCloud">
+                从云端加载
+              </Button>
+            </div>
+
+            <Alert v-if="docStorageType === 'localStorage'">
+              <AlertDescription>
+                当前使用本地存储，请先切换到云端存储平台
+              </AlertDescription>
+            </Alert>
+
+            <Alert>
+              <AlertDescription>
+                <strong>注意：</strong>从云端加载会覆盖本地所有文档数据，请谨慎操作！
+              </AlertDescription>
+            </Alert>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/web/src/components/editor/editor-header/FileDropdown.vue b/apps/web/src/components/editor/editor-header/FileDropdown.vue
index 6261376fc..e75cc929d 100644
--- a/apps/web/src/components/editor/editor-header/FileDropdown.vue
+++ b/apps/web/src/components/editor/editor-header/FileDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Download, FileCode, FileCog, FileText, Upload } from 'lucide-vue-next'
+import { Cloud, Download, FileCode, FileCog, FileText, Upload } from 'lucide-vue-next'
 import { useEditorStore } from '@/stores/editor'
 import { useExportStore } from '@/stores/export'
 import { useUIStore } from '@/stores/ui'
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
   asSub: false,
 })
 
-const emit = defineEmits([`openEditorState`])
+const emit = defineEmits([`openEditorState`, `openDocumentStorage`])
 
 const { asSub } = toRefs(props)
 
@@ -26,6 +26,10 @@ function openEditorStateDialog() {
   emit(`openEditorState`)
 }
 
+function openDocumentStorageDialog() {
+  emit(`openDocumentStorage`)
+}
+
 // Export functions
 function exportEditorContent2HTML() {
   exportStore.exportEditorContent2HTML()
@@ -85,6 +89,11 @@ function exportEditorContent2PDF() {
         导入/导出项目配置
       </MenubarItem>
       <MenubarSeparator />
+      <MenubarItem @click="openDocumentStorageDialog()">
+        <Cloud class="mr-2 size-4" />
+        文档存储配置
+      </MenubarItem>
+      <MenubarSeparator />
       <MenubarCheckboxItem v-model:checked="isDark">
         深色模式
       </MenubarCheckboxItem>
@@ -135,6 +144,11 @@ function exportEditorContent2PDF() {
         导入/导出项目配置
       </MenubarItem>
       <MenubarSeparator />
+      <MenubarItem @click="openDocumentStorageDialog()">
+        <Cloud class="mr-2 size-4" />
+        文档存储配置
+      </MenubarItem>
+      <MenubarSeparator />
       <MenubarCheckboxItem v-model:checked="isDark">
         深色模式
       </MenubarCheckboxItem>
diff --git a/apps/web/src/components/editor/editor-header/index.vue b/apps/web/src/components/editor/editor-header/index.vue
index d3494555a..d2a887781 100644
--- a/apps/web/src/components/editor/editor-header/index.vue
+++ b/apps/web/src/components/editor/editor-header/index.vue
@@ -42,6 +42,7 @@ function editorRefresh() {
 const aboutDialogVisible = ref(false)
 const fundDialogVisible = ref(false)
 const editorStateDialogVisible = ref(false)
+const documentStorageDialogVisible = ref(false)
 
 // 处理帮助菜单事件
 function handleOpenAbout() {
@@ -56,6 +57,10 @@ function handleOpenEditorState() {
   editorStateDialogVisible.value = true
 }
 
+function handleOpenDocumentStorage() {
+  documentStorageDialogVisible.value = true
+}
+
 const copyMode = store.reactive(addPrefix(`copyMode`), `txt`)
 
 const { copy: copyContent } = useClipboard({
@@ -230,7 +235,10 @@ async function copy() {
     <!-- 桌面端左侧菜单 -->
     <div class="space-x-2 hidden md:flex">
       <Menubar class="menubar border-0">
-        <FileDropdown @open-editor-state="handleOpenEditorState" />
+        <FileDropdown 
+          @open-editor-state="handleOpenEditorState" 
+          @open-document-storage="handleOpenDocumentStorage"
+        />
         <FormatDropdown />
         <EditDropdown />
         <StyleDropdown />
@@ -248,7 +256,11 @@ async function copy() {
             </Button>
           </MenubarTrigger>
           <MenubarContent align="start">
-            <FileDropdown :as-sub="true" @open-editor-state="handleOpenEditorState" />
+            <FileDropdown 
+              :as-sub="true" 
+              @open-editor-state="handleOpenEditorState" 
+              @open-document-storage="handleOpenDocumentStorage"
+            />
             <FormatDropdown :as-sub="true" />
             <EditDropdown :as-sub="true" />
             <StyleDropdown :as-sub="true" />
@@ -326,6 +338,7 @@ async function copy() {
   <AboutDialog :visible="aboutDialogVisible" @close="aboutDialogVisible = false" />
   <FundDialog :visible="fundDialogVisible" @close="fundDialogVisible = false" />
   <EditorStateDialog :visible="editorStateDialogVisible" @close="editorStateDialogVisible = false" />
+  <DocumentStorageDialog v-model:open="documentStorageDialogVisible" />
   <AIImageGeneratorPanel v-model:open="uiStore.aiImageDialogVisible" />
 </template>
 
diff --git a/apps/web/src/stores/post.ts b/apps/web/src/stores/post.ts
index 6b2731b0c..784b8bd3e 100644
--- a/apps/web/src/stores/post.ts
+++ b/apps/web/src/stores/post.ts
@@ -1,6 +1,8 @@
+import type { DocumentData } from '@/utils/documentStorage'
 import { v4 as uuid } from 'uuid'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
-import { addPrefix, store } from '@/utils'
+import { store } from '@/utils'
+import { documentStorage } from '@/utils/documentStorage'
 
 /**
  * Post 结构接口
@@ -26,8 +28,8 @@ export interface Post {
  * 负责管理文章列表、当前文章、文章 CRUD 操作
  */
 export const usePostStore = defineStore(`post`, () => {
-  // 内容列表
-  const posts = store.reactive<Post[]>(addPrefix(`posts`), [
+  // 内容列表 - 使用响应式引用
+  const posts = ref<Post[]>([
     {
       id: uuid(),
       title: `内容1`,
@@ -41,29 +43,94 @@ export const usePostStore = defineStore(`post`, () => {
   ])
 
   // 当前文章 ID
-  const currentPostId = store.reactive(addPrefix(`current_post_id`), ``)
+  const currentPostId = ref<string>(``)
+
+  // 加载状态
+  const isLoaded = ref(false)
+  const isLoading = ref(false)
 
   // 预备弃用的旧字段（用于迁移）
   const editorContent = store.reactive(`__editor_content`, DEFAULT_CONTENT)
 
-  // 在补齐 id 后，若 currentPostId 无效 ➜ 自动指向第一篇
-  onBeforeMount(() => {
-    posts.value = posts.value.map((post, index) => {
-      const now = Date.now()
-      return {
-        ...post,
-        id: post.id ?? uuid(),
-        createDatetime: post.createDatetime ?? new Date(now + index),
-        updateDatetime: post.updateDatetime ?? new Date(now + index),
+  // 保存到存储
+  const saveToStorage = async () => {
+    // 只有在数据加载完成后才保存，避免覆盖云端数据
+    if (!isLoaded.value) {
+      return
+    }
+
+    try {
+      await documentStorage.saveDocuments(posts.value as DocumentData[])
+      await documentStorage.saveCurrentDocumentId(currentPostId.value)
+    }
+    catch (error) {
+      console.error(`Failed to save to storage:`, error)
+    }
+  }
+
+  // 从存储加载数据
+  const loadFromStorage = async () => {
+    // 避免重复加载
+    if (isLoaded.value || isLoading.value) {
+      return
+    }
+
+    isLoading.value = true
+
+    try {
+      await documentStorage.init()
+
+      const storedDocuments = await documentStorage.getDocuments()
+      const storedCurrentId = await documentStorage.getCurrentDocumentId()
+
+      if (storedDocuments && storedDocuments.length > 0) {
+        posts.value = storedDocuments.map((doc: DocumentData, index: number) => {
+          const now = Date.now()
+          return {
+            ...doc,
+            id: doc.id ?? uuid(),
+            createDatetime: doc.createDatetime ? new Date(doc.createDatetime) : new Date(now + index),
+            updateDatetime: doc.updateDatetime ? new Date(doc.updateDatetime) : new Date(now + index),
+          }
+        })
+
+        if (storedCurrentId && posts.value.some(p => p.id === storedCurrentId)) {
+          currentPostId.value = storedCurrentId
+        }
+        else {
+          currentPostId.value = posts.value[0]?.id ?? ``
+        }
+      }
+      else {
+        // 首次使用，使用默认数据
+        currentPostId.value = posts.value[0]?.id ?? ``
+        await saveToStorage()
       }
-    })
 
-    // 兼容：如果本地没有 currentPostId，或指向的文章已不存在
-    if (!currentPostId.value || !posts.value.some(p => p.id === currentPostId.value)) {
+      isLoaded.value = true
+    }
+    catch (error) {
+      console.error(`Failed to load from storage:`, error)
+      // 加载失败，使用默认数据
       currentPostId.value = posts.value[0]?.id ?? ``
+      isLoaded.value = true
     }
+    finally {
+      isLoading.value = false
+    }
+  }
+
+  // 监听数据变化，自动保存
+  watch(posts, () => {
+    saveToStorage()
+  }, { deep: true })
+
+  watch(currentPostId, () => {
+    saveToStorage()
   })
 
+  // 不再使用 onBeforeMount，改为在编辑器初始化时调用 loadFromStorage
+
   // 根据 id 找索引
   const findIndexById = (id: string) => posts.value.findIndex(p => p.id === id)
 
@@ -168,6 +235,8 @@ export const usePostStore = defineStore(`post`, () => {
     currentPostId,
     currentPostIndex,
     currentPost,
+    isLoaded,
+    isLoading,
 
     // Getters
     getPostById,
@@ -181,5 +250,9 @@ export const usePostStore = defineStore(`post`, () => {
     updatePostContent,
     collapseAllPosts,
     expandAllPosts,
+
+    // Storage
+    loadFromStorage,
+    saveToStorage,
   }
 })
diff --git a/apps/web/src/utils/documentStorage.ts b/apps/web/src/utils/documentStorage.ts
new file mode 100644
index 000000000..178f7cc9e
--- /dev/null
+++ b/apps/web/src/utils/documentStorage.ts
@@ -0,0 +1,982 @@
+/**
+ * 文档存储抽象层
+ * 支持多种存储平台：localStorage、WebDAV、腾讯云COS等
+ */
+
+import COS from 'cos-js-sdk-v5'
+import { store } from './storage'
+
+/**
+ * 文档数据结构
+ */
+export interface DocumentData {
+  id: string
+  title: string
+  content: string
+  history: {
+    datetime: string
+    content: string
+  }[]
+  createDatetime: Date
+  updateDatetime: Date
+  parentId?: string | null
+  collapsed?: boolean
+}
+
+/**
+ * 项目配置数据结构
+ * 与 EditorStateDialog 的导入/导出配置保持一致
+ */
+export interface ProjectConfig {
+  // ========== 图床配置 ==========
+  githubConfig?: any
+  aliOSSConfig?: any
+  txCOSConfig?: any
+  qiniuConfig?: any
+  minioConfig?: any
+  telegramConfig?: any
+  mpConfig?: any
+  r2Config?: any
+  upyunConfig?: any
+  cloudinaryConfig?: any
+  imgHost?: string
+  useCompression?: boolean
+
+  // ========== 文档存储配置 ==========
+  webdavDocConfig?: any
+  cosDocConfig?: any
+  docStorageType?: string
+
+  // ========== 自定义表单配置 ==========
+  formCustomConfig?: any
+
+  // ========== UI Store 状态 ==========
+  isDark?: boolean
+  isEditOnLeft?: boolean
+  isOpenRightSlider?: boolean
+  isOpenPostSlider?: boolean
+  showAIToolbox?: boolean
+
+  // ========== Theme Store 状态 ==========
+  theme?: string
+  fontFamily?: string
+  fontSize?: string
+  primaryColor?: string
+  codeBlockTheme?: string
+  legend?: string
+  isMacCodeBlock?: boolean
+  isShowLineNumber?: boolean
+  isCiteStatus?: boolean
+  isCountStatus?: boolean
+  isUseIndent?: boolean
+  isUseJustify?: boolean
+
+  // ========== CSS Editor Store 状态 ==========
+  cssContentConfig?: any
+
+  // ========== Post Store 状态 ==========
+  currentPostIndex?: number
+
+  // ========== 其他配置 ==========
+  copyMode?: string
+  sortMode?: string
+
+  // 支持其他未知配置
+  [key: string]: any
+}
+
+/**
+ * 文档存储引擎接口
+ */
+export interface DocumentStorageEngine {
+  /**
+   * 获取所有文档
+   */
+  getDocuments: () => Promise<DocumentData[]>
+
+  /**
+   * 保存所有文档
+   */
+  saveDocuments: (documents: DocumentData[]) => Promise<void>
+
+  /**
+   * 获取当前文档ID
+   */
+  getCurrentDocumentId: () => Promise<string | null>
+
+  /**
+   * 保存当前文档ID
+   */
+  saveCurrentDocumentId: (id: string) => Promise<void>
+
+  /**
+   * 获取项目配置
+   */
+  getProjectConfig: () => Promise<ProjectConfig | null>
+
+  /**
+   * 保存项目配置
+   */
+  saveProjectConfig: (config: ProjectConfig) => Promise<void>
+
+  /**
+   * 检查连接状态
+   */
+  checkConnection?: () => Promise<boolean>
+}
+
+/**
+ * LocalStorage 存储引擎
+ */
+export class LocalStorageDocumentEngine implements DocumentStorageEngine {
+  private readonly DOCUMENTS_KEY = `md__posts`
+  private readonly CURRENT_ID_KEY = `md__current_post_id`
+
+  async getDocuments(): Promise<DocumentData[]> {
+    return await store.getJSON<DocumentData[]>(this.DOCUMENTS_KEY, [])
+  }
+
+  async saveDocuments(documents: DocumentData[]): Promise<void> {
+    await store.setJSON(this.DOCUMENTS_KEY, documents)
+  }
+
+  async getCurrentDocumentId(): Promise<string | null> {
+    return await store.get(this.CURRENT_ID_KEY)
+  }
+
+  async saveCurrentDocumentId(id: string): Promise<void> {
+    await store.set(this.CURRENT_ID_KEY, id)
+  }
+
+  async getProjectConfig(): Promise<ProjectConfig | null> {
+    try {
+      // 动态导入 Store 以获取当前运行时状态
+      const { useUIStore } = await import('@/stores/ui')
+      const { useThemeStore } = await import('@/stores/theme')
+      const { useCssEditorStore } = await import('@/stores/cssEditor')
+      const { usePostStore } = await import('@/stores/post')
+
+      const uiStore = useUIStore()
+      const themeStore = useThemeStore()
+      const cssEditorStore = useCssEditorStore()
+      const postStore = usePostStore()
+
+      const config: ProjectConfig = {
+        // ========== 图床配置 ==========
+        githubConfig: await store.getJSON(`githubConfig`, null),
+        aliOSSConfig: await store.getJSON(`aliOSSConfig`, null),
+        txCOSConfig: await store.getJSON(`txCOSConfig`, null),
+        qiniuConfig: await store.getJSON(`qiniuConfig`, null),
+        minioConfig: await store.getJSON(`minioConfig`, null),
+        telegramConfig: await store.getJSON(`telegramConfig`, null),
+        mpConfig: await store.getJSON(`mpConfig`, null),
+        r2Config: await store.getJSON(`r2Config`, null),
+        upyunConfig: await store.getJSON(`upyunConfig`, null),
+        cloudinaryConfig: await store.getJSON(`cloudinaryConfig`, null),
+        imgHost: await store.get(`imgHost`) || undefined,
+        useCompression: (await store.getJSON(`useCompression`, null)) ?? undefined,
+
+        // ========== 文档存储配置 ==========
+        webdavDocConfig: await store.getJSON(`webdavDocConfig`, null),
+        cosDocConfig: await store.getJSON(`cosDocConfig`, null),
+        docStorageType: (await store.get(`docStorageType`)) || undefined,
+
+        // ========== 自定义表单配置 ==========
+        formCustomConfig: await store.getJSON(`formCustomConfig`, null),
+
+        // ========== UI Store 状态（运行时值）==========
+        isDark: uiStore.isDark,
+        isEditOnLeft: uiStore.isEditOnLeft,
+        isOpenRightSlider: uiStore.isOpenRightSlider,
+        isOpenPostSlider: uiStore.isOpenPostSlider,
+        showAIToolbox: uiStore.showAIToolbox,
+
+        // ========== Theme Store 状态（运行时值）==========
+        theme: themeStore.theme,
+        fontFamily: themeStore.fontFamily,
+        fontSize: themeStore.fontSize,
+        primaryColor: themeStore.primaryColor,
+        codeBlockTheme: themeStore.codeBlockTheme,
+        legend: themeStore.legend,
+        isMacCodeBlock: themeStore.isMacCodeBlock,
+        isShowLineNumber: themeStore.isShowLineNumber,
+        isCiteStatus: themeStore.isCiteStatus,
+        isCountStatus: themeStore.isCountStatus,
+        isUseIndent: themeStore.isUseIndent,
+        isUseJustify: themeStore.isUseJustify,
+
+        // ========== CSS Editor Store 状态（运行时值）==========
+        cssContentConfig: cssEditorStore.cssContentConfig,
+
+        // ========== Post Store 状态 ==========
+        currentPostIndex: postStore.currentPostIndex,
+
+        // ========== 其他配置 ==========
+        copyMode: (await store.getJSON(`MD__copyMode`, null)) ?? undefined,
+        sortMode: (await store.getJSON(`MD__sort_mode`, null)) ?? undefined,
+      }
+
+      // 过滤掉 null 值
+      const filteredConfig: ProjectConfig = {}
+      for (const [key, value] of Object.entries(config)) {
+        if (value !== null && value !== undefined) {
+          filteredConfig[key] = value
+        }
+      }
+
+      console.log('LocalStorage getProjectConfig:', filteredConfig)
+      return Object.keys(filteredConfig).length > 0 ? filteredConfig : null
+    }
+    catch (error) {
+      console.error('Failed to get project config:', error)
+      return null
+    }
+  }
+
+  async saveProjectConfig(config: ProjectConfig): Promise<void> {
+    console.log('LocalStorage saveProjectConfig:', config)
+
+    try {
+      // 先保存图床配置和其他非 Store 配置到 localStorage
+      const configsToSave: Record<string, any> = {}
+      const storeConfigs: Record<string, any> = {}
+
+      for (const [key, value] of Object.entries(config)) {
+        if (value === undefined || value === null)
+          continue
+
+        // 分类：Store 配置 vs localStorage 配置
+        const isStoreConfig = [
+          'isDark',
+          'isEditOnLeft',
+          'isOpenRightSlider',
+          'isOpenPostSlider',
+          'showAIToolbox',
+          'theme',
+          'fontFamily',
+          'fontSize',
+          'primaryColor',
+          'codeBlockTheme',
+          'legend',
+          'isMacCodeBlock',
+          'isShowLineNumber',
+          'isCiteStatus',
+          'isCountStatus',
+          'isUseIndent',
+          'isUseJustify',
+          'cssContentConfig',
+          'currentPostIndex',
+        ].includes(key)
+
+        if (isStoreConfig) {
+          storeConfigs[key] = value
+        }
+        else {
+          configsToSave[key] = value
+        }
+      }
+
+      // 1. 先保存图床配置等到 localStorage
+      for (const [key, value] of Object.entries(configsToSave)) {
+        if (typeof value === 'string') {
+          await store.set(key, value)
+        }
+        else {
+          await store.setJSON(key, value)
+        }
+      }
+      console.log('图床配置已保存:', Object.keys(configsToSave))
+
+      // 2. 再更新 Store（这会触发 store.reactive 自动保存）
+      if (Object.keys(storeConfigs).length > 0) {
+        const { useUIStore } = await import('@/stores/ui')
+        const { useThemeStore } = await import('@/stores/theme')
+        const { useCssEditorStore } = await import('@/stores/cssEditor')
+        const { usePostStore } = await import('@/stores/post')
+
+        const uiStore = useUIStore()
+        const themeStore = useThemeStore()
+        const cssEditorStore = useCssEditorStore()
+        const postStore = usePostStore()
+
+        for (const [key, value] of Object.entries(storeConfigs)) {
+          // UI Store 状态
+          if (key === 'isDark') {
+            uiStore.isDark = value
+          }
+          else if (key === 'isEditOnLeft') {
+            uiStore.isEditOnLeft = value
+          }
+          else if (key === 'isOpenRightSlider') {
+            uiStore.isOpenRightSlider = value
+          }
+          else if (key === 'isOpenPostSlider') {
+            uiStore.isOpenPostSlider = value
+          }
+          else if (key === 'showAIToolbox') {
+            uiStore.showAIToolbox = value
+          }
+
+          // Theme Store 状态
+          else if (key === 'theme') {
+            themeStore.theme = value
+          }
+          else if (key === 'fontFamily') {
+            themeStore.fontFamily = value
+          }
+          else if (key === 'fontSize') {
+            themeStore.fontSize = value
+          }
+          else if (key === 'primaryColor') {
+            themeStore.primaryColor = value
+          }
+          else if (key === 'codeBlockTheme') {
+            themeStore.codeBlockTheme = value
+          }
+          else if (key === 'legend') {
+            themeStore.legend = value
+          }
+          else if (key === 'isMacCodeBlock') {
+            themeStore.isMacCodeBlock = value
+          }
+          else if (key === 'isShowLineNumber') {
+            themeStore.isShowLineNumber = value
+          }
+          else if (key === 'isCiteStatus') {
+            themeStore.isCiteStatus = value
+          }
+          else if (key === 'isCountStatus') {
+            themeStore.isCountStatus = value
+          }
+          else if (key === 'isUseIndent') {
+            themeStore.isUseIndent = value
+          }
+          else if (key === 'isUseJustify') {
+            themeStore.isUseJustify = value
+          }
+
+          // CSS Editor Store 状态
+          else if (key === 'cssContentConfig') {
+            console.log('正在更新 cssContentConfig:', value)
+            cssEditorStore.cssContentConfig = value
+          }
+
+          // Post Store 状态
+          else if (key === 'currentPostIndex') {
+            postStore.currentPostIndex = value
+          }
+        }
+        console.log('Store 配置已更新:', Object.keys(storeConfigs))
+      }
+
+      console.log('✅ 所有配置保存完成')
+    }
+    catch (error) {
+      console.error('Failed to save project config:', error)
+      throw error
+    }
+  }
+
+  async checkConnection(): Promise<boolean> {
+    return true
+  }
+}
+
+/**
+ * WebDAV 存储引擎
+ */
+export class WebDAVDocumentEngine implements DocumentStorageEngine {
+  private config: {
+    url: string
+    username: string
+    password: string
+    path: string
+  }
+
+  private configLoaded = false
+
+  constructor() {
+    this.config = { url: ``, username: ``, password: ``, path: `/md-documents` }
+  }
+
+  private async ensureConfig() {
+    if (this.configLoaded) {
+      return
+    }
+    const config = await store.getJSON(`webdavDocConfig`, this.config)
+    this.config = config || this.config
+    this.configLoaded = true
+  }
+
+  async getDocuments(): Promise<DocumentData[]> {
+    await this.ensureConfig()
+
+    try {
+      const url = `${this.config.url}${this.config.path}/documents.json`
+      console.log('WebDAV GET:', url)
+
+      const response = await fetch(url, {
+        method: `GET`,
+        headers: {
+          Authorization: `Basic ${btoa(`${this.config.username}:${this.config.password}`)}`,
+        },
+      })
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          return []
+        }
+        throw new Error(`Failed to fetch documents: ${response.statusText}`)
+      }
+
+      return await response.json()
+    }
+    catch (error) {
+      console.error(`WebDAV getDocuments error:`, error)
+      return []
+    }
+  }
+
+  async saveDocuments(documents: DocumentData[]): Promise<void> {
+    await this.ensureConfig()
+
+    const content = JSON.stringify(documents, null, 2)
+    const url = `${this.config.url}${this.config.path}/documents.json`
+    console.log('WebDAV PUT:', url)
+
+    const response = await fetch(url, {
+      method: `PUT`,
+      headers: {
+        'Authorization': `Basic ${btoa(`${this.config.username}:${this.config.password}`)}`,
+        'Content-Type': `application/json`,
+      },
+      body: content,
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to save documents: ${response.statusText}`)
+    }
+  }
+
+  async getCurrentDocumentId(): Promise<string | null> {
+    await this.ensureConfig()
+
+    try {
+      const url = `${this.config.url}${this.config.path}/current.txt`
+      const response = await fetch(url, {
+        method: `GET`,
+        headers: {
+          Authorization: `Basic ${btoa(`${this.config.username}:${this.config.password}`)}`,
+        },
+      })
+
+      if (!response.ok) {
+        return null
+      }
+
+      return await response.text()
+    }
+    catch {
+      return null
+    }
+  }
+
+  async saveCurrentDocumentId(id: string): Promise<void> {
+    await this.ensureConfig()
+
+    const url = `${this.config.url}${this.config.path}/current.txt`
+    await fetch(url, {
+      method: `PUT`,
+      headers: {
+        'Authorization': `Basic ${btoa(`${this.config.username}:${this.config.password}`)}`,
+        'Content-Type': `text/plain`,
+      },
+      body: id,
+    })
+  }
+
+  async getProjectConfig(): Promise<ProjectConfig | null> {
+    await this.ensureConfig()
+
+    try {
+      const url = `${this.config.url}${this.config.path}/config.json`
+      console.log('WebDAV GET config:', url)
+
+      const response = await fetch(url, {
+        method: `GET`,
+        headers: {
+          Authorization: `Basic ${btoa(`${this.config.username}:${this.config.password}`)}`,
+        },
+      })
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          console.log('WebDAV config.json not found (404)')
+          return null
+        }
+        throw new Error(`Failed to fetch config: ${response.statusText}`)
+      }
+
+      const config = await response.json()
+      console.log('WebDAV GET config success:', config)
+      return config
+    }
+    catch (error) {
+      console.error(`WebDAV getProjectConfig error:`, error)
+      return null
+    }
+  }
+
+  async saveProjectConfig(config: ProjectConfig): Promise<void> {
+    await this.ensureConfig()
+
+    const content = JSON.stringify(config, null, 2)
+    const url = `${this.config.url}${this.config.path}/config.json`
+    console.log('WebDAV PUT config:', url, config)
+
+    const response = await fetch(url, {
+      method: `PUT`,
+      headers: {
+        'Authorization': `Basic ${btoa(`${this.config.username}:${this.config.password}`)}`,
+        'Content-Type': `application/json`,
+      },
+      body: content,
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to save config: ${response.statusText}`)
+    }
+  }
+
+  async checkConnection(): Promise<boolean> {
+    await this.ensureConfig()
+
+    try {
+      const response = await fetch(this.config.url, {
+        method: `OPTIONS`,
+        headers: {
+          Authorization: `Basic ${btoa(`${this.config.username}:${this.config.password}`)}`,
+        },
+      })
+      return response.ok
+    }
+    catch {
+      return false
+    }
+  }
+}
+
+/**
+ * 腾讯云 COS 存储引擎
+ */
+export class COSDocumentEngine implements DocumentStorageEngine {
+  private config: {
+    secretId: string
+    secretKey: string
+    bucket: string
+    region: string
+    path: string
+  }
+
+  private cos: any
+  private configLoaded = false
+
+  constructor() {
+    this.config = { secretId: ``, secretKey: ``, bucket: ``, region: ``, path: `md-documents` }
+  }
+
+  private async ensureConfig() {
+    if (this.configLoaded) {
+      return
+    }
+    const config = await store.getJSON(`cosDocConfig`, this.config)
+    this.config = config || this.config
+    this.initCOS()
+    this.configLoaded = true
+  }
+
+  private initCOS() {
+    if (this.config.secretId && this.config.secretKey) {
+      this.cos = new COS({
+        SecretId: this.config.secretId,
+        SecretKey: this.config.secretKey,
+      })
+    }
+  }
+
+  async getDocuments(): Promise<DocumentData[]> {
+    await this.ensureConfig()
+
+    if (!this.cos) {
+      throw new Error(`COS not initialized`)
+    }
+
+    return new Promise((resolve, reject) => {
+      this.cos.getObject(
+        {
+          Bucket: this.config.bucket,
+          Region: this.config.region,
+          Key: `${this.config.path}/documents.json`,
+        },
+        (err: any, data: any) => {
+          if (err) {
+            if (err.statusCode === 404) {
+              resolve([])
+            }
+            else {
+              reject(err)
+            }
+          }
+          else {
+            try {
+              const documents = JSON.parse(data.Body)
+              resolve(documents)
+            }
+            catch (parseError) {
+              reject(parseError)
+            }
+          }
+        },
+      )
+    })
+  }
+
+  async saveDocuments(documents: DocumentData[]): Promise<void> {
+    await this.ensureConfig()
+
+    if (!this.cos) {
+      throw new Error(`COS not initialized`)
+    }
+
+    const content = JSON.stringify(documents, null, 2)
+
+    return new Promise((resolve, reject) => {
+      this.cos.putObject(
+        {
+          Bucket: this.config.bucket,
+          Region: this.config.region,
+          Key: `${this.config.path}/documents.json`,
+          Body: content,
+          ContentType: `application/json`,
+        },
+        (err: any) => {
+          if (err) {
+            reject(err)
+          }
+          else {
+            resolve()
+          }
+        },
+      )
+    })
+  }
+
+  async getCurrentDocumentId(): Promise<string | null> {
+    await this.ensureConfig()
+
+    if (!this.cos) {
+      return null
+    }
+
+    return new Promise((resolve) => {
+      this.cos.getObject(
+        {
+          Bucket: this.config.bucket,
+          Region: this.config.region,
+          Key: `${this.config.path}/current.txt`,
+        },
+        (err: any, data: any) => {
+          if (err) {
+            resolve(null)
+          }
+          else {
+            resolve(data.Body)
+          }
+        },
+      )
+    })
+  }
+
+  async saveCurrentDocumentId(id: string): Promise<void> {
+    await this.ensureConfig()
+
+    if (!this.cos) {
+      throw new Error(`COS not initialized`)
+    }
+
+    return new Promise((resolve, reject) => {
+      this.cos.putObject(
+        {
+          Bucket: this.config.bucket,
+          Region: this.config.region,
+          Key: `${this.config.path}/current.txt`,
+          Body: id,
+          ContentType: `text/plain`,
+        },
+        (err: any) => {
+          if (err) {
+            reject(err)
+          }
+          else {
+            resolve()
+          }
+        },
+      )
+    })
+  }
+
+  async getProjectConfig(): Promise<ProjectConfig | null> {
+    await this.ensureConfig()
+
+    if (!this.cos) {
+      return null
+    }
+
+    return new Promise((resolve) => {
+      this.cos.getObject(
+        {
+          Bucket: this.config.bucket,
+          Region: this.config.region,
+          Key: `${this.config.path}/config.json`,
+        },
+        (err: any, data: any) => {
+          if (err) {
+            if (err.statusCode === 404) {
+              console.log('COS config.json not found (404)')
+              resolve(null)
+            }
+            else {
+              console.error(`COS getProjectConfig error:`, err)
+              resolve(null)
+            }
+          }
+          else {
+            try {
+              const config = JSON.parse(data.Body)
+              console.log('COS GET config success:', config)
+              resolve(config)
+            }
+            catch (parseError) {
+              console.error(`COS config parse error:`, parseError)
+              resolve(null)
+            }
+          }
+        },
+      )
+    })
+  }
+
+  async saveProjectConfig(config: ProjectConfig): Promise<void> {
+    await this.ensureConfig()
+
+    if (!this.cos) {
+      throw new Error(`COS not initialized`)
+    }
+
+    const content = JSON.stringify(config, null, 2)
+
+    return new Promise((resolve, reject) => {
+      this.cos.putObject(
+        {
+          Bucket: this.config.bucket,
+          Region: this.config.region,
+          Key: `${this.config.path}/config.json`,
+          Body: content,
+          ContentType: `application/json`,
+        },
+        (err: any) => {
+          if (err) {
+            reject(err)
+          }
+          else {
+            resolve()
+          }
+        },
+      )
+    })
+  }
+
+  async checkConnection(): Promise<boolean> {
+    await this.ensureConfig()
+
+    if (!this.cos) {
+      return false
+    }
+
+    return new Promise((resolve) => {
+      this.cos.headBucket(
+        {
+          Bucket: this.config.bucket,
+          Region: this.config.region,
+        },
+        (err: any) => {
+          resolve(!err)
+        },
+      )
+    })
+  }
+}
+
+/**
+ * 文档存储管理器
+ */
+class DocumentStorageManager {
+  private engine: DocumentStorageEngine = new LocalStorageDocumentEngine()
+  private currentType: string = `localStorage`
+
+  /**
+   * 初始化存储引擎
+   */
+  async init() {
+    const storageType = await store.get(`docStorageType`) || `localStorage`
+    await this.setStorageType(storageType)
+  }
+
+  /**
+   * 设置存储类型
+   */
+  async setStorageType(type: string) {
+    this.currentType = type
+    await store.set(`docStorageType`, type)
+
+    switch (type) {
+      case `webdav`:
+        this.engine = new WebDAVDocumentEngine()
+        break
+      case `cos`:
+        this.engine = new COSDocumentEngine()
+        break
+      case `localStorage`:
+      default:
+        this.engine = new LocalStorageDocumentEngine()
+        break
+    }
+  }
+
+  /**
+   * 获取当前存储类型
+   */
+  getCurrentType(): string {
+    return this.currentType
+  }
+
+  /**
+   * 获取当前引擎
+   */
+  getEngine(): DocumentStorageEngine {
+    return this.engine
+  }
+
+  /**
+   * 获取所有文档
+   */
+  async getDocuments(): Promise<DocumentData[]> {
+    return this.engine.getDocuments()
+  }
+
+  /**
+   * 保存所有文档
+   */
+  async saveDocuments(documents: DocumentData[]): Promise<void> {
+    return this.engine.saveDocuments(documents)
+  }
+
+  /**
+   * 获取当前文档ID
+   */
+  async getCurrentDocumentId(): Promise<string | null> {
+    return this.engine.getCurrentDocumentId()
+  }
+
+  /**
+   * 保存当前文档ID
+   */
+  async saveCurrentDocumentId(id: string): Promise<void> {
+    return this.engine.saveCurrentDocumentId(id)
+  }
+
+  /**
+   * 获取项目配置
+   */
+  async getProjectConfig(): Promise<ProjectConfig | null> {
+    return this.engine.getProjectConfig()
+  }
+
+  /**
+   * 保存项目配置
+   */
+  async saveProjectConfig(config: ProjectConfig): Promise<void> {
+    return this.engine.saveProjectConfig(config)
+  }
+
+  /**
+   * 检查连接状态
+   */
+  async checkConnection(): Promise<boolean> {
+    if (this.engine.checkConnection) {
+      return this.engine.checkConnection()
+    }
+    return true
+  }
+
+  /**
+   * 同步数据到新的存储平台（包括文档和配置）
+   */
+  async syncToNewStorage(newType: string, documents: DocumentData[], currentId: string): Promise<void> {
+    const oldType = this.currentType
+
+    // 先从当前存储获取配置
+    const config = await this.getProjectConfig()
+
+    // 切换到新存储
+    await this.setStorageType(newType)
+
+    try {
+      // 保存文档数据
+      await this.saveDocuments(documents)
+      await this.saveCurrentDocumentId(currentId)
+
+      // 保存配置数据
+      if (config) {
+        await this.saveProjectConfig(config)
+      }
+    }
+    catch (error) {
+      // 同步失败，回滚到原来的存储
+      await this.setStorageType(oldType)
+      throw error
+    }
+  }
+
+  /**
+   * 从远程下载数据到本地（包括文档和配置）
+   */
+  async downloadFromRemote(): Promise<{
+    documents: DocumentData[]
+    currentId: string | null
+    config: ProjectConfig | null
+  }> {
+    const documents = await this.getDocuments()
+    const currentId = await this.getCurrentDocumentId()
+    const config = await this.getProjectConfig()
+
+    return { documents, currentId, config }
+  }
+
+  /**
+   * 上传本地数据到远程（包括文档和配置）
+   */
+  async uploadToRemote(documents: DocumentData[], currentId: string, config?: ProjectConfig): Promise<void> {
+    await this.saveDocuments(documents)
+    await this.saveCurrentDocumentId(currentId)
+
+    if (config) {
+      await this.saveProjectConfig(config)
+    }
+  }
+}
+
+/**
+ * 全局文档存储实例
+ */
+export const documentStorage = new DocumentStorageManager()
diff --git a/apps/web/src/views/CodemirrorEditor.vue b/apps/web/src/views/CodemirrorEditor.vue
index beeaa5d0f..c8d9c0655 100644
--- a/apps/web/src/views/CodemirrorEditor.vue
+++ b/apps/web/src/views/CodemirrorEditor.vue
@@ -455,9 +455,16 @@ const editorRef = useTemplateRef<HTMLDivElement>(`editorRef`)
 const progressValue = ref(0)
 
 function createFormTextArea(dom: HTMLDivElement) {
+  // 确保有文档数据
+  const currentPost = posts.value[currentPostIndex.value]
+  if (!currentPost) {
+    console.warn('No post available, waiting for data to load')
+    return null
+  }
+
   // 创建编辑器状态
   const state = EditorState.create({
-    doc: posts.value[currentPostIndex.value].content,
+    doc: currentPost.content,
     extensions: [
       markdownSetup({
         onSearch: openSearchWithSelection,
@@ -535,13 +542,16 @@ function createFormTextArea(dom: HTMLDivElement) {
 }
 
 // 初始化编辑器
-onMounted(() => {
+onMounted(async () => {
   const editorDom = editorRef.value
 
   if (editorDom == null) {
     return
   }
 
+  // 等待文档数据加载完成
+  await postStore.loadFromStorage()
+
   // 初始化渲染器（新主题系统）
   renderStore.initRendererInstance({
     isMacCodeBlock: themeStore.isMacCodeBlock,
@@ -553,11 +563,13 @@ onMounted(() => {
 
   nextTick(() => {
     const editorView = createFormTextArea(editorDom)
-    editor.value = editorView
+    if (editorView) {
+      editor.value = editorView
 
-    // AI 工具箱已移到侧边栏，不再需要初始化编辑器事件
-    editorRefresh()
-    mdLocalToRemote()
+      // AI 工具箱已移到侧边栏，不再需要初始化编辑器事件
+      editorRefresh()
+      mdLocalToRemote()
+    }
   })
 })
 
diff --git a/docs/document-storage.md b/docs/document-storage.md
new file mode 100644
index 000000000..490931035
--- /dev/null
+++ b/docs/document-storage.md
@@ -0,0 +1,203 @@
+# 文档存储配置说明
+
+## 概述
+
+文档存储功能允许您将 Markdown 文档保存在不同的存储平台，包括：
+
+- **LocalStorage**：浏览器本地存储（默认）
+- **WebDAV**：支持 WebDAV 协议的云存储服务（如坚果云、Nextcloud）
+- **腾讯云 COS**：腾讯云对象存储服务
+
+## 使用方法
+
+### 打开文档存储配置
+
+1. 点击顶部菜单栏的「文件」
+2. 选择「文档存储配置」
+
+### 配置存储平台
+
+#### 1. LocalStorage（默认）
+
+- 无需配置
+- 数据保存在浏览器本地
+- ⚠️ 清除浏览器数据会导致文档丢失
+
+#### 2. WebDAV
+
+**配置参数：**
+
+- **WebDAV 地址**：WebDAV 服务器地址
+  - 示例：`https://dav.jianguoyun.com/dav/`
+- **用户名**：WebDAV 账号用户名
+- **密码**：WebDAV 账号密码或应用密码
+- **存储路径**：文档存储的目录路径（可选）
+  - 默认：`/md-documents`
+
+**坚果云配置示例：**
+
+1. 登录坚果云网页版
+2. 进入「账户信息」→「安全选项」→「第三方应用管理」
+3. 生成应用密码
+4. 填写配置：
+   - WebDAV 地址：`https://dav.jianguoyun.com/dav/`
+   - 用户名：你的坚果云邮箱
+   - 密码：生成的应用密码
+
+#### 3. 腾讯云 COS
+
+**配置参数：**
+
+- **SecretId**：腾讯云 API 密钥 ID
+- **SecretKey**：腾讯云 API 密钥
+- **Bucket**：存储桶名称
+- **Region**：存储桶所在区域
+  - 示例：`ap-guangzhou`
+- **存储路径**：文档存储的目录（可选）
+  - 默认：`md-documents`
+
+**获取腾讯云密钥：**
+
+1. 登录 [腾讯云控制台](https://console.cloud.tencent.com/)
+2. 访问 [API 密钥管理](https://console.cloud.tencent.com/cam/capi)
+3. 创建或查看 SecretId 和 SecretKey
+
+### 切换存储平台
+
+1. 在「存储设置」标签页选择目标存储平台
+2. 系统会提示确认切换
+3. 确认后，当前所有文档数据会自动同步到新平台
+
+⚠️ **注意**：切换前请确保已正确配置目标平台的参数
+
+### 数据同步
+
+在「同步管理」标签页，您可以：
+
+- **同步到云端**：将本地数据（文档+配置）手动同步到云端存储
+- **从云端加载**：从云端加载数据（文档+配置）覆盖本地数据（⚠️ 会覆盖本地所有文档和配置）
+
+**同步的配置包括：**
+
+1. **图床配置**
+   - GitHub、阿里云 OSS、腾讯云 COS、七牛云、MinIO、Telegram、公众号、Cloudflare R2、又拍云、Cloudinary 等
+   - 当前选中的图床类型 (`imgHost`)
+   - 图片压缩设置 (`useCompression`)
+
+2. **主题和样式配置**
+   - 主题 (`theme`)
+   - 字体家族 (`fontFamily`)
+   - 字体大小 (`fontSize`)
+   - 主色调 (`primaryColor`)
+   - 代码块主题 (`codeBlockTheme`)
+   - 图注格式 (`legend`)
+   - Mac 代码块样式 (`isMacCodeBlock`)
+   - 代码行号显示 (`isShowLineNumber`)
+   - 引用状态 (`isCiteStatus`)
+   - 字数统计 (`isCountStatus`)
+   - 段落缩进 (`isUseIndent`)
+   - 两端对齐 (`isUseJustify`)
+   - 预览宽度 (`previewWidth`)
+
+3. **UI 界面配置**
+   - 编辑器位置 (`isEditOnLeft`)
+   - AI 工具箱显示 (`showAIToolbox`)
+   - 右侧滑块状态 (`isOpenRightSlider`)
+   - 文章列表滑块状态 (`isOpenPostSlider`)
+   - 浮动目录固定 (`isPinFloatingToc`)
+   - CSS 编辑器显示 (`isShowCssEditor`)
+
+4. **CSS 编辑器配置**
+   - 自定义 CSS 方案 (`cssContentConfig`)
+
+5. **其他配置**
+   - 自定义上传表单 (`formCustomConfig`)
+   - 文档存储配置 (`webdavDocConfig`, `cosDocConfig`, `docStorageType`)
+   - 复制模式 (`copyMode`)
+   - 排序模式 (`sortMode`)
+
+**注意：** 文档内容 (`posts`) 和当前文档 ID (`currentPostId`) 通过文档存储系统单独管理，不在配置同步中。
+
+### 测试连接
+
+在配置云端存储后，可以点击「测试连接」按钮验证配置是否正确。
+
+## 自动保存
+
+文档和配置会在以下情况自动保存到配置的存储平台：
+
+- **文档自动保存**：编辑文档内容时、添加/删除/重命名文档时、切换当前文档时
+- **配置自动保存**：通过 `store.reactive()` 的配置会自动保存到 localStorage
+- **手动同步**：使用「同步到云端」功能将所有配置上传到云端存储
+
+**重要提示**：
+- Store 状态（如主题、CSS 配置等）通过 `store.reactive()` 自动保存到 localStorage
+- 同步到云端时，会读取所有 Store 的**当前运行时状态**，确保最新的配置被上传
+- 修改 CSS 自定义面板等配置后，点击「同步到云端」即可保存到云端
+
+## 常见问题
+
+**Q: 切换存储平台后，原平台的数据会丢失吗？**
+
+A: 不会。切换时会将当前数据同步到新平台，但原平台的数据仍然保留。
+
+**Q: 如何备份文档？**
+
+A: 可以通过以下方式备份：
+1. 切换到云端存储平台（WebDAV 或 COS）
+2. 使用「文件」→「导出 .md」导出单个文档
+3. 使用「导入/导出项目配置」备份完整配置和数据
+
+**Q: WebDAV 连接失败怎么办？**
+
+A: 请检查：
+1. WebDAV 地址是否正确（注意 https/http）
+2. 用户名和密码是否正确
+3. 是否使用了应用密码（如坚果云）
+4. 网络连接是否正常
+
+**Q: 多设备如何同步？**
+
+A: 
+1. 在第一台设备上配置云端存储（WebDAV 或 COS）
+2. 点击「同步到云端」上传文档和配置
+3. 在其他设备上使用相同的云端存储配置
+4. 使用「从云端加载」获取文档和配置数据
+5. 刷新页面以应用配置
+6. 之后编辑会自动同步到云端
+
+⚠️ **注意**：从云端加载配置后需要刷新页面才能生效
+
+## 技术说明
+
+### 存储结构
+
+云端存储会创建以下文件：
+
+- `documents.json`：包含所有文档的数据
+- `current.txt`：当前选中的文档 ID
+- `config.json`：项目配置数据（图床配置等）
+
+### 数据格式
+
+```json
+[
+  {
+    "id": "uuid",
+    "title": "文档标题",
+    "content": "文档内容",
+    "history": [...],
+    "createDatetime": "2024-01-01T00:00:00.000Z",
+    "updateDatetime": "2024-01-01T00:00:00.000Z",
+    "parentId": null,
+    "collapsed": false
+  }
+]
+```
+
+## 隐私和安全
+
+- 所有数据传输使用 HTTPS 加密
+- API 密钥仅保存在浏览器本地存储
+- 不会上传数据到第三方服务器
+- 建议定期备份重要文档