(vue操作storage)Vue plugin for work with local storage,session storage and memo
vue-ls
https://www.npmjs.com/package/vue-ls
NPM
npm install vue-ls --save
Yarn
yarn add vue-ls
Usage
Vue storage API.
import Storage from 'vue-ls';
options = {
namespace: 'vuejs__', // key prefix
name: 'ls', // name variable Vue.[ls] or this.[$ls],
storage: 'local', // storage name session, local, memory
};
Vue.use(Storage, options);
//or
//Vue.use(Storage);
new Vue({
el: '#app',
mounted: function() {
Vue.ls.set('foo', 'boo');
//Set expire for item
Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //expiry 1 hour
Vue.ls.get('foo');
Vue.ls.get('boo', 10); //if not set boo returned default 10
let callback = (val, oldVal, uri) => {
console.log('localStorage change', val);
}
Vue.ls.on('foo', callback) //watch change foo key and triggered callback
Vue.ls.off('foo', callback) //unwatch
Vue.ls.remove('foo');
}
});
Global
Vue.ls
Context
this.$ls
API
Vue.ls.get(name, def)
Returns value under name in storage. Internally parses the value from JSON before returning it.
def: default null, returned if not set name.
Vue.ls.set(name, value, expire)
Persists value under name in storage. Internally converts the value to JSON.
expire: default null, life time in milliseconds name
Vue.ls.remove(name)
Removes name from storage. Returns true if the property was successfully deleted, and false otherwise.
Vue.ls.clear()
Clears storage.
Vue.ls.on(name, callback)
Listen for changes persisted against name on other tabs. Triggers callback when a change occurs, passing the following arguments.
newValue: the current value for name in storage, parsed from the persisted JSON
oldValue: the old value for name in storage, parsed from the persisted JSON
url: the url for the tab where the modification came from
Vue.ls.off(name, callback)
Removes a listener previously attached with Vue.ls.on(name, callback).
(vue操作storage)Vue plugin for work with local storage,session storage and memo的更多相关文章
- 关于local storage 和 session storage以及cookie 区别简析
session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...
- vue操作select获取option值
如何实时的获取你选中的值 只用@change件事 @change="changeProduct($event)" 动态传递参数 vue操作select获取option的ID值 如果 ...
- vue操作数组时遇到的坑
用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法: 括号里写需要加入的元素 ...
- 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- Vue之初识Vue
前言 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和 数据 ...
- Vue系列---理解Vue.nextTick使用及源码分析(五)
_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
随机推荐
- jmeter使用—远程分布式
今天要说的是在远程服务器上使用多台服务器进行noGUI分布式使用jmeter压测. 1.首先准备几台服务器,服务器上都需要安装同一个版本的jmeter. 2.在服务器上启动jmeter的方式是在jme ...
- 关于不同python版本print不一致的简单解决方案
经常遇到python2.x的print不带括弧,但python3.x必须要带括弧,版本不一致,需要修改,但是面对数以十计的重复劳动,不免望而却步.其他的一些不一样的地方同理. 解决方案: 运用正则化替 ...
- Git详解之安装
前言 是时候动手尝试下 Git 了,不过得先安装好它.有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允许,从源代码安装有很 ...
- 使用 web3D 技术的风力发电场展示
前言 风能是一种开发中的洁净能源,它取之不尽.用之不竭.当然,建风力发电场首先应考虑气象条件和社会自然条件.近年来,我国海上和陆上风电发展迅猛.海水.陆地为我们的风力发电提供了很好地质保障.正是 ...
- 1751: n个素数构成等差数列
#include <stdio.h>int fill(char *map,int *primes) { for (int i = 2; i < 1001; i++) { map[i] ...
- java工具类方法
1.生成16位数字(当时日期时间加随机两位数) public static String getNo16() { String getNo = getNo(); return getNo.substr ...
- 视觉slam十四讲ch5 joinMap.cpp 代码注释(笔记版)
#include <iostream> #include <fstream> using namespace std; #include <opencv2/core/co ...
- POJ 1789 Truck History (Kruskal最小生成树) 模板题
Description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks are used for v ...
- Spring Cloud(六):服务网关zuul
通过前面几篇文章的介绍,Spring Cloud微服务架构可通过Eureka实现服务注册与发现,通过Ribbon或Feign来实现服务间的负载均衡调用,通过Hystrix来为服务调用提供服务降级.熔断 ...
- ubuntu 18. root登录图形界面
修改文件 vim /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 增加两行: greeter-show-manual-login=true all-g ...