vue2：vue-ls数据存储插件使用教程
文章目录
- 简介
- 一、Vue-ls对比原生API
- 二、安装和使用
- 1.安装
- 2.引入与配置 (在 main.js 中)
- 3.在组件中使用
- 1.存储数据（支持设置过期时间，单位毫秒）
- 2.读取数据（支持默认值）
- 3.移除单个
- 4.清除所有（当前命名空间下）
- 5.监听变化（例如，在其他标签页修改了相同key）
- 6.取消监听变化（组件销毁时使用）
简介
Vue-ls 是一款专门为 Vue.js 应用设计的插件，它的核心作用是为浏览器本地存储（Web Storage）提供了一个与 Vue 深度集成的、功能更强大的接口。它本质上是对原生 localStorage、sessionStorage 的增强封装。
一、Vue-ls对比原生API
| 特性 | 原生 Web Storage API | vue-ls 插件 |
|---|---|---|
| 数据格式 | 只能存储字符串，存对象需手动 JSON.stringify | 自动序列化，可直接存储对象、数组等 |
| 过期时间 | 不支持 | 支持设置过期时间（毫秒） |
| 命名空间 | 需手动管理，易冲突 | 支持前缀隔离（namespace），避免冲突 |
| 跨标签页监听 | 需手动监听 storage 事件 | 提供 .on() 和 .off() 方法方便监听 |
| Vue集成度 | 需单独引入和使用 | 深度集成，可通过 Vue.ls 或组件内 this.$ls 调用 |
二、安装和使用
1.安装
npminstallvue-ls --save# 或yarnaddvue-ls2.引入与配置 (在 main.js 中)
importVuefrom'vue'importStoragefrom'vue-ls'constoptions={namespace:'vue_',// 存储键名前缀，用于隔离项目，可自定义[citation:6][citation:9]name:'ls',// 注入Vue的属性名，默认通过 `this.$ls` 或 `Vue.ls` 调用[citation:3][citation:8]storage:'local'// 存储类型：'local'（默认，即localStorage）、'session'、'memory'[citation:3][citation:4]}Vue.use(Storage,options)数据保存地方对比:
| 存储位置 | 数据特点 | 是否共享 |
|---|---|---|
| local (对应 localStorage) | 持久化存储，关闭浏览器后数据仍在。 | 同一域名下的所有标签页共享。 |
| session (对应 sessionStorage) | 会话级存储，关闭浏览器或标签页后数据丢失。 | 仅当前标签页独享。 |
| memory (内存存储) | 仅存在于内存，页面刷新后数据丢失。 | 仅当前页面生命周期内有效。 |
3.在组件中使用
1.存储数据（支持设置过期时间，单位毫秒）
this.$ls.set('userToken','abc123',60*60*1000)// 存储，1小时后过期，不设置，就是永久保存2.读取数据（支持默认值）
lettoken=this.$ls.get('userToken')letname=this.$ls.get('userName','默认名')// 若key不存在，返回'默认名'[citation:6]3.移除单个
this.$ls.remove('userToken')// 移除单个4.清除所有（当前命名空间下）
this.$ls.clear()// 清除所有（当前命名空间下）5.监听变化（例如，在其他标签页修改了相同key）
// 监听变化（例如，在其他标签页修改了相同key）this.$ls.on('userToken',(newVal,oldVal,url)=>{console.log('数据变了',newVal)})6.取消监听变化（组件销毁时使用）
beforeDestroy(){// 组件销毁前移除监听this.$ls.off('KEY_TEMPLATES',this.handleTemplateChange);},