【vue】vue本地储存、会话存储插件vue-ls的使用:

news2024/11/19 12:36:31

文章目录

        • 一、安装:
        • 二、vue项目中使用:
        • 三、API说明:


一、安装:
npm install vue-ls -Syarn add vue-ls
二、vue项目中使用:
//在vue项目中的入口文件main.js中引入

import Storage from 'vue-ls';

options = {
  namespace: 'vuejs__', // 存储的key的前缀
  name: 'ls', // 命名,Vue变量.[ls]或this.[$ls]。全局:Vue.ls,上下文:this.$ls
  storage: 'local', //  存储名称【三个可选项】:session, local, memory
};

Vue.use(Storage, options);

//或Vue.use(Storage);

new Vue({
    el: '#app',
    mounted: function() {
//在需要的地方进行以下的对storage的js操作,
        Vue.ls.set('foo', 'boo');//不传第三个参数的话即默认有效期值expire为null
        //Set expire for item
        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) => {//val:当前值,oldVal:旧值,uri:修改来自的选项卡的url
          console.log('localStorage change', val);
        } 
        
        Vue.ls.on('foo', callback) //侦查改变foo键并触发回调
        Vue.ls.off('foo', callback) //不侦查
        
        Vue.ls.remove('foo'); //从storage中移除,返回值true或false

        Vue.ls.clear() //清除storage
    }
});

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、API说明:

在这里插入图片描述

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

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

相关文章

DNS和ICMP协议

目录 一、DNS协议 二、ICMP协议 1.ICMP协议 2.ping命令 在讲完了OSI模型每层协议的讲解后,还有一些协议我们需要再讲解一下。 一、DNS协议 DNS是一整套从域名映射到IP地址的系统,也叫做域名解析服务,端口号为53。 我们生活中访问网站都…

微软 Win11 Dev 预览版 Build 23570 发布,修复文件资源管理器卡顿问题

本心、输入输出、结果 文章目录 微软 Win11 Dev 预览版 Build 23570 发布,修复文件资源管理器卡顿问题前言微软 Win11 Dev 预览版 Build 23570 发布,修复文件资源管理器卡顿问题完整的更新日志[Windows 中的 Copilot][开始菜单][任务栏搜索][设置] 已知问…

P1950 长方形

题目&#xff1a; P1950 长方形 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 算法&#xff1a; dp动态规划 代码&#xff1a; #include<iostream> #include<string> typedef unsigned long long ull; const int N 1010; using namespace std;int r, c, i, …

kali安装nodejs、npm失败

更新apt-get再安装&#xff0c;更新时间比较久&#xff0c;看网速&#xff0c;中间有一些确认步骤 22 apt-get update23 apt-get upgrade24 apt-get install nodejs25 node26 npm27 apt-get install npm

vulnhub靶机Funbox11

下载地址&#xff1a;Funbox: Scriptkiddie ~ VulnHub 主机发现 arp-scan -l 目标192.168.21.164 端口扫描 nmap --min-rate 1000 -p- 192.168.21.164 端口好多处理一下吧 nmap --min-rate 1000 -p- 192.168.21.164 |grep open |awk -F / {print $1} |tr \n , 端口服务版本…

Openssl数据安全传输平台004:套接字C语言API封装为C++类 / 客户端及服务端代码框架

1. 客户端C API // 客户端 // C API int sckClient_init(); /* 客户端 连接服务器 */ int sckClient_connect(char *ip, int port, int connecttime, int *connfd); /* 客户端 关闭和服务端的连接 */ int sckClient_closeconn(int connfd); /* 客户端 发送报文 */ int sckClie…

1024MSF工具的基本使用(第十五课)

1024MSF工具的基本使用(第十五课) 1 MSF 介绍 MSF&#xff08;Metasploit Framework&#xff09;是一款开源的渗透测试工具&#xff0c;旨在帮助安全专家进行安全测试&#xff0c;评估和漏洞利用。MSF提供了一系列的漏洞利用、Payload以及Post Exploit模块&#xff0c;使得渗…

【经验分享】WSL中使用USB设备

具体步骤&#xff1a; 首先在windows中安装 USBIP 工具&#xff0c;在GitHub上下载安装包并根据README文档的说明进行操作&#xff1a; 下载链接&#xff1a;https://github.com/dorssel/usbipd-win/releases 同时在 WSL Linux 端也需要安装编译内核所需的库和工具&#xff0c…

在 Python 中执行 Shell 命令并获取输出

在本文中&#xff0c;我们将学习如何借助 os.system() 从 Python 脚本执行 cmd 命令。 我们还将学习如何借助 Python 中的 subprocess 模块以更简单的方式从脚本执行 cmd 命令。 从 Python 脚本执行 CMD 命令并使用 os.system() 获取输出 我们出于不同目的在命令提示符或任何其…

Rclone连接Onedrive

一、Rclone介绍 Rclone是一款的命令行工具&#xff0c;支持在不同对象存储、网盘间同步、上传、下载数据。 我们这里连接的onedrive&#xff0c;其他网盘请查看官方文档。 注意&#xff1a; 需要先在Windows下配置好了&#xff0c;然后再将rclone配置文件复制到Linux的rclone配…

文件读取结束的判定

大家好啊&#xff0c;我们今天来补充文件操作的读取结束的判定。 被错误使用的feof 牢记&#xff1a;在文件读取过程中&#xff0c;不能用feof函数的返回值直接用来判断文件的是否结束而是应用于当文件读取结束的时候&#xff0c;判断是读取失败结束&#xff0c;还是遇到文件尾…

【鸿蒙软件开发】进度条Progress

文章目录 前言一、进度条Progress1.1 创建进度条1.2 进度条样式进度条样式ProgressType.Linear&#xff08;线性样式&#xff09;ProgressType.Ring&#xff08;环形无刻度样式&#xff09;ProgressType.ScaleRing&#xff08;环形有刻度样式&#xff09;ProgressType.Eclipse&…

028-第三代软件开发-CheckBox

第三代软件开发-CheckBox 文章目录 第三代软件开发-CheckBox项目介绍CheckBox实际使用 关键字&#xff1a; Qt、 Qml、 CheckBox、 indicator、 contentItem 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Language…

YOLO目标检测——人脸识别数据集【对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;安全监控、智能驾驶、人机交互、人脸门禁、人脸支付、人脸搜索数据集说明&#xff1a;人脸识别数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;含有人脸图片标签说明&#xff1a;使用lableimg标注软件标注&#xff0…

视频号视频怎么下载:完全教程和实用技巧

随着视频号平台的兴起&#xff0c;抖音快手视频号等平台让越来越多的用户对此喜欢&#xff0c;但对于视频号视频的下载很多人表示关注。无论是想收藏自己喜欢的视频&#xff0c;还是需要将视频用于其他用途&#xff0c;掌握视频号视频的下载方法变得至关重要。在本文中&#xf…

# Spring 事务失效场景

Spring 事务失效场景 文章目录 Spring 事务失效场景前言事务不生效未开启事务事务方法未被Spring管理访问权限问题基于接口的代理源码解读 CGLIB代理 方法用final修饰同一类中的方法调用多线程调用不支持事务 事务不回滚设置错误的事务传播机制捕获了异常手动抛了别的异常自定义…

c++ pcl点云变换骨架枝干添加树叶源码实例

程序示例精选 c pcl点云变换骨架枝干添加树叶源码实例 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《c pcl点云变换骨架枝干添加树叶源码实例》编写代码&#xff0c;代码整洁&#xff0c;…

搞个微信小程序002:个人信息

新建一个用于&#xff0c;和001中一样&#xff0c;然后&#xff0c;就改掉两个文件&#xff1a; index.wxml: <view><!-- 头像区域 --><view class"top"><view class"user-img"><image src"/images/tx.png"><…

JIT耗时优化

优质博文&#xff1a;IT-BLOG-CN 一、背景 业务流量突增&#xff0c;机器直接接入大量流量QPS2000&#xff0c;JIT和GC会消耗太多CPU资源&#xff0c;导致1-2分钟时间内的请求超时导致异常&#xff0c;因此采用流量预热的方式&#xff0c;让机器逐步接入流量&#xff0c;需要预…

学习MAVEN

MAVEN的详细介绍和作用、意义 好的&#xff0c;小朋友们&#xff0c;我们今天来聊聊一个非常神奇的工具箱&#xff0c;它的名字叫做Maven! &#x1f31f; 1. **神奇的工具箱Maven**: Maven就像是一个神奇的工具箱&#x1f9f0;&#xff0c;它可以帮助大人们把他们的电脑工…