之前使用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. 用命令行撤销工作区的所有更改(修改文件&&新增文件)

    话说起来之前放弃工作区所有的更改,我一直都是直接用VSCode在workingTree的按钮,如下:   直到有一天我感觉这样不够酷,于是我试了git reset --hard. 然并卵,这个命令虽然 ...

  2. 面向对象之七大基本原则(javaScript)

    1. 前言 2. 单一职责 3. 开闭原则 4. 里氏替换 5. 依赖倒置 6. 接口隔离 7. 迪米特法则 8. 组合聚合复用原则 9. 总结 1. 前言 面向对象编程有自己的特性与原则,如果对于面 ...

  3. 【网摘】EasyUI常用控件禁用启用方法

    1.validatebox可以用的用法:前两种适用于单个的validatebox; 第三种应用于整个form里面的输入框; <1>.$("#id").attr(&quo ...

  4. C# 曲线上的点(一) 获取指定横坐标对应的纵坐标值

    获取直线上的点,很容易,那曲线呢?二阶贝塞尔.三阶贝塞尔.多段混合曲线,如何获取指定横坐标对应的纵坐标? 如下图形: 实现方案 曲线上的点集 Geometry提供了一个函数GetFlattenedPa ...

  5. 命令模式 Command 行为型 设计模式(十八)

    命令模式(Command) 请分析上图中这条命令的涉及到的角色以及执行过程,一种可能的理解方式是这样子的: 涉及角色为:大狗子和大狗子他妈 过程为:大狗子他妈角色 调用 大狗子的“回家吃饭”方法 引子 ...

  6. U813.0操作员功能权限和数据权限的设置

    操作员的权限有功能权限.数据权限.金额权限. 1. 给操作员设置功能权限,操作员才能进入系统进行相关业务操作. Admin用户登录无法修改账套,但可以新建.引入.输出.Demo用户每次只能进入一个账套 ...

  7. dede首页、列表页调用非缩略图

    在include/extend.func.php末尾添加 function firstimg($str_pic) { $str_sub=substr($str_pic,0,-7).strrchr($s ...

  8. 轻松学习UML之用例图,时序图

    本文主要讲解UML图中的用例图(Use Case Diagram)和时序图(Sequence Diagram)相关内容,如有不足之处,还请指正. 概述 统一建模语言(UML,UnifiedModeli ...

  9. 阿里云CentOS安装PostgreSQL

    在PostgreSQL官方文档:https://www.postgresql.org/download/linux/redhat/ 有选项和说明 1.检查有没安装:rpg -ga | grep pos ...

  10. Java中String、StringBuilder、StringBuffer的区别

    常量还是变量: String是字符串常量(以final修饰符进行修饰,不可更改): StringBuilder是字符串变量 StringBuffer是字符串变量 线程安全: String无所谓线程安全 ...