vue本地存储的使用场景

Vue本地存储通常用于以下场景：
1. 保存用户的个性化设置，例如主题、语言等；
2. 缓存用户的浏览记录，以便下次访问时快速加载；
3. 存储用户的登录状态，以便用户下次访问时无需重新登录；
4. 存储一些临时数据，例如表单数据等。

Vue本地存储可以使用localStorage或sessionStorage来实现。localStorage保存的数据没有过期时间，除非手动清除，否则一直存在；而sessionStorage保存的数据在关闭浏览器窗口或标签页后会被清除。

相关问题

vue js 本地存储

Vue.js 提供了一种简单的方式来处理应用程序的本地存储，通常使用浏览器内置的 API，如 localStorage 和 sessionStorage。以下是关于 Vue.js 中如何使用它们的一些基本信息：

1. **localStorage**: 这是一种持久化的存储方式，数据会在用户关闭浏览器标签后仍然保留。在 Vue 中，你可以通过 `this.$store` 或者直接使用 `window.localStorage` 来访问它。例如，设置值：

   this.$set(this.$store.state, 'key', 'value');
   // 或者
   window.localStorage.setItem('myKey', 'myValue');

2. **sessionStorage**: 存储的数据仅在当前会话期间有效，即当用户关闭浏览器标签时会被清除。操作方式类似 localStorage。

3. **Vuex** (状态管理库): 当你在 Vue 应用中使用 Vuex 时，可以创建一个 store，将本地存储的操作封装起来，以便于在组件间共享状态。

4. **vue-router**: 路由元信息（route meta）也可以用于临时存储一些需要跨页面传递的信息，虽然不是严格的本地存储，但在某些场景下可以起到类似作用。

5. **使用插件**: 另外还有第三方插件，如 vuex-persistedstate、vue-local-storage 等，可以简化对本地存储的操作并提供更好的兼容性和定制化选项。

vue项目使用本地字体

### 配置和使用本地自定义字体

#### 放置字体文件
为了在 Vue 项目中正确配置和使用本地字体，首先需将字体文件放置于项目的合适位置。一般情况下，建议创建一个专门用于存储静态资源的文件夹，比如 `src/assets/fonts` 或者根目录下的 `static/fonts` 文件夹[^1]。

#### 修改 CSS 加载字体
接着，在项目的样式表（如 `App.vue` 中 `<style>` 标签内或是独立的 `.css`/`.scss` 文件里），利用 `@font-face` 定义新的字体族名称并指定字体路径：

/* src/styles/main.css */
@font-face {
    font-family: 'CustomFont'; /* 自定义字体名 */
    src: url('../assets/fonts/custom-font.woff2') format('woff2'),
         url('../assets/fonts/custom-font.woff') format('woff');
}
body, html {
    font-family: 'CustomFont', sans-serif;
}

上述代码片段展示了如何声明一个新的字体家族名为 `'CustomFont'` 并指定了不同格式的字体文件作为来源。注意调整相对路径以匹配实际存放的位置。

对于特定组件内的局部应用，则可以在单文件组件中的 `<style scoped>` 下同样采用 `@font-face` 来限定作用范围；而对于全局性的设置则推荐放在公共样式文件中以便统一管理。

#### 缓存策略提升性能
考虑到大尺寸字体可能影响首屏渲染速度，可以考虑实施一些缓存措施来改善体验。例如，通过 HTTP 头部设置长期有效的缓存控制指令 (`Cache-Control`) 和 ETag 值让浏览器能够更高效地重用已下载过的字体资源[^2]。

另外还可以借助 Service Worker 实现离线支持以及预取机制提前获取必要的字体数据，进一步缩短真实场景下用户的等待时间。

#### 使用图标字体库 Iconfont
如果涉及到的是来自阿里巴巴矢量图标的 iconfont 字体方案，那么除了按照前述方式引入外，还需确认其对应的 `font-family` 是否已被正确定义为 `"iconfont"` ，这通常是在阿里云平台生成相应链接时自动完成的工作[^3]。

最后提醒开发者们关注生产环境下构建工具链对字体资源处理的方式，确保打包后的产物能正常工作而不丢失任何依赖项[^5]。