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

文章目录

      • 一、介绍
      • 二、安装
      • 三、使用
        • 1、在main.js中导入插件并配置
        • 2、在组件中使用
        • 3、全局使用
        • 3、上下文使用
      • 四、API
        • 1、获取数据
        • 2、设置数据
        • 3、移除数据
        • 4、清空数据
        • 5、监听数据
        • 6、移除监听
      • 五、使用示例
        • 1、单独的 js 文件
        • 2、使用方法
      • 六、typescript+vue3使用vue-ls
        • 1、新建 storage.ts
        • 2、组件导入
      • 七、注意事项

一、介绍

在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,返回默认值10let 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)    // nullconsole.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.jsimport Storage from 'vue-ls';
const localStorageOptions = {namespace: 'vue-', // key prefixname: 'ls', // name variable Vue.[ls] or this.[$ls],storage: 'local' // storage name session, local, memory
};
const sessionStorageOptions = {namespace: 'vue-', // key prefixname: '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 prefixname: '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中的数据则会在页面会话结束时被清除。因此,在选择存储方式时,需要根据实际需求进行权衡。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SDV让汽车架构“和而不同”】

昔日以“排气管数量”和“发动机动力”为骄傲的荣耀已然成为过往。在这个崭新的时代&#xff0c;特斯拉、理想、蔚来、小鹏、零跑等新兴的汽车制造商纷纷推出了搭载可交互大屏、实现万物互联、软件功能持续更新的新车型&#xff0c;它们被誉为“车轮上的智能手机”。同时&#…

【方案】基于5G智慧工业园区解决方案(PPT原件)

5G智慧工业园区整体解决方案旨在通过集成5G通信技术、物联网、大数据和云计算等先进技术&#xff0c;实现园区的智能化、高效化和绿色化。 该方案首先构建高速、稳定的5G网络&#xff0c;确保园区内设备、人员与物流的实时连接和高效沟通。其次&#xff0c;通过工业物联网技术&…

行业观察丨服装品牌着重点:电商的数据采集与数据分析

互联网爆发的各行业&#xff0c;关注在生产、销售、穿着以及后续的处理过程中存在的问题&#xff0c;希望能对会员企业乃至整个社会贡献出自己的一份力量。让我们共同思考&#xff0c;作为品牌企业或者个体&#xff0c;如何抓住新趋势。 做渠道价格的治理需要品牌对线上数据尽数…

代码随想录算法训练营day47

题目&#xff1a;188.买卖股票的最佳时机IV、309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费 参考链接&#xff1a;代码随想录 188.买卖股票的最佳时机IV 思路&#xff1a;本题和上题的最多两次买卖相比&#xff0c;改成了最多k次&#xff0c;使用类似思路&…

MATLAB复习

MATLAB常用的标点符号 空格 变量分隔符 矩阵一行中各元素间的分隔符 程序语句关键词分隔符 逗号&#xff0c;分隔显示计算结果的各语句 变量分隔符 矩阵中一行各元素的分隔符点号.数值中的小数点 结构数组的域访问符分号&#xff1b;分隔不想显示计算结果的各语句 矩阵行与行的…

2024上海CDIE 参展预告 | 一站式云原生数字化平台已成趋势

为什么企业需要进行数字化转型&#xff1f;大家都在讨论的数字化转型面临哪些困境&#xff1f;2024.6.25-26 CDIE数字化创新博览会现场&#xff0c;展位【A18】&#xff0c;期待与您相遇&#xff0c;共同探讨企业如何利用数字化技术驱动业务增长。 一、展会介绍——CDIE数字化…

web后端

Web后端开发是Web应用开发的重要组成部分&#xff0c;主要负责处理Web应用的后端逻辑和数据存储。后端开发人员需要根据需求和设计文档&#xff0c;设计和开发Web应用的后端逻辑&#xff0c;包括数据处理、业务逻辑和API接口等。他们还需要设计和管理Web应用的数据库&#xf…

PDF秒变翻页式电子画册

​在当今数字化时代&#xff0c;将PDF文档转换成翻页式电子画册是一种提升作品展示效果和传播效率的有效方式。以下是将PDF秒变翻页式电子画册的攻略&#xff0c;帮助您轻松掌握数字创作技巧。 首先&#xff0c;选择一个合适的制作工具是关键。目前市场上有多种在线平台和软件可…

图像识别技术在人脸识别领域的新突破

图像识别技术在人脸识别领域的新突破主要体现在多个方面&#xff0c;这些突破不仅提高了人脸识别的准确性和效率&#xff0c;还拓展了其应用领域。以下是对这些新突破的详细归纳&#xff1a; 深度学习技术的应用&#xff1a; 深度学习技术&#xff0c;特别是卷积神经网络&…

内网穿透是什么?为什么需要内网穿透?小白也能看懂!

内网穿透是什么&#xff1f;为什么需要内网穿透&#xff1f;小白也能看懂&#xff01; 通俗易懂的说法 内网穿透&#xff0c;就像是你家里的后院有一个宝藏&#xff0c;但是这个宝藏只有住在你家的人才能看得到。现在&#xff0c;你想让住在远处的朋友也能欣赏到这个宝藏&…

输入系统和应用编程

目录 一、输入设备和输入系统 1.什么是输入设备&#xff1f; 2.什么是输入系统&#xff1f; 二、输入系统框架及调试 1.框架概述 2.编写 APP 需要掌握的知识 &#xff08;1&#xff09;内核中怎么表示一个输入设备&#xff1f; &#xff08;2&#xff09;APP 可以得到什…

IK分词器热刷新词库实践分享

目录 前言 什么是分词器&#xff1f; ik分词器简介 ik分词器和默认分词器的对比 ik分词器介绍 ik分词器的分词问题 自定义词库 主配置解说 通过配置文件自定义词库 Step1: 新建自定义分词库 Step2: 将我们的自定义词添加到ik的配置文件中 Step3: 重启es&#xff0c;…

黑盒测试中的完整性测试:确保系统的功能完整性

在软件开发过程中&#xff0c;为了保证系统的质量和可靠性&#xff0c;测试是一个不可或缺的环节。而黑盒测试作为常用的测试方法之一&#xff0c;以用户的角度出发&#xff0c;测试系统在不知道内部工作原理的情况下&#xff0c;对输入数据的处理和输出结果的正确性进行验证。…

react+ts 使用webp格式的图片处理

需求&#xff1a; 公司官网大图内存较大加载很慢&#xff0c;于是用webp格式的图片来替换原来的图片&#xff0c;在React项目中&#xff0c;如果你使用的是Create React App&#xff08;CRA&#xff09;或Webpack进行项目构建&#xff0c;遇到的常见错误原因可能涉及以下几点&a…

Node.js车牌识别、文档识别、OCR API-自动化录入信息

为什么人工智能如此受关注&#xff1f;因为人工智能技术在图片处理以及在感知与认知等领域的不断突破&#xff0c;带来更高的效率。没错&#xff0c;智能机器人、人工智能技术衍生的产品已经开始替代人的工作。文字录入工作较为显著&#xff0c;OCR技术成为手动录入的杀手锏&am…

MySQL字典数据库设计与实现 ---项目实战

软件准备✍&#xff1a;Mysql与Navicat可视化命令大全 ----项目实战 文章前言部分 目录 一.摘要 二.设计内容 三.项目实现 一.摘要 本项目关注于字典数据库表结构的设计和数据管理。通过现有的sql文件&#xff0c;实现system_dict_type和system_dict_data两个数据表。随后…

去中心化衍生品协议内卷,ZKX 能否通过差异化道路突出重围?

去中心化衍生品赛道目前从协议类型来看&#xff0c;主要有两种解决方案&#xff1a; 以 GMX 为代表的 Vault 模式&#xff0c;LP 作为交易者的对手盘&#xff0c;由 Orcale 喂价决定交易价格。 以 dYdX 为代表的订单薄模式&#xff0c;链下撮合链上结算。 这两种解决方案虽然…

前端 三维空间笔记

<!DOCTYPE html> <html> <head> <!-- 考点2D旋转&#xff0c;位移&#xff0c;缩放&#xff0c;倾斜和3D --> <meta charset"utf-8" /> <title>三维</title> <style type"te…

短视频剪辑都学习哪些人软件?沈阳有哪些办公软件培训学校

在学习短视频剪辑时&#xff0c;通常会接触到以下几个常用的软件&#xff0c;每个软件都有其独特的功能和优势&#xff1a; Adobe Premiere Pro&#xff1a; 功能强大&#xff0c;适用于专业级别的剪辑。支持多种格式&#xff0c;拥有丰富的插件和特效。集成了Adobe其他产品&am…

【HarmonyOS NEXT】鸿蒙customScan (自定义界面扫码)

起始版本&#xff1a;4.1.0(11) 导入模块 import { customScan } from kit.ScanKit; ViewControl 相机控制参数。 系统能力&#xff1a;SystemCapability.Multimedia.Scan.ScanBarcode 起始版本&#xff1a;4.1.0(11) 名称 类型 只读 可选 说明 width number 否 …