Logo

Nuxt3 中使用 localStorage 的正确姿势

author
YGHub·2024-12-01·3·字数：110 字·阅读时间：1 分钟

Vue Vue

Nuxt Nuxt

在 Nuxt3 中使用 localStorage 需要特别注意 SSR（服务端渲染）的问题。

一、基础使用方法

1.创建工具函数：

ts 
// storage.ts
 
export const useStorage = () => {
  const setItem = (key: string, value: any) => {
    if (import.meta.client) {
      window.localStorage.setItem(key, JSON.stringify(value))
    }
  }
 
  const getItem = (key: string) => {
    if (import.meta.client) {
      const value = window.localStorage.getItem(key)
      return value ? JSON.parse(value) : null
    }
    return null
  }
 
  const removeItem = (key: string) => {
    if (import.meta.client) {
      window.localStorage.removeItem(key)
    }
  }
 
  return {
    setItem,
    getItem,
    removeItem
  }
}
 

2.在组件中使用：

vue 
<script setup lang="ts">
const { setItem, getItem } = useStorage()
 
// 存储数据
setItem('user', { name: '张三', age: 25 })
 
// 获取数据
const user = getItem('user')
</script>
 

二、注意事项

1.始终检查 import.meta.client

ts 
if (import.meta.client) {
  // localStorage 操作
}
 

2.使用 ClientOnly 组件

vue 
<template>
  <ClientOnly>
    <div>
      <!-- 使用 localStorage 的内容 -->
    </div>
  </ClientOnly>
</template>
 

总结

通过使用基础工具方法，可以在 Nuxt3 中安全、高效地使用 localStorage，同时避免 SSR 相关的问题。

Preview

3

点个赞 ~

Vue Vue

Nuxt Nuxt

版权申明： © 本文著作权归YGHub所有，未经YGHub网授权许可，禁止第三方以任何形式转载和使用本文内容。

Related article

Next.js 认证方案深度对比：Next-Auth、Auth.js 与 Supabase Auth 的选择指南

YGHub

2025-03-15

3

为什么官方推荐 SWR 或 React Query 替代 useEffect 做数据获取？

YGHub

2025-03-15

2

Suspense 组件深度解析：异步渲染的优雅解决方案

YGHub

2025-03-15

2

React useActionState 深度解析：简化表单状态管理的终极工具

YGHub

2025-03-15

1

微信小程序实战：如何优雅地实现用户头像和昵称修改功能

YGHub

2025-02-15

1