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

基于微信小程序实现图片压缩、裁剪、尺寸调整的实践总结

YGHub

2025-01-02

4

Vue3 作用域插槽，提升组件复用性的利器

YGHub

2024-12-03

1

Vue3 子组件 defineExpose 暴露方法无效的三种常见场景及解决方案

YGHub

2024-11-24

7

Vue3 组件通信实战，实现跨组件数据更新

YGHub

2024-11-21

8

Vue3 keep-alive 缓存机制让页面切换更流畅

YGHub

2024-11-21

2