存储方式

trim() 是 JavaScript 字符串的方法，作用是：

• 去掉字符串两端的空白字符：包括空格、换行、制表符等。
• 中间的字符不会被删掉，只处理“开头”和“结尾”的空白。

一、前端本地存储（浏览器）

• localStorage

  • 按键值对存字符串（通常 JSON 序列化后存）。
  • 持久保存，不主动清除就一直在。
  • 适合：用户偏好、主题设置、简单缓存等。

• sessionStorage

  • 和 localStorage 类似，但只在当前标签页会话内有效，页面关掉就没了。
  • 适合：临时会话数据，比如某个步骤表单中间状态。

• Cookie

  • 会在每次 HTTP 请求时自动携带到服务器（同域）。
  • 容量小，常用于存放登录状态标识、简单配置。
  • 一般不再放太多业务数据。

• IndexedDB

  • 浏览器内的“迷你数据库”，支持大量结构化数据、索引查询。
  • 适合：离线应用、大量本地缓存（比如离线笔记、缓存接口数据）。

二、前端内存中的数据

• 组件的 data / ref / reactive

  • 只在当前页面运行时存在，刷新就丢失。

• 状态管理（比如 Vuex / Pinia）

  • 在应用运行期间共享状态；若不配合本地存储，同样刷新会丢。

三、后端存储（通常通过接口访问）

• 关系型数据库：MySQL、PostgreSQL、SQL Server 等

  • 用表、行、列管理数据，支持 SQL 查询，适合大部分业务数据（用户、订单等）。

• NoSQL 数据库：MongoDB、Redis 等

  • MongoDB：文档型存储，结构更灵活。
  • Redis：内存型，读写极快，多用于缓存、会话、计数等。

• 文件存储 / 对象存储：本地文件系统、OSS、S3 等

  • 存图片、视频、附件等大文件。

四、怎么理解“该用哪种？”

• 只在当前页面用一下、刷新丢了没关系 → 组件状态 / store。
• 页面刷新后也要记住（比如用户名、语言设置） → localStorage 或 IndexedDB。
• 涉及真正的“业务数据”（用户、订单、文章） → 放后端数据库，通过接口读写。

如果你说的是这个 Vue 项目里“保存名字”，想持久保存到本地，可在 saveName 里顺便用 localStorage.setItem('ly', newName.value.trim())，需要时再从 localStorage 里读出来。需要的话我可以直接帮你改对应代码。