封装LocalStorage.js
之前使用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的更多相关文章
- MUI - 封装localStorage与plus.storage
MUI - 封装localStorage与plus.storage 2.0版本 在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存, 在切换到localstorage时 ...
- JsQuick--个人封装的Js库
JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...
- vue todolist 封装localstorage
//封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...
- 【转】封装原生JS实现Ajax
function createXHR() { if (window.XMLHttpRequest) { //IE7+.Firefox.Opera.Chrome 和Safari return new X ...
- 1-7 basket.js localstorage.js缓存css、js
basket.js 源码分析 api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/ 一.前言 b ...
- javascript - 封装原生js实现ajax
1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- 封装cookie.js、EventUtil.js、
最近学习了javascript,封装好的东西看起来舒服,以备需要的时候拉出来,jquery对javascript做了很好的封装!以后会多用jquery多些 var CookieUtil = { get ...
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- Python+requests+unittest+excel实现接口自动化测试框架
一.框架结构: 工程目录 二.Case文件设计 三.基础包 base 3.1 封装get/post请求(runmethon.py) import requests import json class ...
- SpringSecurity自定义AuthenticationProvider和AuthenticationFilter
AuthenticationProvider 默认实现:DaoAuthenticationProvider 授权方式提供者,判断授权有效性,用户有效性,在判断用户是否有效性,它依赖于UserDetai ...
- 强化学习(十一) Prioritized Replay DQN
在强化学习(十)Double DQN (DDQN)中,我们讲到了DDQN使用两个Q网络,用当前Q网络计算最大Q值对应的动作,用目标Q网络计算这个最大动作对应的目标Q值,进而消除贪婪法带来的偏差.今天我 ...
- Bootstrap 前端框架 遇到的问题 解决方案
bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏 直接放代码,更容易理解.下次可以套这个代码 <!DOCTYPE html> <html> &l ...
- Linux权限管理(week1_day5)--技术流ken
权限概述 Linux系统一般将文件可存/取访问的身份分为3个类别:owner(拥有者).group(和所有者同组的用户).others(其他人,除了所有者,除了同组的用户以及除了超级管理员),且3种身 ...
- springMVC报404,没有显示地址
正常报404会显示你的错误地址信息,而针对本问题 如果你使用的是springMVC框架,这就代表你的请求被拦截了
- 初学pyhon的几个练习小程序
一.概述 此程序示例为博主根据路飞学城的python的作业而写的(博主也是python初学者,仅花了99元报了路飞学城的python入门14天集中营3期网络课堂班),此程序非常适合python初学者拿 ...
- 戏说程序猿之cannot find the object
“别开玩笑了,程序员哪里需要对象!” 程序员难找对象原因无非如下: 1.工作时间长,恋爱时间少 2.性格偏于内向,不主动 3.不注意个人形象 程序员爱情观: 爱情就是死循环,一旦执行就陷进去了: 爱上 ...
- Ajax的面试题
一.什么事Ajax?为什么要用Ajax?(谈谈对Ajax的认识) 什么是Ajax: Ajax是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页应用的网 ...
- spring mvc 在上传图片时,浏览器报The request sent by the client was syntactically incorrect
项目中,在一个jsp页面里其它图片上传是功能是可以使用的,当我自己新加了一个图片上传时,提交表单后,浏览器报The request sent by the client was syntactical ...