VUE浏览器储存封装
import {isFunction, extend} from 'lodash' const _originStorage = function () { var pluses = /\+/g function encode (s) { return _cookie.raw ? s : encodeURIComponent(s) } function decode (s) { return _cookie.raw ? s : decodeURIComponent(s) } function stringifyCookieValue (value) { return encode(_cookie.json ? JSON.stringify(value) : String(value)) } function parseCookieValue (s) { if (s.indexOf('"') === 0) { s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\') } try { s = decodeURIComponent(s.replace(pluses, ' ')) return _cookie.json ? JSON.parse(s) : s } catch (e) {} } function read (s, converter) { var value = _cookie.raw ? s : parseCookieValue(s) return isFunction(converter) ? converter(value) : value } var _cookie = function (key, value, options) { // Write if (arguments.length > 1 && !isFunction(value)) { options = extend({}, _cookie.defaults, options) if (typeof options.expires === 'number') { var days = options.expires var t = options.expires = new Date() t.setMilliseconds(t.getMilliseconds() + days * 864e+5) } return (document.cookie = [ encode(key), '=', stringifyCookieValue(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')) } var result = key ? undefined : {} var cookies = document.cookie ? document.cookie.split('; ') : [] var i = 0 var l = cookies.length for (; i < l; i++) { let parts = cookies[i].split('=') let name = decode(parts.shift()) let cookie = parts.join('=') if (key === name) { result = read(cookie, value) break } if (!key && (cookie = read(cookie)) !== undefined) { result[name] = cookie } } return result } // originStorage return (function () { var cookieKeyPrefix = '__localStorage__' var supportLocalStorage = true try { window.localStorage.setItem('__test__', 1) window.localStorage.getItem('__test__') window.localStorage.removeItem('__test__') } catch (e) { supportLocalStorage = false } if (supportLocalStorage) { return { get: function (key) { return window.localStorage.getItem(key) }, set: function (key, value) { return window.localStorage.setItem(key, value) }, clear: function () { return window.localStorage.clear() }, remove: function (key) { return window.localStorage.removeItem(key) } } } else { return { get: function (key) { return _cookie(cookieKeyPrefix + key) }, set: function (key, value) { return _cookie(cookieKeyPrefix + key, value, { expires: 365 }) }, clear: function () { var cookies = document.cookie.split(';') for (var i = 0; i < cookies.length; i++) { var key = cookies[i].split('=')[0] if (key.indexOf(cookieKeyPrefix) === 0) { _cookie(key, '', { expires: -1 }) } } }, remove: function (key) { return _cookie(cookieKeyPrefix + key, '', { expires: -1 }) } } } })() } // export default () => { const _localStorage = function () { const originStorage = _originStorage() this.defaultOption = { maxAge: 0 // ms } this.get = function (k) { var self = this var a = originStorage.get(k) var _return try { var json = JSON.parse(a) var expiresTimestamp = json.e if (expiresTimestamp && Date.now() > expiresTimestamp) { _return = undefined self.remove(k) } else { _return = json.a } } catch (e) { _return = undefined } return _return } this.set = function (k, v, option) { option = extend(true, extend({}, this.defaultOption), option) var o = { a: v, e: option.maxAge > 0 ? (Date.now() + option.maxAge) : 0 } originStorage.set(k, typeof o === 'string' ? o : JSON.stringify(o)) } this.clear = function () { return originStorage.clear() } this.remove = function (k) { return originStorage.remove(k) } } export default new _localStorage()
挂载
// localStorage plugin import localStorage from '@/common/localstorage' function plugin (Vue) { if (plugin.installed) { return } Vue.localStorage = localStorage Object.defineProperties(Vue.prototype, { $localStorage: { get () { return localStorage } } }) } if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(plugin) } export default plugin
引入import LocalStorage from '@/plugin/localStorage';
Vue.use(LocalStorage);
VUE浏览器储存封装的更多相关文章
- vue2.0 如何自定义组件(vue组件的封装)
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- Vue之优化封装请求方法
Vue之优化封装请求方法 对于代码中的请求操作 1.接口请求可能需要重用 2.实际工作中,接口非常容易变动, 改起来很麻烦! 我们建议的做法是把所有的请求都封装成函数然后统一的>###组织到模块 ...
- vue自定义插件封装,实现简易的elementUi的Message和MessageBox
vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template> <transition ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- vue项目-axios封装、easy-mock使用
vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...
- android利用WebView实现浏览器的封装
android提供了封装浏览器的接口,可以让开发者利用自己的view显示网页内容.今天又实现研究了一下,利用WebView显示浏览器内容,还可以利用 WebViewClient显示自己需要的内容. 参 ...
- 原生JS跨浏览器事件封装处理
引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法 一.a ...
随机推荐
- Cookie的一点认识!
使用cookie的时间不短了,但是每次都是用一点查一点,也没有总结过.趁着项目不忙的间隙,总结一下.首先说为什么要使用cookie,什么是cookie cookie是用户访问一些网站后,浏览器生成的给 ...
- 前端入门14-JavaScript进阶之继承
声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...
- SAP MM ME1M报表结果不科学?
SAP MM ME1M报表结果不科学? 做过SAP MM顾问的都知道,报表ME1M可以查询物料的info record列表,即是说可以以列表的形式批量显示多个物料的采购价格主数据. 但是这个报表有个不 ...
- Netty学习笔记(四) 简单的聊天室功能之服务端开发
前面三个章节,我们使用了Netty实现了DISCARD丢弃服务和回复以及自定义编码解码,这篇博客,我们要用Netty实现简单的聊天室功能. Ps: 突然想起来大学里面有个课程实训,给予UDP还是TCP ...
- 前后端分离djangorestframework—— 接入第三方的验证码平台
关于验证码部分,在我这篇文章里说的挺详细的了:Python高级应用(3)—— 为你的项目添加验证码 这里还是再给一个前后端分离的实例,因为极验官网给的是用session作为验证的,而我们做前后端分离的 ...
- Sqlite3-安装使用
Sqlite安装 请访问 SQLite 下载页面,从 Windows 区下载预编译的二进制文件. 您需要下载 sqlite-tools-win32-*.zip 和 sqlite-dll-win32-* ...
- Django 数据流程图
根据学习Django并且通过几个作业,发现Django制作网站的数据流程有些比较难懂,所以制作一个数据流程图,帮助自己理解,也希望对正学习的人有所帮助! 别的不多说,上美图:
- .net DLL版本管理
每个DLL打上版本号,方便识别维护
- 面向对象_classmethod_staticmethod
classmethod:类方法 主要用于改变静态属性 class Fruit_price: __discount= 1 def __init__(self,original_price): self. ...
- Redis数据过期策略详解
http://www.cnblogs.com/xuliangxing/p/7151812.html 本文对Redis的过期机制简单的讲解一下 讲解之前我们先抛出一个问题,我们知道很多时候服务器经常会用 ...