store.js - 实现本地存储（LocalStorage）

store.js - 实现本地存储（LocalStorage）

• 在项目中，存储数据到本地浏览器
• store.js 是一个兼容绝大部分主流浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 会根据浏览器自动选择使用 localStorage、globalStorage 或者 userData 来实现本地存储功能。
• store.js 提供非常简洁的 API 来实现跨浏览器的本地存储功能：
• 安装：

npm安装

npm install store -save

浏览器安装

<script src="path/to/my/store.legacy.min.js"></script>

cdn

<script src="https://cdn.bootcss.com/store.js/1.3.20/store.min.js"></script>

API

// 存储变量到user键
store.set('user', { name:'Marcus' })
 
//获取内容
store.get('user')
 
// 删除键
store.remove('user')
 
// 清除所有的键
store.clearAll()
 
// 循环显示所有的键值对
store.eachEach(function(key, value) {
	console.log(key, '==', value)
})

• 在vue里面使用store.js

npm install store -save

1. 在package.json里面会有"store": "^2.0.12",
2. 在src下新建utils文件夹，在其他创建一个叫localstoreutil.js的文件，用来存放缓存数据的方法。
3. 在localstoreutil.js里面引入store.js包，注意区分使用vuex时的store文件夹，所以需要以后方法引入

const store = require('store/dist/store.legacy'); //store.legacy可用来兼容所有浏览器，所以需要引入的是这个

4. 封装方法

说明本地存储帮助类(全)
 *@param   key  缓存key
 *@param   value  缓存值
const store = require('store/dist/store.legacy');

let localStoreUtil = {};
//添加缓存 如果缓存存在则覆盖
localStoreUtil.addCache = function (key, value) {
  store.set(key, value);
};
 /*说明     插入缓存 如果缓存存在则覆盖
    *@param   key  缓存key
    *@param   value  缓存值
    *@return  true 添加缓存成功 false未成功
localStoreUtil.insertCache = function (key, value) {
  if (localStoreUtil.hasCache(key)) {
    return false;   //缓存存在，不需要再存缓存，返回false
  } else {
    store.set(key, value); //添加缓存
    return true;
  }
};
/*说明     获取缓存
    *@param   key  缓存Key
    * @return   缓存value
localStoreUtil.getCache = function (key) {
  if (localStoreUtil.hasCache(key)) {
    return store.get(key)
  } else {
    return null;
  }
};
 /*说明     移除缓存
    *@param   key  缓存Key
localStoreUtil.removeCache = function (key) {
  store.remove(key);
};
  /*说明     判断缓存是否存在
    *@param   key  缓存key
    * @return   true存在 false不存在
localStoreUtil.hasCache = function (name) {
  let key_search = name;
  let hasData = false;
  store.each(function (value, key) {
    if (key === key_search) {
      return hasData = true;
    }
  });
  return hasData;
};
  /*说明     清空缓存
localStoreUtil.clearAll = function () {
  store.clearAll()
};
    /*说明     获取所有缓存Keys数组
    * @return   key数组
localStoreUtil.getAllKeys = function () {
  return store.keys();
};

export default localStoreUtil;

5. 在common文件下新建cachehelper.js文件里面封装自己需要的缓存方法
   引入： import LocalStoreUtil from '../utils/localstoreutil'

import LocalStoreUtil from '../utils/localstoreutil'

let cacheHelper = {}

//清除缓存
cacheHelper.clearAllCache = function () {
  LocalStoreUtil.clearAll();
}


/**
 * 用户，一般后端管理系统项目都有登录界面，单独写一套登录缓存存取的方法，直接调用
 */
 //将用户登录后后端返回的信息缓存在本地
cacheHelper.setUserInfoCache = function (value) {
  LocalStoreUtil.addCache('userInfoCache', value)
}
//拿缓存数据
cacheHelper.getUserInfoCache = function () {
  return LocalStoreUtil.getCache('userInfoCache')
}
//清除缓存数据
cacheHelper.removeUserInfoCache = function () {
  return LocalStoreUtil.removeCache('userInfoCache')
}
//如果登录后后端返回数据不为空，从缓存中拿登录名userNmae,根据项目而定，不是固定不变的。
cacheHelper.getUserAccount = function () {
  if (cacheHelper.getUserInfoCache() !== null) {
    return cacheHelper.getUserInfoCache().userName
  } else {
    return ""
  }
}
//同理拿tokenid
cacheHelper.getUserTokenId = function () {
  if (cacheHelper.getUserInfoCache() !== null) {
    return cacheHelper.getUserInfoCache().tokenId
  } else {
    return null
  }
}
//同理拿用户id  userid
cacheHelper.getUserId = function () {
  if (cacheHelper.getUserInfoCache() !== null) {
    return (cacheHelper.getUserInfoCache().userInfo || {}).userId
  } else {
    return null
  }
}





/**
 * 自定义方法，用到各个需要缓存的地方
 */
cacheHelper.setUserDefinedData = function (name, value) {
  LocalStoreUtil.addCache(name, value);
}
cacheHelper.getUserDefinedData = function (name) {
  return LocalStoreUtil.getCache(name);
}
cacheHelper.removeUserDefinedData = function (name) {
  return LocalStoreUtil.removeCache(name);
}

export default cacheHelper

• 在项目中使用：

  created() {     
    // 将客户信息存入本地
    //this.$route.params.tradersrow是页面带入的信息看是否有值
      if (this.$route.params.tradersrow) {   //有值存入本地
      localstoreutil.addCache(       
        'TRADERSROW_SESSION',
        this.$route.params.tradersrow
      )
    } else if (    //若无值或者没有带入则跳入首页
      !this.$route.params.tradersrow &&
      localstoreutil.getCache('TRADERSROW_SESSION') === null
    ) {
      this.$router.push({
        name: 'traderslist'
      })
    }
  },