(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的基本原理及源码实现 回到顶部 一. 理解 ...
随机推荐
- python输出结果后面带着一个“None”
执行代码的时候,输出的结果中含有一个“None” 只要将最后一行代码的print() 去掉即可 改成 my_range.get_range() 或者是将 函数中的print(range) 改成 r ...
- [Codeforces 1228E]Another Filling the Grid(组合数+容斥)
题目链接 解题思路: 容斥一下好久可以得到式子 \(\sum_{i=0}^{n}\sum_{j=0}^{n}(-1)^{i+j}C_n^iC_n^j(k-1)^{ni+nj-ij}k^{n^2-(ni ...
- tensorflow 案例
import tensorflow as tf import numpy as np #添加一层inputs输入的数据,in_size为输入节点数,out_size为输出节点数,下一个为激励函数 de ...
- python实现ip地址的包含关系判断
python的IPy模块虽然可以实现一些ip地址的判断,但是不是很完美,有些场景根本判断不出来,还会抛出异常,比如一个地址范围和一个ip/掩码,这种不同类型就无法判断. 对此通过自己写函数来实现ip地 ...
- Redis异常 | DENIED Redis is running in protected mode because protected mode is enabled
背景 今天重新搭了个redis环境,用简单的代码去测试下是否正常, @RunWith(SpringRunner.class) @SpringBootTest public class Springbo ...
- IDEA | 识别不出自建webapp文件夹
背景: 今天自建了一个webapp文件夹,发现idea识别不出来是web应用的资源文件夹 解决方案 打开project structure配置,如下图
- 用java编写代码实现关机
public static void main(String[] args) { Runtime runtime = Runtime.getRuntime(); try { runtime.exec( ...
- Druid入门(1)—— 快速入门实时分析利器-Druid_0.17
一.安装准备 本次安装的版本是截止2020.1.30最新的版本0.17.0 软件要求 需要Java 8(8u92 +)以上的版本,否则会有问题 Linux,Mac OS X或其他类似Unix的操作系统 ...
- 文件类练习题(FileInputStream类)
应用FileInputStream类,编写应用程序,从磁盘上读取一个Java程序,并将源程序代码显示在屏幕上.(被读取的文件路径为:d:/myjava/Hello.java 内容自己决定): pack ...
- TensorFlow 中的张量,图,会话
tensor的含义是张量,张量是什么,听起来很高深的样子,其实我们对于张量一点都不陌生,因为像标量,向量,矩阵这些都可以被认为是特殊的张量.如下图所示: 在TensorFlow中,tensor实际上就 ...