之前使用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. 拓扑排序的 +Leapms 线性规划模型

    知识点 拓扑排序 拓扑排序的+Leapms模型 无圈有向图 一个图G(V,E), 如果边有向且不存在回路,则为无圈有向图.在无圈有向图上可以定义拓扑排序.下图是一个无圈有向图的例子. 拓扑排序 给定一 ...

  2. c#导出文件,文件名中文乱码解决方法

    public string clFielName(string fileName) { System.Web.HttpContext curContext = System.Web.HttpConte ...

  3. 从零开始学安全(四十三)●Wireshark分析ICMP(IP)协议

    存活时间与IP分片 这里我们首先来研究一下关于IP协议的两个非常重要的概念:存活时间与IP分片.存活时间(TTL,Time to Live)用于定义数据包的生存周期,也就是在该数据包被丢弃之前,所能够 ...

  4. 移动端video不全屏播放

    <div class="m-video"> <video x5-playsinline="" playsinline="" ...

  5. vue -webkit-box-orient: vertical webpack打包后被过滤掉了 线上没有这行代码

    (1)方法一:加上绿色注释,跳过webpack的css打包 .word-overflow-{ overflow:hidden; text-overflow:ellipsis; display:-web ...

  6. webpack4.x笔记-配置基本的前端开发环境(一)

    webpack的基本使用 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包.借用 webpack 官网的图片: 虽然webpack4.x的版本可以零配 ...

  7. java基础(四):谈谈java中的IO流

    1.字节流 1.1.字节输出流output 1.1.1.数据写入文件中 通过api查找output.找到很多,其中java.io.OutputStream,OutputStream: 输出字节流的超类 ...

  8. android开发中调用python代码(带参数)

    android开发主要用到的是java代码,但是当开发涉及到一些算法时,往往用python可以提高软件的运行速度,也更加便捷,这里分享自己项目调用python代码的方式,主要有以下几个步骤(个人方法, ...

  9. Python安装第三方包(模块/工具)出现链接超时,网速慢,安装不上的问题如何解决

    之前我的电脑重新装了系统以后,发现安装完Python后, 使用pip linstall 安装第三方包的时候,网速慢的一匹 有时候只有几百b/s ,而且还动不动就会出现无法安装,链接超时等问题. 今天我 ...

  10. Spark RPC框架源码分析(三)Spark心跳机制分析

    一.Spark心跳概述 前面两节中介绍了Spark RPC的基本知识,以及深入剖析了Spark RPC中一些源码的实现流程. 具体可以看这里: Spark RPC框架源码分析(二)运行时序 Spark ...