Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解

简介: Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解

一、介绍

在Vue.js的开发过程中,我们经常需要在客户端存储一些数据,以便在用户关闭页面或刷新后能够恢复之前的状态。Vue-ls插件就是一个为Vue.js设计的本地存储解决方案,它基于localStorage和sessionStorage,使得在Vue组件中存取数据变得异常简单。


二、安装

npm install vue-ls --save


三、使用

1、在main.js中导入插件并配置

main.js

import Vue from 'vue'
import Storage from 'vue-ls';
// vue-ls 的配置
const storageOptions = {
    namespace: 'vue_',   // key 键的前缀(随便起)
    name: 'ls',          // 变量名称(随便起) 使用方式:Vue.变量名称 或 this.$变量名称
    storage: 'local'     // 存储方式: session, local, memory
}

Vue.use(Storage, storageOptions);

其中options是配置选项,可以设置以下字段:

  • namespace:命名空间,默认为"ls"。
  • name:存储名称,可以是一个数组,用于批量存储。默认为"ls"。
  • storage:存储引擎,LocalStorage或SessionStorage,默认为LocalStorage。
  • expries:过期时间,单位为毫秒数,默认为0,表示永不过期。
  • hasProto:是否在原型上使用getter和setter,默认为true。
2、在组件中使用

app.vue

new Vue({
    el: '#app',
    mounted: function() {
        Vue.ls.set('foo', 'boo');
        // 设置有效期
        Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //有效1小时
        Vue.ls.get('foo');
        Vue.ls.get('boo', 10); // 如果没有设置boo,返回默认值10
        
        let callback = (val, oldVal, uri) => {
          console.log('localStorage change', val);
        } 
        
        Vue.ls.on('foo', callback) //侦查改变foo键并触发回调
        Vue.ls.off('foo', callback) //不侦查
        
        Vue.ls.remove('foo'); // 移除
    }
});
3、全局使用
Vue.ls.set('key', 'value')
3、上下文使用
this.$ls.set('key', 'value')


四、API

1、获取数据
Vue.ls.get(name, def)

返回storage中 name值。在返回之前,内部解析JSON中的值

def:默认为 null。如果 key 不存在,则返回 def。

methods: {
    getKey () {
      // age 和 age2 都不存在
      const age = this.$ls.get('age')
      const age2 = this.$ls.get('age2', 22)
      console.log(age)    // null
      console.log(age2)   // 22
    }
  }
2、设置数据
Vue.ls.set(name, value, expire)

设置一个 key,并且可以设置有效时间。

expire:默认为 null。name 的有效时间,单位为毫秒。

methods: {
    setKey () {
        this.$ls.set('age', 22)   // age 的有效时间为永久,除非自动清除
        this.$ls.set('name', 'cez', 3000)   // name 的有效时间为 3s,3s 后为 null
    }
}
3、移除数据
Vue.ls.remove(name)

从存储中删除某一个 key,成功返回 true,否则返回 false。

methods: {
    removeKey () {
        const age = this.$ls.remove('age')
        console.log(age)   // undefined:不管删除成功还是删除失败都会返回 undefined,和官方解析不一样,不知道为什么??
    }
}
4、清空数据
Vue.ls.clear()

清空所有 key。

methods: {
    clearKey () {
        this.$ls.clear()
    }
}
5、监听数据

Vue.ls.on(name, callback)

设置侦听器,监听 key,若发生变化时,就会触发回调函数 callback。

callback 接受三个参数:

  • newValue:存储中的新值
  • oldValue:存储中的旧值
  • url:修改来自选项卡的 url
6、移除监听

Vue.ls.off(name, callback)

删除设置的侦听器


五、使用示例

1、单独的 js 文件
// webStorage.js

import Storage from 'vue-ls';
const localStorageOptions = {
    namespace: 'vue-', // key prefix
    name: 'ls', // name variable Vue.[ls] or this.[$ls],
    storage: 'local' // storage name session, local, memory
};
const sessionStorageOptions = {
    namespace: 'vue-', // key prefix
    name: 'ss', // name variable Vue.[ls] or this.[$ls],
    storage: 'session' // storage name session, local, memory
};

export default {
    ls: Storage.useStorage(localStorageOptions).ls,
    ss: Storage.useStorage(sessionStorageOptions).ls
};
2、使用方法
import webStorage from '@/utils/webStorage.js';
webStorage.ls.set('token');
webStorage.ss.set('token');


六、typescript+vue3使用vue-ls

1、新建 storage.ts
import Storage from 'vue-ls';
const options = {
  namespace: 'vuejs__', // key prefix
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};

const { ls } = Storage.useStorage(options)

export default ls

2、组件导入
<script lang="ts" setup>
import ls from "@/util/storage/"
ls.set('user','admin',60*60*1000)
</script>


七、注意事项

  • 数据安全性:localStorage和sessionStorage中的数据是明文存储的,因此不适合存储敏感信息。对于需要保密的数据,建议使用其他更安全的方式进行存储。
  • 数据大小限制:不同浏览器对localStorage和sessionStorage的存储大小有不同的限制,一般来说,单个域名下的存储限制在5MB左右。因此,不建议在客户端存储大量数据。
  • 数据持久性:localStorage中的数据是持久化的,即使用户关闭浏览器或重启设备,数据仍然会保留。而sessionStorage中的数据则会在页面会话结束时被清除。因此,在选择存储方式时,需要根据实际需求进行权衡。


目录
相关文章
|
9天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
31 1
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
696 1
|
9天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
25 2
|
16天前
|
JavaScript 前端开发 测试技术
探索现代JavaScript开发的最佳实践
本文探讨了现代JavaScript开发中的最佳实践,涵盖ES6+特性、现代框架使用、模块化与代码分割、测试驱动开发、代码质量与性能优化、异步编程、SPA与MPA架构选择、服务端渲染和静态站点生成等内容,旨在帮助开发者提升代码质量和开发效率。
|
24天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
19天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
21天前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
39 4
|
24天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
25天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
48 2
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
91 8