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浏览器储存封装的更多相关文章

  1. vue2.0 如何自定义组件(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  2. Vue之优化封装请求方法

    Vue之优化封装请求方法 对于代码中的请求操作 1.接口请求可能需要重用 2.实际工作中,接口非常容易变动, 改起来很麻烦! 我们建议的做法是把所有的请求都封装成函数然后统一的>###组织到模块 ...

  3. vue自定义插件封装,实现简易的elementUi的Message和MessageBox

    vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template>     <transition  ...

  4. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  5. Vue服务端渲染和Vue浏览器端渲染的性能对比

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  6. Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  7. vue项目-axios封装、easy-mock使用

    vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...

  8. android利用WebView实现浏览器的封装

    android提供了封装浏览器的接口,可以让开发者利用自己的view显示网页内容.今天又实现研究了一下,利用WebView显示浏览器内容,还可以利用 WebViewClient显示自己需要的内容. 参 ...

  9. 原生JS跨浏览器事件封装处理

    引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法 一.a ...

随机推荐

  1. Java开发笔记(四十八)类的简单继承

    前面介绍了类的基本用法,主要是如何封装一个类的各项要素,包括成员属性.成员方法.构造方法等,想必大家对类的简单运用早已驾轻就熟.所谓“物以类聚,人以群分”,之所以某些事物会聚在一起,乃是因为它们拥有类 ...

  2. 设计模式之代理模式(Proxy)(2)

    代理模式是为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用,其特征是代理类与委托类有同样的接口. ...

  3. java-文件读取

    1.利用递归读取文件 (1)NotifyFolder.java package com.etc; import java.io.File; import java.io.IOException; im ...

  4. 浅谈"n个球"和"m个盒子"之间的乱伦关系

    无视标题,从我做起 update in 2018.10.1: 补充了"至多为1的四中情况" 这玩意儿的官方名字应该是叫"Twelvefold way",共用12 ...

  5. Arcgis瓦片--数据获取

    Arcgis的二维地图瓦片有两种获取方式 1.在Arcmap中对配置好的地图进行切图,生成对应瓦片 2.使用第三方的地图下载器,直接下载,导出成arcgis瓦片格式即可使用. 备注:这里主要介绍第二种 ...

  6. How to Apply Patches to a WLS 8.1 Environment

    APPLIES TO: Oracle Weblogic Server - Version 8.1 to 8.1Information in this document applies to any p ...

  7. C# 中使用特性获得函数被调用的路径,行号和函数

    自从 .net framework 4.5  增加了几个特性来获得函数的调用路径(CallerFilePath),调用行号(CallerLineNumber),和调用函数(CallerMemberNa ...

  8. SQLServer之创建INSTEAD OF INSERT,UPDATE,DELETE触发器

    INSTEAD OF触发器工作原理 INSTEAD OF表示并不执行其所定义的操作INSERT,UPDATE ,DELETE,而仅是执行触发器本身,即当对表进行INSERT.UPDATE 或 DELE ...

  9. Python简单多进程demo

    ''' 多线程使用场景: 怎样用Python的多线程提高效率? io操作不占用CPU 计算操作占用CPU Python多线程不适合CPU操作密集型的任务,适合io操作密集型的任务 如果有CPU操作密集 ...

  10. 浏览器各个版本和系统(chrome/safari/edge/qq/360)

    浏览器对象: let userAgent = navigator.userAgent.toLowerCase()console.log(userAgent) Edge: mozilla/5.0 (wi ...