之前使用vue开发的项目频繁使用到localStorage,封装了一下

localStorage.js文件代码如下:

let obj = {};

/**
* putLocalStorage 把数据放到本地存储
* @param {*} key
* @param {*} value
*/
obj.putLocalStorage = function (key, value) {
window.localStorage.setItem(key, JSON.stringify(value));
}; /**
* getLocalStorage 获取本地存储数据
* @param {*} key
*/
obj.getLocalStorage = function (key) {
var obj = window.localStorage.getItem(key);
if (obj && obj != 'undefined' && obj != 'null') {
return JSON.parse(obj);
}
return '';
}; /**
* removeLocalStorage 清除本地数据
* @param {*} key
*/ obj.removeLocalStorage = function (key) {
if (key) {
window.localStorage.removeItem(key);
} else {
console.log(arguments)
for (var i in arguments) {
window.localStorage.removeItem(arguments[i]);
}
}
}; export default obj;

main.js中将其挂在到vue的原型属性上:

import localstorage from './assets/js/localstorage'

Vue.prototype.$localstorage = localstorage

.vue文件中的使用方法:

存储:this.$localstorage.putLocalStorage('subMenu',this.subMenu)

获取:this.$localstorage.getLocalStorage('subMenu')

清除:this.$localstorage.removeItem('subMenu')

封装LocalStorage.js的更多相关文章

  1. MUI - 封装localStorage与plus.storage

    MUI - 封装localStorage与plus.storage 2.0版本 在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存, 在切换到localstorage时 ...

  2. JsQuick--个人封装的Js库

    JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...

  3. vue todolist 封装localstorage

    //封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...

  4. 【转】封装原生JS实现Ajax

    function createXHR() { if (window.XMLHttpRequest) { //IE7+.Firefox.Opera.Chrome 和Safari return new X ...

  5. 1-7 basket.js localstorage.js缓存css、js

    basket.js 源码分析   api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/       一.前言 b ...

  6. javascript - 封装原生js实现ajax

    1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...

  7. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  8. 封装cookie.js、EventUtil.js、

    最近学习了javascript,封装好的东西看起来舒服,以备需要的时候拉出来,jquery对javascript做了很好的封装!以后会多用jquery多些 var CookieUtil = { get ...

  9. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. 避免Linux上错删文件

    前言 在linux上我们常见的问题就是一个操作不小心误删除文件,而且在linux想要恢复文件没这么简单.只有当每次删除之后才后悔莫及,参考windows中最常见的做法就是给系统装一个回收站,让每次删除 ...

  2. c#文件图片操作

    系统特殊目录路径 //取得特殊文件夹的绝对路径 //桌面 Environment.GetFolderPath(Environment.SpecialFolder.Desktop); //收藏夹 Env ...

  3. 记一次按需加载和npm模块发布实践

    按需加载 在使用 lodash 的时候我们可以使用这样的代码 //一 import {omit} from "lodash"; //二 import l from "lo ...

  4. C#之使类型参数--泛型

    1.泛型是什么 泛型的就是“通用类型”,它可以代替任何的数据类型,使类型参数化,从而达到只实现一个方法就可以操作多种数据类型的目的. 2.为什么使用泛型 举一个比较两个数大小的例子: 以上例子实现in ...

  5. centOS7下Spark安装配置

    环境说明: 操作系统: centos7 64位 3台 centos7-1 192.168.190.130 master centos7-2 192.168.190.129 slave1 centos7 ...

  6. Odoo的模块和应用程序的区别和使用

    一.模块(modules)和应用程序(application)的区别: 模块元件是Odoo应用程序的组成快.模块可以将新功能添加到Odoo,或改变现有功能.模块是一个包含名为__manifest__. ...

  7. 从零学习Fluter(九):正式使用flutter进入商业开发

    一下为下个app 功能模块简要划分 接口文档需要说明 公告接口 messageTitle -- 消息内容 红包墙接口 使用说明 地理位置定位 shareGetMoney - 分享活动金额 lookCo ...

  8. 深入浅出ES6教程模块化

    大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Promise的用法,下面我们一起来继续学习模块化: JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了 ...

  9. ConchAPI | 更智能的API监控,提升团队效率

    “昨天调好的API,怎么又挂了,竟然没有人发现?” “喂喂喂,你的API挂了,无法调用成功?哪里出问题了?” “这段时间的API数量越来越多了,有谁能好好理清下?” 现在服务端技术越来越讲究微服务化, ...

  10. 转:Git Submodule管理项目子模块

    使用场景 当项目越来越庞大之后,不可避免的要拆分成多个子模块,我们希望各个子模块有独立的版本管理,并且由专门的人去维护,这时候我们就要用到git的submodule功能. 常用命令 git clone ...