微信小程序webview部分安卓机localStorage失效，兼容localStorage 和cookie

一.出现问题

最近一一个项目小程序webview页面使用到小程序穿过去的数据进行调用，在苹果的手机都是没有用问题的，一直好好的，后面测试拿来了国产的各大品牌的安卓机测试，噩梦就开始了，在华为和oppe手机会出现localStorage存储的数据失效，导致传过去的数据没有了，造成业务流程不同。

二、原来的localStorage的封装

// An highlighted block
/**
 * Created by wuxuanhua on 18/8/3
 */
'use strict'

import Vue from 'vue'
import _ from 'lodash'
import Base64 from '~/utils/base64'

const Storage = (function () {
  let Params = {
    hondaUserObj: null,
    hondaPasswordObj: null, // 记住登录密码
    thirdLoginBackUrl: null,
  }

  // 定义类
  class Storage {
    constructor () {
      this.storage = window.localStorage
    }

    // set
    set (key, value) {
      this.storage.removeItem(key)
      this.storage.setItem(key, Base64.encode(value))
    }

    // get
    get (key) {
      let value = this.storage.getItem(key) || ''
      if (value !== '' && Object.prototype.toString.call(value) === '[object String]') {
        // 未经base64处理的数据
        if (value.indexOf('{') >= 0 || value.indexOf(':') >= 0 || value.indexOf('}') >= 0) {
          this.storage.removeItem(key) // 清除该存储内容
          value = ''
        } else {
          value = Base64.decode(value)
        }
      }
      return value
    }

    // remove
    remove (key) {
      this.storage.removeItem(key)
    }

    // clear
    clear () {
      this.storage.clear()
    }
  }

  let StorageObj = new Storage() // 存储操作对象
  // 本地存储封装对象
  let StorageService = {} // new Object();
  _.each(Params, (value, key) => {
    StorageService[key] = {
      set: (value) => {
        StorageObj.set(key, value)
      },
      get: () => {
        return StorageObj.get(key)
      },
      getReset: () => {
        let _value = StorageObj.get(key)
        StorageObj.remove(key)
        return _value
      },
      clear: () => {
        StorageObj.remove(key)
      },
      clearAll: () => {
        StorageObj.clear()
      }
    }
  })

  return StorageService
})()

Vue.prototype.$storage = Storage // VUE全局变量 Storage
export default Storage

三、兼容localStorage和cookie的封装

为了处理这烦人的事情，如果把localStorage 全都换回cookie改动的页面太大了，大家都懂的，贼烦！！！！！！只好做localStorage 和cookie的兼容了，在localStorage 失效的时候调用cookie来存储数据，然而这两个小东西并不是那么可爱了！！！！

1.增加获取document.cookie

 // 定义类
 class Storage {
   constructor () {
     this.storage = window.localStorage
     this.cookieData = document.cookie
   }

2.存储localStorage，如果localStorage失效，value为空时，存取cookie

// set
   set (key, value) {
     // console.log('set')
     if (value === '') {
       let expiredays = 30
       let exdate = new Date()
       exdate.setDate(exdate.getDate() + expiredays)
       this.cookieData = key + '=' + escape(value) + ((expiredays === null) ? '' : ';expires=' + exdate.toGMTString())
       this.storage.removeItem(key)
       this.storage.setItem(key, Base64.encode(value))
     } else {
       this.storage.removeItem(key)
       this.storage.setItem(key, Base64.encode(value))
     }
   }

4.存储cookie，获取cookie，移除cookie

 /* -------- cookie -------- */
   // cookie
   setCookie (key, value, expiredays = 30) {
     let exdate = new Date()
     exdate.setDate(exdate.getDate() + expiredays)
     this.cookieData = key + '=' + escape(value) + ((expiredays === null) ? '' : ';expires=' + exdate.toGMTString())
   }
   // 取回cookie
   getCookie (key) {
     if (this.cookieData.length > 0) {
       let startData = this.cookieData.indexOf(key + '=')
       if (startData !== -1) {
         startData = startData + key.length + 1
         let endData = this.cookieData.indexOf(';', startData)
         if (endData === -1) {
           endData = this.cookieData.length
         }
         let value = unescape(this.cookieData.substring(startData, endData))
         return value
       }
     }
     return ''
   }

   // 移除cookie
   removeCookie (key) {
     let exdate = new Date()
     exdate.setDate(exdate.getDate() - 1)
     let cval = this.getCookie(key)
     if (cval !== null) {
       this.cookieData = key + '=' + cval + ';expires=' + exdate.toGMTString()
     }
   }
 }

5.如果localStorage失效，返回cookie

 get: () => {
       return StorageObj.get(key) ? StorageObj.get(key) : StorageObj.getCookie(key)
     },

6.清除localStorage和cookie

getReset: () => {
       if (StorageObj.get(key)) {
         let _value = StorageObj.get(key)
         StorageObj.remove(key)
         return _value
       } else {
         let _value = StorageObj.getCookie(key)
         StorageObj.removeCookie(key)
         return _value
       }
     },
 clear: () => {
       if (StorageObj.get(key)) {
         StorageObj.remove(key)
       } else {
         StorageObj.removeCookie(key)
       }
     },

四、第一次写博客，请多多关照，望以后可以写一些有价值的东西

写的东西不多，希望可以遇到这个问题的小伙们，若文中有错，希望大佬们指正一下小弟，小弟菜鸡前端一枚。