vue-ls vue 本地储存示例
Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage
一个vue封装的本地储存的方法。
安装
Npm
npm install vue-ls --save
Yarn
yarn add vue-ls
使用
Vue-ls Storage API
import Storage from 'vue-ls';options = {namespace: 'vuejs__', // key键前缀name: 'ls', // 命名Vue变量.[ls]或this.[$ls],storage: 'local', // 存储名称: session, local, memory
};Vue.use(Storage, options);
// 或 Vue.use(Storage);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返回默认值10 let callback = (val, oldVal, uri) => {console.log('localStorage change', val);} Vue.ls.on('foo', callback) //侦查改变foo键并触发回调 Vue.ls.off('foo', callback) //不侦查Vue.ls.remove('foo'); // 移除}
});
Global(全局)
Vue.ls
Context(上下文)
this.$ls
API 说明
Vue.ls.get(name, def)
返回storage中 name
值。在返回之前,内部解析JSON中的值
def
: 默认null, 如果为设置则返回name
.
Vue.ls.set(name, value, expire)
在storage设置 name
的 value
.并将 value
转化为JSON
expire
: 默认为 null
, name
有效时间以毫秒为单位
Vue.ls.remove(name)
从storage中移除 name
. 成功移除 true, 否则返回false.
Vue.ls.clear()
清除storage.
Vue.ls.on(name, callback)
持续监听 name
在其他标签上的更改,更改时触发 callback
, 传递以下参数:
newValue
: 当前storage中name
, 从持久化的JSON中解析oldValue
: 旧的storage中name
, 从持久化的JSON中解析url
: 修改来自选项卡的URL
Vue.ls.off(name, callback)
删除以前的侦听器 Vue.ls.on(name, callback)
vue-ls vue 本地储存示例相关推荐
- 使用Vue 2.0+本地储存,留言板
留言板思路 // 把对象添加到数组的最前面 unshift // 数据与表单进行绑定 v-model <!DOCTYPE html> <html><head>&l ...
- 【Vue】Vue入门 -(本地篇+网络篇)代码示例及运行效果
一.Vue 可参考:Vue官方文档 Vue 将 DOM 元素看作是对象,可以将元素与Vue实例绑定,实现通过操作数据改变元素内容.不需要用 jQuery 手写各种各样的选择器了. 二.本地篇:Vue基 ...
- Ant Design of Vue 学习 svn本地服务器 svn客户端 本地发布 ‘isRootMenu‘ is underfined
目录 一.设计语言学习 1. 版本要求 2. 按需引入文件配置的2种方式 3. 组件列表 4.引入单个组件注意 5.配置.babelrc 二.搭建项目 1.安装vue的脚手架 vue/cli (vu ...
- Vue第一部分(1):Vue简介以及第一个示例
Vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的JavaScript框架.封装了原生的DOM操作,无需进行任何手动的DOM编码即可完成页面数据的渲染. MVVM模 ...
- vue项目storage本地存储
1.在model文件夹下面新建一个storage.js const storage = {set(key,value){sessionStorage.setItem(key,JSON.stringif ...
- vue中获取本地IP地址
vue中获取本地IP地址 IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的: http://pv.sohu.com/cityjson?ie=utf-8 ...
- 【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录 一.本地存储 1.概念 2.接口 3.实际操作 二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项 三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
- vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法
1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good ...
- WEBRTC + vue 建立连接 本地测试
WEBRTC + vue 建立连接 本地测试 有socket网络远端交互版本的 可以评论联系我 我发出来 vue复制到文件中 <template><div class="h ...
最新文章
- vba thisworkbook 切换表 执行 速度慢_带你初探VBA事件的大门—工作簿事件
- Linux面试相关 c程序的运行流程
- ClassLoader 初步
- linux curl发送POST请求
- 回看2020-数据库大讲堂
- notepad++ 远程连接阿里云服务器
- java操作日期的相关工具类,拿去即用
- python list sort by,python中List的sort方法指南
- OpenCV精进之路(十五):特征检测和特征匹配方法汇总
- compose RxJava笔记
- AssetBundle的一些笔记
- 由儿时的游戏打保猜最广想到的
- Review JDBC
- python 之selectors 实现文件上传下载
- G120变频器如何通过BOP-2操作面板或Startdrive复位出厂参数?
- mysql数据一条复制_Mysql 复制一条数据
- 1453 : 当小偷遇见了悍匪
- RHEL5 Oracle 11G R2 RAC 静默安装 (一) GI安装前 准备
- 计算机考试准考证没有照片
- zynq petalinux编译系统启动文件实战应用
热门文章
- yum php 降级 5.3,CentOS 5.3 通过yum升级php的方法
- matlab图像降噪_图像超分:RealSR
- Qt拖放 drag and drop
- Existing lock /var/run/yum.pid: another copy is running as pid
- Mysql ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA
- day 05总结(格式化输出的三种方式/基本运算符/if判断)
- CentOS7 Mysql5.7.22 源码安装
- Java 笔记——在 IDEA 中使用 Maven 配置和使用 MyBatis
- Spark Mllib里的如何对单个数据集用斯皮尔曼计算相关系数
- PHP实现http与https转化