之前使用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. TabTopUnderLineLayout【自定义顶部选项卡(带下划线)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivit ...

  2. RecyclerViewSelectableAdapterDemo【封装BaseSelectableAdapter用于多选、单选,以及切换选中状态等功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录封装单选.多选.切换选中状态的BaseSelectableAdapter基类,配合Recyclerview使用. 注意:此Dem ...

  3. 《HelloGitHub》第 30 期

    公告 截止到第 30 期,贡献者 终于到达 3 位数-- 100 位.谢谢各位的支持和贡献,想要加入的小伙伴,快来推荐项目吧! <HelloGitHub>第 30 期 兴趣是最好的老师,H ...

  4. HandlerInterceptor里@Autowired对象为空的解决方法

    That's because Spring isn't managing your PagePopulationInterceptor instance. You are creating it yo ...

  5. 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  6. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  7. java爬虫系列第五讲-如何使用代理防止爬虫被屏蔽?

    本文内容 1.分析一下爬虫存在的问题及解决方案 2.webmagic中代理的使用 3.目前市面上一些比较好用的代理服务器 存在的问题 我们在使用爬虫过程中,大多都会遇到这样的问题:突然某一天爬虫爬不到 ...

  8. PHP数字金额转换大写金额

    早些年做CRM用到的一个金额转换函数,今天从旧项目中拿出来记录一下.金额转换的函数方法有很多,都很不错.不过这个是小崔刚工作的时候写的一个转换函数,多少还是有点纪念意义.如有问题请朋友们指出,小崔及时 ...

  9. html文档知识补充

    13.form表单(*******) 功能:前后数据交互,帮你提交任意的数据 input通过控制type属性来展示不同的获取用户输入的页面效果 type属性总结: text:纯文本 password: ...

  10. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...