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. Cookie的一点认识!

    使用cookie的时间不短了,但是每次都是用一点查一点,也没有总结过.趁着项目不忙的间隙,总结一下.首先说为什么要使用cookie,什么是cookie cookie是用户访问一些网站后,浏览器生成的给 ...

  2. 前端入门14-JavaScript进阶之继承

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  3. SAP MM ME1M报表结果不科学?

    SAP MM ME1M报表结果不科学? 做过SAP MM顾问的都知道,报表ME1M可以查询物料的info record列表,即是说可以以列表的形式批量显示多个物料的采购价格主数据. 但是这个报表有个不 ...

  4. Netty学习笔记(四) 简单的聊天室功能之服务端开发

    前面三个章节,我们使用了Netty实现了DISCARD丢弃服务和回复以及自定义编码解码,这篇博客,我们要用Netty实现简单的聊天室功能. Ps: 突然想起来大学里面有个课程实训,给予UDP还是TCP ...

  5. 前后端分离djangorestframework—— 接入第三方的验证码平台

    关于验证码部分,在我这篇文章里说的挺详细的了:Python高级应用(3)—— 为你的项目添加验证码 这里还是再给一个前后端分离的实例,因为极验官网给的是用session作为验证的,而我们做前后端分离的 ...

  6. Sqlite3-安装使用

    Sqlite安装 请访问 SQLite 下载页面,从 Windows 区下载预编译的二进制文件. 您需要下载 sqlite-tools-win32-*.zip 和 sqlite-dll-win32-* ...

  7. Django 数据流程图

    根据学习Django并且通过几个作业,发现Django制作网站的数据流程有些比较难懂,所以制作一个数据流程图,帮助自己理解,也希望对正学习的人有所帮助! 别的不多说,上美图:

  8. .net DLL版本管理

    每个DLL打上版本号,方便识别维护

  9. 面向对象_classmethod_staticmethod

    classmethod:类方法 主要用于改变静态属性 class Fruit_price: __discount= 1 def __init__(self,original_price): self. ...

  10. Redis数据过期策略详解

    http://www.cnblogs.com/xuliangxing/p/7151812.html 本文对Redis的过期机制简单的讲解一下 讲解之前我们先抛出一个问题,我们知道很多时候服务器经常会用 ...