详解Vue中localstorage和sessionstorage的使用


Posted in Javascript onDecember 22, 2017

1. 项目使用中暴露出来的几个问题

大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多

项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染

因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用

2. 解决办法

封装storage的使用方法,统一处理

规范storage的key值的命名规则
规范storage的使用规范

2.1. 封装统一的方法

封装成方法可以降低耦合度,可以方便切换实现方式,可以控制存储量大小

改变实现可以通过配置不同的参数来实现

编辑如图所示的项目结构

代码实现

/*
 * storage.js
 */
/*
 * @Author: 石国庆
 * @Desc: 本地数据存储方法封装
 * @Date: 2017.11.14
 * @Ref:
 *  https://github.com/WQTeam/web-storage-cache
 *  https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
 * @Explain:为了不new对象,只能多写几遍
 * @Example:
 *
 * 1、LocalStorage的使用
 * import storage from '@/utils/storage.js'
 * storage.setItem('shiguoqing0',[1,2,3,4,5,6])
 * storage.setItem('shiguoqing1',{userId:'dfdf',token:11232323})
 * storage.setItem('shiguoqing2','dfdfdf')
 * console.log(storage.getItem('shiguoqing0'))
 * console.log(storage.getItem('shiguoqing1'))
 * console.log(storage.getItem('shiguoqing2'))
 * storage.removeItem('shiguoqing2')
 *
 *
 * 2、SessionStorage的使用
 * storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
 *
 * */
// TODO:其他方法的实现
// TODO:超时时间的设置
/*
 * 方法实现
 * */
import local from './storage/localstorage.js'
import session from './storage/session.js'
import cookies from './storage/cookies.js'
import json from './storage/json.js'
/*
* 函数体
* */
let storage= {
 config:{
  type:'local',// local,session,cookies,json
  expires:new Date().getTime() + 100 * 24 * 60 * 60 * 1000
 },
 getStorage(options){
  let config={}
  if(options){
   config=Object.assign({},this.config,options)
  }else{
   config=this.config
  }
  return this.createStorage(config.type)
 },
 createStorage(name){
  switch(name){
   case 'local':return local;break
   case 'session':return session;break
   case 'cookies':return cookies;break
   case 'json':return json;break
  }
 },
 getItem(key,options){
  let store=this.getStorage(options)
  return store.getItem(key)
 },
 setItem(key, value,options){
  let store=this.getStorage(options)
  store.setItem(key,value)
 },
 removeItem(key,options){
  let store=this.getStorage(options)
  store.removeItem(key)
 },
 getAll(){},
 clear(options){
  let store=this.getStorage(options)
  store.clear()
 },
 key(n){},
 lenght(){},
 has(key){},
 forEach(cb){},
 deleteAllExpires(){},
 // 获取最大存储空间:只有LocalStorage和SessionStorage可以使用这个方法
 getMaxSpace(options){
  let store=this.getStorage(options)
  store.getMaxSpace()
 },
 // 获取使用了的空间:只有LocalStorage和SessionStorage可以使用这个方法
 getUsedSpace(options){
  let store=this.getStorage(options)
  store.getUsedSpace()
 }
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5、遍历localStorage存储的key
//  .length 数据总量,例:localStorage.length
//  .key(index) 获取key,例:var key=localStorage.key(index);
// 备注:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。
// 超时设置
// function(st, key, value, expires) {
//  if (st == 'l') {
//   st = window.localStorage;
//   expires = expires || 60;
//  } else {
//   st = window.sessionStorage;
//   expires = expires || 5;
//  }
//  if (typeof value != 'undefined') {
//   try {
//    return st.setItem(key, JSON.stringify({
//     data: value,
//     expires: new Date().getTime() + expires * 1000 * 60
//    }));
//   } catch (e) {}
//  } else {
//   var result = JSON.parse(st.getItem(key) || '{}');
//   if (result && new Date().getTime() < result.expires) {
//    return result.data;
//   } else {
//    st.removeItem(key);
//    return null;
//   }
//  }
// }
/*
 * localstorage.js
 * localstorage的实现
 */
// 这个有点奇怪,文件名称叫local.js不能按照js文件解析
export default {
 getItem(key){
  let item = localStorage.getItem(key)
  // 这点要判断是字符串还是对象
  let result = /^[{\[].*[}\]]$/g.test(item)
  if (result) {
   return JSON.parse(item)
  } else {
   return item
  }
 },
 setItem(key, value){
  // 这点要判断是字符串还是对象
  if (typeof value == "string") {
   localStorage.setItem(key, value)
  } else {
   let item = JSON.stringify(value)
   localStorage.setItem(key, item)
  }
 },
 removeItem(key){
  localStorage.removeItem(key)
 },
 getAll(){},
 clear(){
  localStorage.clear()
 },
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){},
 // 获取localstorage最大存储容量
 getMaxSpace(){
  if (!window.localStorage) {
   console.log('当前浏览器不支持localStorage!')
  }
  var test = '0123456789'
  var add = function (num) {
   num += num
   if (num.length == 10240) {
    test = num
    return
   }
   add(num)
  }
  add(test)
  var sum = test
  var show = setInterval(function () {
   sum += test
   try {
    window.localStorage.removeItem('test')
    window.localStorage.setItem('test', sum)
    console.log(sum.length / 1024 + 'KB')
   } catch (e) {
    console.log(sum.length / 1024 + 'KB超出最大限制')
    clearInterval(show)
   }
  }, 0.1)
 },
 // 获取使用了的localstorage的空间
 getUsedSpace(){
  if (!window.localStorage) {
   console.log('浏览器不支持localStorage')
  }
  var size = 0
  for (item in window.localStorage) {
   if (window.localStorage.hasOwnProperty(item)) {
    size += window.localStorage.getItem(item).length
   }
  }
  console.log('当前localStorage使用容量为' + (size / 1024).toFixed(2) + 'KB')
 }
}
/*
 * session.js
 * sessionstorage的实现
 */
export default {
 getItem(key){
  let item = sessionStorage.getItem(key)
  // 这点要判断是字符串还是对象
  let result = /^[{\[].*[}\]]$/g.test(item)
  if (result) {
   return JSON.parse(item)
  } else {
   return item
  }
 },
 setItem(key, value){
  // 这点要判断是字符串还是对象
  if (typeof value == "string") {
   sessionStorage.setItem(key, value)
  } else {
   let item = JSON.stringify(value)
   sessionStorage.setItem(key, item)
  }
 },
 removeItem(key){
  sessionStorage.removeItem(key)
 },
 getAll(){},
 clear(){
  sessionStorage.clear()
 },
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){},
 // 获取localstorage最大存储容量
 getMaxSpace(){
  if (!window.sessionStorage) {
   console.log('当前浏览器不支持sessionStorage!')
  }
  var test = '0123456789'
  var add = function (num) {
   num += num
   if (num.length == 10240) {
    test = num
    return
   }
   add(num)
  }
  add(test)
  var sum = test
  var show = setInterval(function () {
   sum += test
   try {
    window.sessionStorage.removeItem('test')
    window.sessionStorage.setItem('test', sum)
    console.log(sum.length / 1024 + 'KB')
   } catch (e) {
    console.log(sum.length / 1024 + 'KB超出最大限制')
    clearInterval(show)
   }
  }, 0.1)
 },
 // 获取使用了的localstorage的空间
 getUsedSpace(){
  if (!window.sessionStorage) {
   console.log('浏览器不支持sessionStorage')
  }
  var size = 0
  for (item in window.sessionStorage) {
   if (window.sessionStorage.hasOwnProperty(item)) {
    size += window.sessionStorage.getItem(item).length
   }
  }
  console.log('当前sessionStorage使用容量为' + (size / 1024).toFixed(2) + 'KB')
 }
}
/*
 * cookies.js
 * cooikes的实现,这辈子估计没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}
/*
 * json.js
 * json的实现,这辈子估计也没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

2.2. 规范命名空间的使用

为了防止key值污染,我们可以合理使用命名空间

我们可以定义命名空间,但是不能把很多数据存储在同一对象里面,这样后面的操作量会太大

比如全局的在global下面

比如各功能系统的加上系统词缀

一个系统的命名空间规范应该提前设计好,否则真正开发起来会有很多人不按照规则使用

全局使用的东西要在README.md文档中体现出来

示例

* localStorage['SGQ.global.userAuthor']:登录的用户信息都在这里,菜单,组织,集团
* localStorage['SGQ.global.systemName']:登录的系统名称
* localStorage['SGQ.vuex.state']:vuex中的state的存储地址,这里面有所有的的东西
* localStorage['SGQ.wms.warehouse']:wms需要的仓库信息
+ localStorage['SGQ.wms.warehouse'].permissionId
+ localStorage['SGQ.wms.warehouse'].dataResource
* localStorage['SGQ.tms.org']:tms需要的网点的信息
+ localStorage['SGQ.tms.org'].permissionId
+ localStorage['SGQ.tms.org'].orgName

2.3. storage使用规范

2.3.1. 问题产生的原因

这个问题的产生是因为我们要做权限登录,然后登录的时候一直报存储空间不够的问题,查了原因发现是后端把所有的超管的几千条数据都返回来了,以至于不够用,后来修改了后端接口返回的数据内容解决了这个问题。

但是这次的事给我们带来了几点思考?

localstorage和sessionstorage的存储量在不同的浏览器中基本是5M

localstorage和sessionstorage的存储是跟着域名来的

boss.hivescm.com下localstorage存储是5M

b2b.hivescm.com下localstorage存储也是5M

即使这次问题解决了,但是我们应该定一套方案,充分利用一个域名下,localstorage和sessionstorage的共10M空间

2.3.2. storage使用方案

全局使用的东西,共享的东西,永久存储的东西储存在localstorage中

不需要永久存储的东西在使用完毕之后要记得及时清除

如果数据量过大就不要存储在本地了,变为动态获取

可以使用存储量更大的Indexeddb,不过有兼容性问题

可以在实现方案中对要存储到storage中的东西做字数限制

充分合理利用sessionstorage和localstorage的H5特性

例如:列表数据存储在vuex中其实也会存到localstorage

例如:表单校验的一些数据都用sessionstorage

3. 其他

3.1. 延伸扩展

由此可以类推到事件的处理,没用的事件要及时在退出vue组件的时候清理掉

例如:this.bus.$on('aa')要用this.bus.$off('aa')卸载事件

3.2. 字符长短获取

var len = 0
for (var i = 0; i < val.length; i++) {
 if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
  len += 2 //如果是全角,占用两个字节 如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
 else
  len += 1 //半角占用一个字节
}
return len

以上就是小编整理的关于Vue中localstorage和sessionstorage的用法的全部内容,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 #Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 #Javascript
js读取本地文件的实例
Dec 22 #Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 #Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 #Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 #Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 #Javascript
You might like
php并发加锁示例
2016/10/17 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
document.createElement()用法
2013/03/13 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
python转换摩斯密码示例
2014/02/16 Python
python的re模块应用实例
2014/09/26 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Python2与Python3的区别实例分析
2019/04/11 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
财务人员的自我评价范文
2014/03/03 职场文书
司仪主持词两篇
2014/03/22 职场文书
鉴定评语大全
2014/05/05 职场文书
产品委托授权书范本
2014/09/16 职场文书
2014年大学生工作总结
2014/11/20 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis