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的更多相关文章

  1. 关于local storage 和 session storage以及cookie 区别简析

    session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...

  2. vue操作select获取option值

    如何实时的获取你选中的值 只用@change件事 @change="changeProduct($event)" 动态传递参数 vue操作select获取option的ID值 如果 ...

  3. vue操作数组时遇到的坑

    用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法:  括号里写需要加入的元素  ...

  4. 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  5. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  6. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  7. Vue之初识Vue

    前言 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和 数据 ...

  8. Vue系列---理解Vue.nextTick使用及源码分析(五)

    _ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...

  9. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

随机推荐

  1. 基于云开发开发 Web 应用(一):项目介绍 & 初始化

    基于云开发开发 Web 应用(一):项目介绍 & 初始化 背景描述 Linux 中国曾在过去的 1 - 2 年内长期运行了一个 TL;DR 的中国版.不过当时做的版本是小程序的版本,一直以来, ...

  2. PHP批量去除文件BOM头

    auto 是否自动替换 默认否 dir 检查目录 默认./ display 是否显示所有文件 默认只显示有bom头的文件 <?php empty($_GET['auto']) && ...

  3. JS-05-元素获取

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Python3.6在win7中无法正常运行的问题

    Python3.6在启动时报缺少api-ms-win-crt-runtime-l1-1-0.dll解决靠谱方法:1.到正常的机器,或者就在开发环境,去搜索api-ms-win-crt-runtime- ...

  5. Redis搭建哨兵模式

    一 安装Redis 1. 从https://redis.io/download redis官网下载二进制包安装 例如:wget http://download.redis.io/releases/re ...

  6. This function or variable may be unsafe

    1>------ Build started: Project: wintest, Configuration: Debug Win32 ------ 1>  Source.cpp 1&g ...

  7. ARTS Week 2

    Nov 4,2019 ~ Nov 10,2019 Algorithm 本周主要的算法是如何求两个数的最大公因数.传统的想法便是对这两个数分解质因数,而后找到其公共因数,再相乘,这样就会得到最大公因数了 ...

  8. 牛客练习赛52 B Galahad (树状数组)

    题目链接:https://ac.nowcoder.com/acm/contest/1084/B 题意 5e5的区间,5e5个询求[l,r]区间内出现过的数的和 思路 1s时限,莫队显然会T 我们可以将 ...

  9. 牛客练习赛25 A 因数个数和(数论分块)

    题意: q次询问,每次给一个x,问1到x的因数个数的和. 1<=q<=10 ,1<= x<=10^9 1s 思路: 对1~n中的每个数i,i作为i,2i,3i,...的约数,一 ...

  10. 使用jQuery的插件jquery.corner.js来实现圆角效果-详解

    jquery.corner.js可以实现各种块级元素的角效果,以下为演示,详见jquery_corner.html中的注释部分,并附百度盘下载 jquery_corner.html代码如下: < ...