Comment utiliser le stockage local et le stockage de sessions dans Vue

Cet article présente principalement l'utilisation et l'expérience détaillées du stockage local et du stockage de session dans Vue. Les amis dans le besoin peuvent suivre l'éditeur pour référence et étude.

1. Plusieurs problèmes exposés lors de l'utilisation du projet

Tout le monde utilise directement localstorage['aaa']='This is a sample string' de cette implémentation de syntaxe native , ce degré de couplage est trop élevé. Si un jour nous devons changer la méthode d'implémentation, ou faire un certain contrôle sur la taille de stockage, alors il y aura beaucoup de code à modifier

Le projet est très gros, donc tout le monde doit démarrer la clé. Le nom sera inévitablement répété, et cela provoquera également une pollution mondiale

Parce que l'utilisation du stockage local n'est pas standardisée, cela entraîne un gaspillage et un espace de stockage insuffisant

2. Solution

Encapsuler l'utilisation du stockage et le gérer de manière uniforme

Standardiser les règles de dénomination de la valeur clé du stockage
Standardiser l'utilisation de stockage

2.1. Encapsuler la méthode unifiée

L'encapsulation dans des méthodes peut réduire le degré de couplage, faciliter le changement de méthode d'implémentation et contrôler la taille du stockage

Modifier l'implémentation peut être réalisé en configurant différents paramètres

Modifier comme indiqué La structure du projet illustrée

Mise en œuvre du code

/*
 * 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 .Standardiser l'utilisation des espaces de noms

Afin d'éviter la pollution des valeurs clés, nous pouvons utiliser les espaces de noms de manière raisonnable

Nous pouvons définir des espaces de noms, mais nous ne pouvons pas stocker beaucoup de données dans le même objet, donc. le nombre d'opérations ultérieures sera trop important

Par exemple, globalement Sous global

Par exemple, l'ajout d'affixes système à chaque système fonctionnel

La spécification de l'espace de noms d'un système doit être conçu à l'avance, sinon beaucoup de gens ne l'utiliseront pas conformément aux règles lors du développement réel

Les éléments utilisés globalement doivent être reflétés dans le document README.md

Exemple

* 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. Spécifications d'utilisation du stockage

2.3.1. Cause du problème

Ce problème se produit car nous devons nous connecter avec des autorisations, puis lors de la connexion, il continue de signaler que l'espace de stockage est insuffisant. Après avoir vérifié la raison, nous avons constaté que le backend renvoyait tous les milliers de données super-gérées. Plus tard, le contenu des données renvoyées par l'interface backend a été modifié pour résoudre ce problème.

Mais à quoi cet incident nous a-t-il amené à réfléchir ?

La capacité de stockage du stockage local et du stockage de sessions est en gros de 5 Mo dans différents navigateurs

Le stockage du stockage local et du stockage de sessions suit le nom de domaine

stockage local sous boss.hivescm.com Le stockage est de 5M

Le stockage de stockage local sous b2b.hivescm.com est également de 5M

Même si le problème est résolu cette fois, nous devrions élaborer un plan pour utiliser pleinement le stockage local et le stockage de session sous un seul nom de domaine. 10 M d'espace au total

2.3.2. Plan d'utilisation du stockage

Les éléments utilisés globalement, partagés et stockés de manière permanente sont stockés dans le stockage local

Aucun stockage permanent n'est requis. N'oubliez pas de nettoyer les choses à temps après utilisation

Si la quantité de données est trop importante, ne la stockez pas localement et changez-la en acquisition dynamique

Vous pouvez utiliser Indexeddb avec une plus grande capacité de stockage, mais il y a un problème de compatibilité

Vous pouvez limiter le nombre de mots à stocker en stockage dans le plan de mise en œuvre

Utiliser pleinement et raisonnablement les fonctionnalités H5 de stockage de session et de stockage local

Par exemple : les données de la liste sont stockées dans En fait, vuex sera également stocké dans le stockage local

Par exemple : certaines données pour la vérification du formulaire utilisent le stockage de session

Autres

3.1. Extension

Cela peut être déduit du traitement des événements. Les événements inutiles doivent être nettoyés à temps lors de la sortie du composant vue

Par exemple : ceci. .bus.$on('aa') doit être utilisé pour cet événement de désinstallation.bus.$off('aa')

3.2 Acquisition de la longueur des caractères

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

Ce qui précède est ce que. J'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Plug-in JS pour formulaires Web (recommandation de haute qualité)

Comment implémenter la fonction de service client en ligne dans jQuery

Comment ajouter dynamiquement à la liste dans jQuery

À propos des problèmes de configuration d'optimisation dans Webpack

Dans Comment créer des applications Electron dans Webpack

Problèmes concernant les chemins d'image non sécurisés à l'aide d'Angular4

Comment implémenter les coordonnées croisées suivant la souris effet dans JS

Comment utiliser la fenêtre EasyUI dans jQuery

Comment utiliser le plug-in de date laydate.js dans Angular4.0

Comment implémenter le changement de défilement d'étiquettes dans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!